C#nedir?com
 
YAZAR HAKKINDA
Turhal Temizer
Turhal Temizer
http://www.turhaltemizer.com
İletişme geçmek için tıklayın.
92 Makalesi yayınlanmakta.
Yazar hakkında detaylı bilgi için tıklayın.
Yayınlanan diğer makaleleri için tıklayın.
İlgili etiketler: ayrica boyutunu canvas degerlerini dinamik formumuzun gerekmektedir. internet istedigimiz kontrollerin koordinat olanak otomatik silverlight uygulamamizi Silverlight Turhal Temizer
 
YAZI HAKKINDA
Türü : Makale
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
Seviyesi : Orta
Kategori : Silverlight
Yayınlanma Tarihi : 2.5.2008
Okunma Sayısı : 16032
Yorum Sayısı : 3     yorum yaz
Site İçi AramaSİTE İÇİ ARAMA
Üye Girişini AçÜye GİRİŞİ
Üye girişi için tıklayın.
Kullanıcı Adı
Şifre
 
Beni her zaman hatırla
Bir hafta boyunca kullanıcı bilgilerinizi kullanıcı çıkışı yapana kadar hatırlar. (Paylaşılan bilgisayarlarda önerilmez.)
 
Şifremi / Kullanıcı Adımı unuttum.
 
.net TV RSS Serbest KÖŞE (?)
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
emre TAŞ
XML - Deniz Kılınç
emre TAŞ
yazının devamı >
emre TAŞ
Decompiling and Reverse Engineering .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Masaüstü mü ? İnternet Mi? .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
.Net Kavramları - .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Yeni Başlayanlar için - .Net Radyo
emre TAŞ
yazının devamı >
Makale Gönder Bende Yazmak İstiyorum
.net TV RSSBlogroll
Burak Selim Şenyurt
JWT(JSON Web Token) Kullanımı 18.12.2017
Burak Selim Şenyurt
Apache Kafka ile Konuşmaya Çalışmak 18.12.2017
Turhal Temizer 'in Blogu
ChatBot UI Sample 18.12.2017
Turhal Temizer 'in Blogu
C# – IRR Function 18.12.2017
  Diğer Herşey
Sponsorlar
BT Akademi
Medya Portakal
Video Hosting Sponsoru
Csharpnedir.com bir Ineta üyesidir
Uzman Abi
Her Yönüyle C# - Sefer Algan
Silverlight 2.0 - Uygulama Alanının Kontrol Edilmesi
 
Kapat
Sayfayı Yazdır Sık Kullanılanlara Ekle Arkadaşıma Gönder MySpace Del.Ico.Us Digg Facebook Google Mixx Reddit StumbleUpon
Silverlight 2.0 ile uygulamalar geliştirmeye bir önceki yazımızda başlamıştık. İlk olarak Silverlight 2.0 ‘ın proje dosyaları konusunda bize sağlamış olduğu yeniliklere göz attıktan sonra 2.0 sürümü ile eklenmiş olan Silverlight kontrollerinden yararlanarak ilk uygulamamızı geliştirmiştik. Uygulamamızda tek bir buton yer alıyordu ve üzerine tıklandığı zaman içeriğini yönetilebilir kod tarafından değiştirebiliyorduk. Bu ufak örneğimiz ile Silverlight 2.0 dünyasına giriş yapmış bulunuyoruz. Hazırlamış olduğumuz web uygulamalarında ekranımızı istediğimiz oranda yönetebilmemiz gerekmektedir. Web formumuzda yer alan kontrollerimizi belirli alanlarda bulundururken, formumuzun çeşitli bölgelerine farklı farklı kontroller eklememiz gerekmektedir. Yukarıda vermiş olduğumuz bilgileri göz önünde tutarak bu yazımızda web formumuzu nasıl yönetebileceğimize değinmeye çalışacağız.

Web Formu Yönetebilmek

Windows Presentation Foundation ve Silverlight kullanmış olduğumuz formlar üzerinde sınırları zorlayacak ölçülerde değişiklik yapılmasına olanak tanımaktadırlar. Geliştiriciler için sağlanan bu kolaylıklar sayesinde ekran üzerinde yer alan bir kontrolün hangi noktada nasıl duracağından üstüne tıklandığında ne tür animasyonlar yapacağına kadar birçok kullanıcı arayüzü tabanlı işlem yapabiliyoruz. Ayrıca forma eklediğimiz kontrollerin dinamik animasyonlar alabilmesini ve internet tarayıcımızın boyut değişikliği durumunda form üzerinde yer alan kontrollerimizin de form üzerinde otomatik olarak boyutlanmasını sağlayabiliyoruz. Geliştiriciler Windows Presentation Foundation da form yüzeyinde yer alan kontrolleri istediğimiz şekilde boyutlandırarak kullanabiliyordu. WPF ‘te de form yüzeyi yönetilirken en çok kullanılan panel yapıları Silverlight Beta1 ‘in içerisine eklenmiştir. Şimdi bu panellerden en önemli üç tanesini açıklamaya çalışalım.

Canvas
StackPanel
Grid

Canvas Panel

Canvas panel ’i en basit anlamda açıklamaya çalışırsak, form üzerine eklemiş olduğumuz kontrollerin pozisyon ve koordinat bilgilerini belirtebildiğimiz en temel form yüzeyidir.

Canvas nesnesinde kullanılan öğeler, XAML dosyadan çağırılan “Attached Property” kontrollerin pozisyonlarına ait bilgilere sağda, solda veya ortada biçiminde bilgiler aktarılmaktadır.

Attached Property ‘de tutulan veriler form üzerinde izin verildiği düzeyde işlem yapabilmemize olanak tanımaktadır. Canvas içerisinde, bir kontrolün form üzerinde hangi noktada tutulacağına ilişkin bilgileri, “Left”, “Top” v.b. özelliklerine form koordinatlarına ait değerleri verilerek çok basit olarak form üzerindeki yerlerini belirlememize olanak tanımaktadır. Şimdi çok basit bir örnek verelim. Canvas yüzeyimizin üzerine iki adet buton ekleyeceğiz. Eklemiş olduğumuz kontrollerin canvas üzerindeki koordinat özelliklerine Left için 50 Top için ise 50 ve 150 değerlerini vereceğiz. XAML kod tarafında belirttiğimiz özellikleri eklersek,


Canvas yüzeyinde kullanabileceğimiz koordinat noktalarına ilişkin bize sunulan özellikler,


Yukarıdaki gibidir. İki form kontrolümüzü uygulamamıza ekledikten sonra derlediğimiz zaman ise web tarayıcımızda aşağıdaki gibi bir görünüm elde ediyoruz.


Canvas yüzeyimiz internet tarayıcımızı her ne kadar büyültüp küçültürsek küçültelim belirtmiş olduğumuz boyut kadar ekran yer kaplayacaktır. Ayrıca canvas yüzey üzerinde yer alan kontrollere de canvas üzerindeki koordinat noktalarında kesin noktalar verdiğimiz için tarayıcı boyutunda yapılacak her türlü değişiklikte kontrollerin form üzerinde kalacakları noktalar aynı olacaktır.

Canvas yüzeyimize alternatif olarak geliştirilmiş olan StackPanel ve Grid yüzeylerde yer almaktadır. Bu yüzeyler dinamik olarak kontrollere özellik atayabilmemize olanak tanımaktadır.

StackPanel

StackPanel üzerine eklediğimiz kontroller aynı değerler almaları durumunda yüzeyi eşit satırlara bölecek ve bu satırlara ne kadar kontrol belirlediysek onları yerleştirilecektir. Şimdi bahsettiğimiz bu özellik içim XAML dosyaya bütün özellikleri aynı olan üç buton ekleyelim ve sonucu hep birlikte görelim.


Buton kontrollerimizi ekledikten sonra uygulamamızı derlediğimizde internet tarayıcımızda aşağıdaki gibi bir sonuç alırız.


Eğer biz satırlar olarak değil de sütun yani yatay biçimde sıralamak istiyorsak orientation(yönelim) özelliğini Horizontal(yatay) olarak belirleyeceğiz. StackPanel varsayılan olarak orientation özelliği Vertical(dikey) olarak belirlenmiştir.


Uygulamamızı derlediğimiz zaman web form üzerinde yer alan kontrollerin otomatik olarak koordinat noktalarını değiştirdiğini göreceğiz.


Grid

Grid kontrolü yüzey yönetimi konusunda karşımıza en kompleks yapı olarak çıkıyor. Grid, geliştiricilere çoklu satır ve sütun özelliklerini sumaktadır. Dinamik olarak satır ve sütun özelliklerini belirledikten sonra form kontrollerine atayarak kullanabilmemiz mümkündür.

Satır ve sütuna ait özellikleri tanımlayabilmemiz için <Grid.RowDefination> ve <Grid.ColumnDefination>özelliklerine değerler atayabilmemiz gerekmektedir. Bu iki özellik Grid kontrolünün alt özelliklerindendir.

Şimdi bu Grid kontrolünü ve alt özelliklerini nasıl kullanabileceğimize göz atalım.


XAML dosyamızda kodlarımızı ekledikten sonra uygulamamızı derlediğimizde internet tarayıcımızda aşağıda ki gibi bir ekran görüntüsü bizi karşılayacaktır.


Grid kontrolünü kullanarak çok satır ve sütun kullanımı öğrenmiş oluyoruz. Fakat grid kontrolü ile ilgili değinecek olduğumuz bir nokta daha eğer form kontrollerinin boyutlarını tarayıcı ile otomatik olarak şekillenmesini istiyorsak Height ve Width özelliklerine Auto yerine geçen “*” ‘ı koymamız yeterli olacaktır.

Web Formda Panellerin Kullanıma Göre Sıralanması

Web formumuzun alanını iki satıra böleceğiz. Bu bölme işlemimizi yapmamızın amacı üst satıra arama bölümü yaparken alt bölümü genel bilgilendirme ekranı olarak belirleyeceğiz. Peki, biz bu işlemi satıra bölmeden de yapamaz mıydık diye kafanıza bir soru takılır. Cevabı yapabilirdik olur ama yapmış olduğumuz tasarımın sonucunda kullanıcılar internet tarayıcısı boyutlarını değiştirdikleri takdirde karşılaşacakları görüntü hiçte hoş olmaya biliyor. Göze güzel gözükmemesinin sebebi işlemlerimizi tek satırda yapacağız için ya satır ve sütuna tek değer vereceğiz ya da değerlerini otomatik olarak aldıracağız. Bu iki durumda da istenilen verim sağlanamayacağı için alanımızı iki parçaya bölüyoruz. Üst satırımızın yüksekliği özelliğine “40” değerini verirken alt satırımızın yüksekliği değerine otomatik olarak şekillenebilmesi için “*” değerini veriyoruz. Ayrıca ayırdığımız alanı görebilmemiz için Grid kontrolümüzün çizgi değerlerini de True değerine getiriyoruz.


Grid de oluşturmuş olduğumuz satır ve sütunları göstermesini istediğimiz için uygulamamız boş olduğu halde yalnızca bu çizgileri gösterecektir.


Şimdi Grid kontrolünün içerisine yeni bir alt kontrol daha ekleyelim ve bu kontrolümüzün içerisine sütunları da ekleyeceğiz. Ayrıca Grid kontrolümüzün çizgilerini yine açık tutuyoruz.


Uygulamamızı derlediğimiz zaman internet tarayıcımızda karşılaşacak olduğumuz ekran görüntüsü aşağıdaki gibidir.


Yukarıda belirttiğimiz satır ve sütun özellikleri HTML tablolardan alışık olduğumuz satır ve sütunlar ile aynı mantıkta çalışmaktadır. Bu ufak notu aklınızdan çıkarmazsanız çok daha kolaylıkla işlemlerinizi yapabilirsiniz.

Web formumuzun alanını daha rahat kullanabilmek için parçalara böldüğümüze göre artık form kontrollerimizi uygulamamıza eklemeye başlayabiliriz. <Border> kontrolü ile arama çubuğumuz yanında bir tasarım oluşturacağız ve border kontrolümüzün içerisinde yazı gözükmesi için >TextBlock> kontrolünü ekliyoruz. Arama yapabilmemiz için içerisi kullanıcı tarafından doldurulacak bir kontrol eklememiz gerekmektedir. Bunun için <WatermarkedTextBox> ekliyoruz. Son olarak ta alanımızın alt kısmının boş gözükmemesi için bir <TextBlock> daha ekliyoruz.


Uygulamamızı çalıştırdığımızda ise aşağıdaki ekran görüntüsünü elde ederiz.


Uygulamamızın Boyutunun Dinamik Olarak Değiştirilebilmesi

XAML dosyamızdaki kodları eklerken projenin boyutunu elimizle giriyoruz ve bu girdiğimiz boyut doğrultusunda uygulamalarımız oluşmaktadır. Eğer bu boyut sabitleme işlemleri ile devam edersek bizim form kontrollerimize atadığımız otomatik boyutlandırma özelliklerinin hiç biri aktif olmayacaktır. Aktif olmayacaktır sözünde anlatmak istediğimiz nokta, uygulamamızın içeriğinin boyutunu belirli sınırlar içerisinde tuttuğumuz için kullanıcılar internet tarayıcılarında herhangi bir boyut değişikliği yaptığında belirli sınırların dışına çıkmadığını görecektir. Uygulama penceresini küçülttüğünde kontrollerin dışarıda kaldığına ya da büyülttüğünde ise arka plan renginin yerine uygulama sınırları dışında beyaz bir ekran olduğunu göreceklerdir.

Şimdi bu sorunu ortadan kaldırabilmemiz için yollar arayalım.
İlk olarak uygulamamızın genişliğini sabit tutarken boyutunu daraltmayı deniyoruz.


Bu değişiklik sonrasında uygulamamızı derlediğimizde aldığmız görüntü aşağıdaki gibi olacaktır.


Dikkat edeceğiniz üzere uygulamamızda hala sınırların dışında beyazlıklar gözükmektedir. Ayrıca internet tarayıcımızın boyutunu değiştirdiğimizde kontrollerimizin yerlerin sabit kaldığına dikkat çekmek isterim.

Bu durumda aklımıza şöyle bir çözüm geliyor. HTML sayfaları hazırlarken mecbur kalmadıkça formumuzun boyutunu belirlemezdik. Kullandığımız bu tekniğin en büyük avantajı da sayfamızın internet tarayıcılar üzerinden hangi tür değişiklik yapılırsa yapılsın görünüm açısından bir bozulma oluşmamasına olanak tanımaktadır. Bizde bu mantıktan yola çıkarak uygulamamızda yer alan boyutlandırma değerlerini siliyoruz.


Uygulamamızı derlediğimizde aldığımız sonuç ise aşağıdaki gibi olmuştur.


İnternet tarayıcımızın boyutunu elimizle küçülttükten sonra,


İstediğimiz sonucu elde etmiş gibi gözüküyoruz. Artık uygulamamızı sunduğumuz kullanıcılar hangi çözünürlüğü kullanırlarsa kullansınlar sorunsuz bir biçimde kullanabileceklerdir. Ayrıca bu özelliğimiz ile TurhalDigi uygulamamıza arama bölümü de eklemiş oluyoruz.

Kısaca bu yazımızda neleri incelediğimize değinmek gerekirse, Web Formları kontrol edebilmemiz için bize sunulmuş olan üç kontrolü yani, Canvas, StackPanel ve Grid kontrollerinin temel özelliklerini inceledikten sonra Grid kontrolünden oluşturmuş olduğumuz dinamik boyut özelliklerini form kontrollerine nasıl taşıyabileceğimize değindik. En son olarak ise internet tarayıcılarının boyutlarında veya ekran çözünürlüklerinden kaynaklanan sorunları ortadan kaldırmak için otomatik boyutlandırma özelliklerini nasıl kullanabileceğimize değinmeye çalıştık.

Umarım yararlı olmuştur.

Yazımızda değinmiş olduğumuz uygulamanın kaynak kodlarına linkten erişebilirsiniz.

Kaynak
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx
Turhal Temizer
turhal.temizer@csharpnedir.com
http://turhal.blogspot.com
Makale:
Silverlight 2.0 - Uygulama Alanının Kontrol Edilmesi Silverlight Turhal Temizer
  • Yazılan Yorumlar
  • Yorum Yaz
MAY
9
2008
Bu yaptığım hata için çok özür diliyorm. Ben kaynaklar linkini ekledim diye hatırlıyordum. Uyarınız için çok teşekkür ediyorum. Link i yazıya ekledim.
MAY
9
2008
Bu yaptığım hata için çok özür diliyorm. Ben kaynaklar linkini ekledim diye hatırlıyordum. Uyarınız için çok teşekkür ediyorum. Link i yazıya ekledim.
MAY
5
2008
Turhal kardeşim ve csharpnedir.com yetkilileri, Eminim bu sitede makaleleri okuyanların bir çoğu başkasına air yabancı dilde bir makaleyi tercüme edebilir. Eğer böyle tercümelere yer verilecekse bunu sitede belirtelim, belki bu tarzda makale çevirmek isteyenler olabilir. Ayrıca lütfen kaynağını da belirtelim ki emek verip uğraşan kişilerin hakkına girmeyelim. Ben bu eksiği tamamlayayım. http:weblogs.asp.netscottgupagessilverlight-tutorial-part-2-using-layout-management.aspx Selamlar,
Sayfalar : 1 
Yorum yazabilmek için üye girişi yapmalısınız. Üye girişi için tıklayın.
Üye değilseniz Üyel Ol linkine tıklayarak üyeliğinizi hemen başlatabilirisniz.
 
  • Bu Konuda Son 10
  • Eklenen Son 10
  • Bu Konuda Geçmiş 10
Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor
Son Eklenen 10 Makale Yükleniyor
Bu Konuda Yazılmış Geçmiş Makaleler Yükleniyor