Pazartesi, Mayıs 26, 2008

Haybeden Gerçek Üstü Aşk

Merhabalar,

Bu aralar bilgisayarda yapmış olduğum bütün işlemler ile birlikte izlediğim bir gösteriden bahsedeceğim. Adı Haybenen Gerçek Üstü Aşk oynayanlar ise Yılmaz Erdoğan ve Demet Akbağ.

İzlediğim en iyi canlı performanslardan biriydi. 2 saat 11 dakika boyunca insanı gülme krizine düşüren ve bağımlılk yapan bir gösteridir.

Bugün farkettim ki, proje geliştirirken art alanda gösteriyi tekrar izlediğimi farkettim. Tekrar sayısı bu arada 10 'un üzerinde...

Haybeden Gerçek Üstü Aşk

Sizlere de beni bu ilginç duruma düşüren harika gösteriyi izleminizi öneririm.

Gösterinin web sayfasına linkten erişebilirsiniz...

Herkese iyi eğlenceler...

Cuma, Mayıs 23, 2008

Bilgilendirme

Merhabalar,

Üniversitemizde ki etkinlere katıldığımda bir çok öğrenci arkadaşımdan ve akademisyenden "neden Bilgi Teknolojileri kulübünü (Biltek) bıraktığım" konusunda soru aldım. Bu soruları genel olarak buradan cevaplayağım.

İlk olarak bırakmamın asıl sebebi kulübe vereceğimi tahattüt ettiğim şeyleri yapmamdan kaynaklanıyordu. İkincisi ise son sınıf olduğum için derslerime ağırlık vermek istedim. İkinci sebebi herkes anlıyor ama birinci sebebi maalesef tam olarak kimse anlamak istemiyor. Ayrıca kulübün yeni başkanına haksızlık yapıyorlar.

Yapmak istediklerimi yaptığıma değinmek gerekirse. Ben ve arkadaşlarım bu kulübü kurmayı düşündüğümüzde Türkiye de adını duyurabilecek, ücretsiz bilişim eğitimleri verebilecek ve üye arkadaşlara iş&staj imkanları sağlayabilecek bir kulüp kurmak için yola çıkmıştık. Bende Türkiye Bilişim Derneği Genç Trabzon temsilcisi olduğum için arkadaşım Ali Hıdımoğlu ile BilTek 'e eş başkan oldum. Benim hareketlerim sebebiyle başkan gibi gözükmeme rağmen aslında kulübün eş başkanıydım. Tamamiyle yardım amaçlı.

  • Hedeflerimizden birincisi üniversitede bilişim ile ilgili eğitimler vermekti. Bu işi 1 yıl boyunca başarı ile yerine getirdik. Neler yaptığımıza gelirsek, Expression ailesi henüz beta sürümlerinde iken Web, Desing ve Blend , Adobe PhotoShop ,Web programlama (PHP, Asp.Net), Windows Vista ve Office Sistem 2007(O aralar Beta1 'di) Visual Studio 2008 (O aralar CTP idi) eğitimleri verildi. Yani amacımız tamami ile yeni teknolojileri çıkmadan öğrenci arkadaşlarımıza anlatarak kalifiye eleman olmalarına olanak sağlamaktı.

Bu amacımızı gerçekleştirmiştik.

  • Hedeflerimizden ikincisi, bu eğitimleri Türkiye çabında ses getirecek düzeye çıkartmaktı. Bu amaçla Student to Business programı dahilinde Bilge Adam şirketinden Yalçın UZUN 'a microsoft tarafından sertifikalandırılacak şekilde Asp.Net ve Ajax eğitimi verdirttik. Eğitim sonucunda 25 arkadaşımız 24 saatlik eğitimleri sonucunda sertifiklarına ulaşmış oldular.
  • Microsoft İşletim sistemleri lansmanının düzenlenmesini organize ettik.
  • Kendi bölümüm olan Bilgisayar ve İstatistik bilimleri bölümünden ve Bilgisayar Müh. bölümünden birer arkadaşımızı MS yaz okuluna gönderdik.
  • Benimde aralarında olduğum 2 kişi yurtdışında staj imkanı elde etti. 5 arkadaşımızda yurtiçinde farklı şirketlerde staj imkanları elde ettiler.

Genel olarak benim hedeflediğim icraatlar yukarıdaki biçimdeydi ve bunlar gerçekleştirildi. Eğer birkez daha başkan olsaydım bunların benzerlerini yapmak isteyecektim. Fakat bir eksikllik var. Hiç eğlence ile ilgili etkinliklere zaman ayırmadım. Bütün zamanımı teknik konular üzerine yoğunlaştırmıştım. Bu da tabii ki yanlış bir noktaydı. Kişilik gereği oluşan bir gerçekti bu.

Ayrıca koltuk sevdası gibi huylarım olmadığı için 1 yıllık sürede hedeflediklerime inanarak başka arkadaşlarımında bu organizasyonları yapabilmesi için kulübü bırakma kararı almıştım.

İşin ilginç tarafı kulübü bırakalı 6 ay geçmesine rağmen hala soruların gelmesiydi.

Umarım neden bıraktığımı anlatabilmişimdir. Tamamen kendi gelişimim ve arkadaşlarımın gelişimi içindi.

Pazartesi, Mayıs 19, 2008

KTU Campus Fest & Teknolojiye 1 hafta ara...

Merhabalar, bu sefer sizlere teknoloji ilr ilgili değilde eğlence ile ilgili bir yazı yazacağım. Bildiğiiniz üzere ben Karadeniz Teknik Üniversitesi Bilgisayar ve İstatistik Bilimleri Bölümü son sınıf öğrencisiyim. Üniversite öğrenciliğim boyunca ise kendimi geliştirmekten üniversite şenliklerine katılmaya iki yıldır fırsat bulamıyordum. En son geçen sene Boğaziçi Üniversitesinde bir şirket ile görüşmek için İstanbul 'a gelmemdi. Bir günlük bir iştir. Geri dönebilirdiniz diyebilirsiniz. Ama benim evim ve ailem İstanbul 'da olduğundan ve eğitimin bahar dönemlerinde aralıksız 4.5 ay Trabzon 'da kalmam gerektiğinden geri dönmek yerine bir hafta ailemle tatil yapmayı tercih etmiştim. Tatil dediğime bakmayın evdeki yatağımda bir hafta uyumaktı. :) Deniz türü tatilede yıllardır gidemiyordum. Çünkü yazları kendimi geliştirmek için daha çok çalışmam gerekiyordu. Tatili 2-3 yıl sonra gerçek anlamda yapacağım.

Bu sene ise herhangi bir işim çıkmadı ve şenliklere katılma fırsatı elde ettim. Oldukça eğlenceli ve adrenalin dolu günler geçiriyorum. Cuma günü üniversitenin rock grupkarı ile başladı şenlikler. Cumartesi günü ise Kıraç sahne aldı. Pazar günü ise Pinhani (pinhani=pinhaani [a 'sının uzatılması gerekiyormuş... ]) grubunu dinledim. Albümlerini ve seslerini çok beğendiğim bir gruptu geldiği iyi oldu doğrusunu söylemek gerekirse...

Pazartesi günü ise Duman grubu sahne alacak. Ben zıplamak ve eğlenmek için tamami ile hazırım. Ama bence en güzel salı günkü konser olacak. Çünkü Sezen Aksu geliyor. Tek kelimeyle "harika" bir konser olacak bence. Daha sonra gelecek olan olan sanatçıların isimlerini vermeyeyim. Çünkü henüz üniversite de duyurulmadı. Tamami ile sürpriz olacak ve diğer gelen sanatçılardan daha şaşalı geçeceğini buradan haber vermek istedim.

Şenliklerin dışında konser alanına birde lunapark kurulmuş. Bende bunlardan yararlanayım dedim. Lunaparkların bir numaralı adrenalin kaynağı kamikaze 'de kurulmuş. Bende onu görünce hemen bineyim dedim. Havada attığım 5 tur sonrasında neye uğradığımı şaşırsamda yine de superdi. Arkadaşım tarafında çekilen kamikaze resmi aşağıdadır. Resimde aletler en tepedeyken içindekilerden biride benim:)

RAncer IMG0018A

Tabii bu kadar eğlence ile boğuşurken teknolojiye, programlamaya ve derslere doğal olarak zaman ayıramıyorum. Bu sebepten ötürüde bütün yaptığım etkinliklere ve diğer herşeye 1 hafta ara veriyorum. Maillere ve telefonlara bakamayacağım. Şimdiden mail atan ve arayan herkese geç cevap vereceğim için özür diliyorum.

Herkesin hayatın böyle küçükte olsa eğlenceler olması dileğiyle,

Bol mutlu günler...

Çarşamba, Mayıs 14, 2008

WPF - Styles

Web programlama ile ilgilenenler CSS ‘in ne kadar yararlı olduğunu bilirler. Bilmeyenler için ise kısa bir bilgilendirme yapalım. Web sayfamızda kullanacak olduğumuz tasarımları, yazı fontlarını, renkleri ve daha birçok özelliği belirleyebildiğimiz dosyalardı. Daha sonrasından ise belirlemiş olduğumuz bu tasarımları gerekli yerlerde kullanarak hem zaman kaybından kurtulurken hem de web sayfamızda ekstra kod yazmaktan kurtuluyorduk.

Bu makalemizde Web uygulamalarından aşina olduğumuz stil işlemlerinin Windows Presentation Foundation ile nasıl yapabileceğimizi incelemeye çalışacağız.

Not: Visual Studio 2008 sp1 beta1 , .Net Framework 3.5 sp1 beta1 ve .Net Framework 3.0 sp2 beta1 12 Mayıs 2008 tarihinde bizlerin kullanımına sunulmuştur. Kullanmak isteyenler www.microsoft.com/download adresinden gerekli linki bularak indirebilirler. Fakat kurulması için sisteminizde kurulu olan beta ürünleri kaldırmanız gerekmektedir. Bu özellikle Silverlight 2,0 beta1 kullanan geliştiricileri ilgilendirmektedir. Beta ürünleri sildiğimizde geliştirme yapıyorsak nasıl devam edeceğiz derseniz ise SP1 beta1 ‘i kurduğunuz zaman silmiş olduğunuz yazılımlar geri yüklenecek ve diğer yazılımlarınızda eksikleri giderilmiş olarak bizlere sunulacaktır.

Stil işlemlerini uygulama üzerinden anlatmaya çalışacağız. Uygulamamızı ise Visual Studio 2008 ürünü ile gerçekleştiriyor olacağız. VS2008 ‘i olmayan geliştiriciler ise isterlerse Expression Blend veya C# Express Edition ile de yapacak olduğumuz uygulamaları yapabilmeleri mümkündür. Bahsettiğimiz herhangi bir ürün ile WPF application projesi oluşturarak stil işlemlerini incelemeye başlayabiliriz.

Stil işlemlerini incelerken uygulayacak olduğumuz senaryoyu özetlemek gerekirse. Ekranımızı kullanabileceğimiz iki sütuna bölerek bu sütunlara listbox ve buton kontrollerini ekleyeceğiz. Bu kontrolleri ve değerlerini ilk olarak bu kontrollere dâhil stil işlemleri ile daha sonrada style sınıfını kullanarak kontrollerimizde nasıl kullanabileceğimizi inceleyeceğiz.

Uygulamamızda kullanacak olduğumuz çalışma alanını iki sütuna bölüyoruz. Daha sonrada Listbox ve üç tane buton ekliyoruz.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
        <ListBoxItem>Deger 1</ListBoxItem>
        <ListBoxItem>Deger 2</ListBoxItem>
        <ListBoxItem>Deger 3</ListBoxItem>
        <ListBoxItem>Deger 4</ListBoxItem>
        <ListBoxItem>Deger 5</ListBoxItem>
    </ListBox>
    <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
        <Button>Ekle</Button>
        <Button>Duzenle</Button>
        <Button>Sil</Button>
    </StackPanel>
</Grid>

Çalışacak olduğumuz alanının tasarımını belirledik. Şimdi ise eklemiş olduğumuz kontrollere en temel yöntemle tasarım ile ilgili özelliklerini aktarmaya başlayalım. Özelliklerimize ekranda nerede olacağına , köşe renklerine, arka plan renklerine ve yazı boyutlarını belirliyoruz. Ayrıca butonlara belirttiğimiz özelliklere ek olarak yazı stili de ekliyoruz. Sizler farklı yazı stilleri eklemek isterseniz XAML kod tarafında işlemlerinizi yapmak yerine form üzerindeki kontrollere ait özelliklerden font-family seçeneğinden bulabilirsiniz.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 1</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 2</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 3</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 4</ListBoxItem>
        <ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 5</ListBoxItem>
    </ListBox>
    <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
        <Button Foreground="DarkBlue" Background="LightSkyBlue"
                    FontSize="15" FontFamily="French Script MT">Ekle</Button>
        <Button Foreground="DarkBlue" Background="LightSkyBlue"
                    FontSize="15" FontFamily="French Script MT">Duzenle</Button>
        <Button Foreground="DarkBlue" Background="LightSkyBlue"
                    FontSize="15" FontFamily="French Script MT">Sil</Button>
    </StackPanel>
</Grid>

Yukarıdaki kullanım biçimini sıkça uygulamalarımızda kullanıyorduk. Bu kullanım biçimini web uygulamalarında CSS kullanmadığımız zamanlarda görünen sayfaya tasarım bilgilerinin yazılması gibi kabul edebiliriz. WPF uygulamalarında ise bizim çalışma alanımızın dışında kalan bölümler stil dosyalarını belirleyeceğimiz bölümler olarak kullanacağız.

Eğer ki Expression Blend(EB) ile tasarım yapıyorsanız şimdi bahsedeceğimiz yönteme hiçte yabancı olmadığınızı fark edeceksiniz. Çünkü EB ile hazırladığınız tasarımlarda arka planda oluşturulmak olan XAML kodlar ekstra kod fazlalığını minimuma indirerek oluşturmaktadır. Bu sebepten ötürüde stil, animasyon gibi işlemlere ait kodları tek tek kontrollere eklemek yerine stil işlemleri stil sınıfına animasyon işlemlerini de Triggers sınıfına ekleyerek kullanmamızı sağlamaktadır.

Bizim hazırlayacak olduğumuz işlemlerin EB ile nasıl yapıldığını anlattıktan sonra şimdi bizde style sınıfını kullanarak tasarım işlemlerimizi miraslanabilir duruma getirebiliriz.

Penceremize ait özellikleri özkaynaklarında (resource) belirterek tekrardan kullanılabilir olmasına olanak tanıyoruz.



<Window.Resources>
    <Style x:Key="lb1" TargetType="ListBoxItem">
        <Setter Property="Margin" Value="0,2,0,3" />
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontSize" Value="18" />
    </Style>
</Window.Resources>

Biraz önce kontrol içerisine eklemiş olduğumuz özelliklerin hepsini özkaynak olarak belirttik. Şimdi ise belirtmiş olduğumuz bu özkaynakları şimdi nasıl kullanacağımıza değinelim.

<ListBoxItem Margin="0,2,0,3" Foreground="Red" FontSize="18">Deger 1</ListBoxItem>

ListBox ‘a ait özellikleri en basit anlamda bu biçimde tanımlarken şu anda Style sınıfını kullanarak x:Key olarak belirlediğimiz attribute ‘e bağlayacağız.

<ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
    <ListBoxItem Style="{StaticResource lb1}">Deger 1</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 2</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 3</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 4</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb1}">Deger 5</ListBoxItem>
</ListBox>

ListBox kontrolünde değerleri tanımlamış olduğumuz ListBoxItem ‘ın özelliklerinde Style sınıfından tanımlanmış olan özelliğine statik olarak değeri bağlıyoruz.

Şimdi ise butonumuza ait özellikleri özkaynak olarak ayarlayalım. Style sınıfını kullanım yöntemine dikkat ettiyseniz standart olarak kontrollerde kullandığımız tasarım bilgilerini Setter sınıfının içerisinde özelliğini ve değerini belirleyerek kullanıyoruz. Setter ‘ın içerisinden tanımlamış olduğumuz özelliklere ilişkin değerler intellisence ile bize sunulmamaktadır. Bizler bu özelliklere ilişkin değerleri normalde kontrolün içerisinde kullanmış olduğumuz özelliklerden yararlanarak belirliyoruz.

Style kullanmadan önceki buton kontrolümüze ilişkin görüntü;

<Button Foreground="DarkBlue" Background="LightSkyBlue"
            FontSize="15" FontFamily="French Script MT">Ekle</Button>

Kullanmış olduğumuz style sınıfı;

<Style x:Key="ekleButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background" Value="LightSkyBlue"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>
    <Style x:Key="duzenleButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background" Value="LightSkyBlue"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>
<Style x:Key="silButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background" Value="LightSkyBlue"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>

Belirmiş olduğumuz stilleri biraz önce ListBox kontrolünden kullandığımız gibi bağlamamız gerekecektir. Yukarıdaki stil dosyalarını kontrol ederken kafanıza ufak bir soru takılabilir. “Stillerde kullanılan bütün özellikler aynı olduğundan tek bir stilin içerisinde kullanıla bilemiyormuydu ? “diyebilirsiniz. Tabii ki de benzerlik olduğu durumlardan tek bir stil sınıfında toparlamak mümkün olacaktır. Fakat daha sonra yapacak olduğumuz değişikliklerden ötürü üç buton içinde ayrı ayrı stil ayarladık.

Buton kontrollerimizde stilleri kullanma şeklimiz;

<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
    <Button Style="{StaticResource ekleButon}">Ekle</Button>
    <Button Style="{StaticResource duzenleButon}">Duzenle</Button>
    <Button Style="{StaticResource silButon}">Sil</Button>
</StackPanel>

Temel olarak stillerimizi oluşturduk ve gerekli olan kontrollerimize bağlamalarını yaptık. Şimdi isterseniz ekran görüntüsünün nasıl gözüktüğüne göz atalım.



Stilleri daha önceden oluşturupta kontrollere bağladığımızda herhangi bir sorun oluşmadan kontrollerimizin gerekli stillerine kavuştuğunu görürüz. Ayrıca dikkatinizi çekmek istediğimiz bir nokta var. Uygulamamızda kullanacak olduğumuz stillere ilişkin özellikleri çalışma penceremizin özkaynaklarına eklemeden önce XAML kod tarafımızın çok karmaşık olduğunu görürüz. Stillere ilişkin bilgileri özkaynak sınıfının içerisine eklediğimizde ise hem XAML kod tarafında oluşan karmaşık görüntüyü ortadan kaldırdı hem de bizleri aynı özellikleri defalarca kez yazmaktan kurtardı.

Şimdi ise düzenle ve sil butonlarımıza ilişkin stil özelliklerinde ufak değişiklikler yapalım. Sil butonunun dikkat çekmesi için yazı renklerini rengini kırmızı, düzenle butonunki ise yeşil olarak belirleyelim.

<Style x:Key="duzenleButon" TargetType="Button">
    ***
    <Setter Property="Foreground" Value="DarkGreen"/>
    ***
</Style>
<Style x:Key="silButon" TargetType="Button">
    ***
    <Setter Property="Foreground" Value="Red"/>
    ***
</Style>

Butonlara ilişkin stil özelliklerinde bu ufak değişiklikleri yaptıktan sonra uygulamamızı tekrardan çalıştırdığımızda değişikliklerin uygulandığını göreceksiniz.

ListBox kontrollerinde kullandığımız bütün kontrollere aynı stil sınıfını bağlamıştık. Şimdi ise hepsi için ayrı ayrı stiller oluşturacağız. Ekleyecek olduğumuz stiller de ana özellikler aynı olmakta birlikte yalnızca yazıların renklerini değiştireceğiz.

<Style x:Key="lb1" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Red" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb2" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Blue" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb3" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Green" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb4" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Yellow" />
    <Setter Property="FontSize" Value="18" />
</Style>
<Style x:Key="lb5" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="0,2,0,3" />
    <Setter Property="Foreground" Value="Cyan" />
    <Setter Property="FontSize" Value="18" />
</Style>

Özelliklerini değişitirdiğimiz listbox stillerini tek tek kontrollerine bağlamamız gerekmektedir. Onu da aşağıdaki gibi yapıyoruz.

<ListBox Width="200" Height="150" Grid.Column="0" VerticalAlignment="Top">
    <ListBoxItem Style="{StaticResource lb1}">Deger 1</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb2}">Deger 2</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb3}">Deger 3</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb4}">Deger 4</ListBoxItem>
    <ListBoxItem Style="{StaticResource lb5}">Deger 5</ListBoxItem>
</ListBox>



Stil işlemlerini yaparken kafamıza şöyle bir soru takılabilir. “Tek bir stil sınıfında tanımlamış olduğumuz özellikleri diğer stil sınıflarına özelliklerini miraslayamaz mıyız?”. Bu sorunu cevabı tabii ki de evet olacaktır. Çünkü dikkat sizlerde dikkat etmişsinizdir ki hem ListBox kontrolü için hem de Buton kontrolü için hazırmış olduğumuz stillerde birbirlerini tekrarlayan özellikler oldukça fazladır. Bizlerde bu tür işlemleri uygulamalarımızda daha az kod yazabilmek için yaptığımızdan dolayı farklı çözüm yolları üretmemiz gerekecektir. Style sınıfının özelliklerini incelediğimizde Baseon özelliği dikkatimizi çekmektedir. Bu özellik başka bir stil sınıfındaki özellikleri kullanıldığı sınıfa miraslayabilmeye olanak tanıyor. Miraslama işlemini ise hazırlamış olduğumuz stilleri kontrollere bağladığımız biçimde kullanacağız.



Stillerde yer alan benzer özellikleri sadece tek bir stil sınıfında kullanarak diğer stil sınıflarına miraslama yani bağlama yapacağız. Bu işlemleri aşağıdaki gibi yapabilmemiz mümkündür.

<Window.Resources>
    <Style x:Key="lb1" TargetType="ListBoxItem">
        <Setter Property="Margin" Value="0,2,0,3" />
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontSize" Value="18" />
    </Style>
    <Style x:Key="lb2" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Blue" />
    </Style>
    <Style x:Key="lb3" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Green" />
    </Style>
    <Style x:Key="lb4" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Yellow" />
    </Style>
    <Style x:Key="lb5" TargetType="ListBoxItem" BasedOn="{StaticResource lb1}">
        <Setter Property="Foreground" Value="Cyan" />
    </Style>
    <Style x:Key="ekleButon" TargetType="Button">
        <Setter Property="Foreground" Value="DarkBlue"/>
        <Setter Property="Background" Value="LightSkyBlue"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="FontFamily" Value="French Script MT"/>
    </Style>
    <Style x:Key="duzenleButon" TargetType="Button" BasedOn="{StaticResource ekleButon}">
        <Setter Property="Foreground" Value="DarkGreen"/>
    </Style>
    <Style x:Key="silButon" TargetType="Button" BasedOn="{StaticResource ekleButon}">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</Window.Resources>

Değişikleri yaptıktan sonra kodlarımızın ne kadar azaldığına görüyoruz. Bu sayede hem çalışma alanımızın boyutu küçüldü hem de bizler tekrardan stilleri düzenlemek istediğimizde çok daha kolay bir biçimde bu işlemi yapabilir duruma geldik.

Yaptığımız değişiklikler sonucunda ekran görüntüsünde ise herhangi bir değişiklik olmamıştır.



Son olarak butonlara iki farklı renkten oluşan arka plan stili ayarlayacağız. Bunu yapabilmemiz için stil sınıfında Background özelliğinin alt özelliklerinden olan LinearGradientBrush yararlanacağız. Ayrıca bir buton üzerinden değişiklik yaptığımız diğer butonlar o butonun özelliklerine bağlı olduğu için değişiklikler otomatik olarak aktarılacaktır. Bu sebepten ötürü yalnızca ekleButon stili üzerinde değişiklik yapıyoruz.

<Style x:Key="ekleButon" TargetType="Button">
    <Setter Property="Foreground" Value="DarkBlue"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="CornflowerBlue"/>
                <GradientStop Offset="1" Color="Bisque"/>
            </LinearGradientBrush>
        </Setter.Value>
    </
Setter>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="French Script MT"/>
</Style>

Yapmış olduğumuz değişiklik sonucunda ekran görüntümüz ise aşağıdaki gibi olmuştur.



Stil işlemleri ile birlikte tasarımlarımızı ekleyebileceğimiz iki yöntem daha bulunmaktadır. Kısaca bu iki yönteme değinmeye çalışalım. Bunlardan birincisi yazımızda da değinmiş olduğumuz window.resource çalışma alanımızın özkaynaklarıdır. Bu sınıf içerisinde style dahil olmak üzere birçok özelliği saklayabilmemiz mümkündür. En sık olarak kullanılan yöntemde yaptığımız tasarımları özkaynak olarak saklamaktır. Çünkü uygulama çalıştırıldığında bu sınıf içerisindeki değerler kullanılmak üzere belleğin bir köşesinde tutulduğundan ötürü animasyon ve tasarım işlemlerinin kullanılması esnasından bu iki işlemden kaynaklanan performans kaybını minimuma indirgeyecektir.

Kullanabileceğimiz bir diğer yöntem ise ControlTemplate ‘dir. Kullanıcı arayüzünde sıklıkla kullanılacak olan kontrolleri stilleri ile birlikte tanımlamamıza olanak tanımaktadır. İşlevi ise UserControllere oldukça fazla benzemektedir. Daha sonraki yazılarımızda ControlTemplate 'e ilişkin özelliklere değinmeye çalışacağız.

Sonuç olarak yazdıklarımızı toparlamak gerekirse, stil işlemlerini neden kullanmamız gerektiğine değinerek yazımıza başlamıştık. Sonrasında en acemi yöntem ile kontrollerimize tasarımsal özellikler ekledik. Bu özellikleri eklediğimizde XAML kod tarafının ne kadar karmaşıklaştığını ve kullanacak olduğumuz kontrol sayısının 3 - 5 değil de 100-200 olduğu durumlarda içinden çıkılamayacak bir durum oluşacağını göz önüne alarak kullanmış olduğumuz tasarım özelliklerini stil sınıfının özelliklerine nasıl kullanacağımıza değindik. En son olarak stil sınıflarında benzer olarak kullanılan özelikleri yalnızca bir kez tanımlayarak diğer stil sınıflarına nasıl miraslayacağımız gördük.

Umarım yararlı olmuştur.

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

Salı, Mayıs 13, 2008

Windows Presentation Foundation Şirin Tasarım

Merhabalar, WPF - Stil, Tema, Kaynak makalesini yazarken canım sıkıldı ve bi kitapta gördüğüm şekli yapmaya çalıştım. Biraz Expression Blend destekli olsa da çok güzel gözüktü ve hemen onu masaüstü arka planım yaptım. Merak edenler olursa diye kodlarını veriyorum. VS veya EB ile rastgele bir uygulama oluşturun ve Grid layout 'unu silerek aşağıdaki kodları ekleyin. Sonuç ekran görüntüsü verdiğim resim kadar güzel olacak. :)

<Image>

<Image.Source>

<DrawingImage>

<DrawingImage.Drawing>

<DrawingGroup>

<!--Vucut-->

<GeometryDrawing Brush="OrangeRed" Geometry="M 240,250

C 200,375 200,250 175,200

C 100,400 100,250 100,200

C 0,350 0,250 30,130

C 75,0 100,0 150,0

C 200,0 250,0 250,150 Z"/>

<!-- Gozler-->

<GeometryDrawing Brush="Black">

<GeometryDrawing.Pen>

<Pen Brush="White" Thickness="10"/>

</GeometryDrawing.Pen>

<GeometryDrawing.Geometry>

<GeometryGroup>

<!-- Sol Goz-->

<EllipseGeometry RadiusX="15" RadiusY="15" Center="95,95"/>

<!-- Sag Goz-->

<EllipseGeometry RadiusX="15" RadiusY="15" Center="170,105"/>

</GeometryGroup>

</GeometryDrawing.Geometry>

</GeometryDrawing>

<!-- Agiz-->

<GeometryDrawing>

<GeometryDrawing.Pen>

<Pen Brush="Black" StartLineCap="Round" EndLineCap="Round" Thickness="10"/>

</GeometryDrawing.Pen>

<GeometryDrawing.Geometry>

<LineGeometry StartPoint="75,160" EndPoint="175,150"/>

</GeometryDrawing.Geometry>

</GeometryDrawing>

</DrawingGroup>

</DrawingImage.Drawing>

</DrawingImage>

</Image.Source>

</Image>

Yapmış oluduğum tasarımın ekran görüntüsü aşağıdadır. Ekran görüntüsünü biraz kırptım. :)

Canim Skildi

Herkese iyi eğlenceler...

WPF - Ink (Cizim) Islemleri

Günümüz teknolojileri göz önüne aldığımızda dokunmatik sistemlerin popülerliğini arttırdığını görürüz. Dokunmatik sistemler ile kullanmış olduğumuz diz üssü bilgisayarlarda telefonlarda ve diğer birçok teknolojik alette dokunmatik sistemleri kullanmaya başladılar. Dokunmatik sistemler kullanılırken yazacağımız yazıları iki şekilde yapabilmemiz mümkün oluyor. Bunlardan birincisi sanal klavye ile ikincisi de dijital kalemler ile istediklerimizi yazabilmemize olanak vardır. Dijital kalem kullanmayan sistemler için sanal klavye bir tercih oluyor. Fakat kabul edersiniz ki insan kalem kullanmayı klavye kullanmaktan daha iyi yapabilmektedir. Bu sebepten ötürüdür ki kullanıcılar parmakları ile ya da dijital kalemler ile yazı ve çizim işlemlerini yapmak istemektedirler. Biz bu yazımızda temel çizim (ink) işlemlerini incelemeye çalışacağız. Yapmış olduğumuz çizim işlemlerini kaydedebileceğiz, temizleyebileceğiz ve kaydettiğimiz çizimleri daha sonra tekrardan uygulamamızda görebileceğiz. Tekrardan görme işlemini kullanırken ise *.ink formatlı dosyaları kullanmaya çalışacağız.

Çizim işlemlerine ait mimari yapı aşağıdaki gibidir.


Resim MSDN 'den alınmıştır. Amacı çizim işlemlerinin hiyerarşisini anlatmaktır.

Çizim işlemlerimizi uygulama üzerinden anlatmak akılda daha kalıcı olacağından ilk işimiz bir WPF application oluşturmak olacaktır. Bizim oluşturacak olduğumuz uygulamanın ismi ise TemelCizim olacaktır. Uygulamamızı oluşturduktan sonra yapacak olduğumuz işlemleri incelemeye başlayabiliriz.

Uygulamamızda ile olarak kullanacak olduğumuz alanı tanımlamamız gerekiyor. Bunu da Grid taglarını içerisine sütun ve satır değerlerimizi girerek yapıyoruz.

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50px" />
</Grid.RowDefinitions>
</Grid>

Kullanacak olduğumuz alanı bu yukarıdaki değerler ile oluşturmuş oluyoruz. Şimdi de çizim işlemlerimizi için gerekli olan işlemleri yapmaya başlayabiliriz. Çizim işlemlerini yaparken InkCanvas sınıfını kullanacağız. InkCanvas sınıfı içerisinde çizim işlemleri ile ilgili birçok özelliği ve üyeyi barındırmaktadır. Yazımızın içerisinden yeri geldikçe InkCanvas sınıfına ait özelliklere değinmeye devam edeceğiz. InkCanvas sınıfı dışında kullanabileceklerimiz;


turuncu çizginin içerisinden yer alanlardır.

InkCanvas sınıfını Grid alanının içerisinde tanımlıyoruz ve aşağıdaki özellikleri atıyoruz.



Tanımlamış olduğumuz sınıfa grid üzeriden bölmüş olduğumuz sütun ve satırlardan değerlerini de tanıyoruz. Temel olarak bu tanımlamaları yaptıktan sonra uygulamamızı derlersek çizim işlemi sorunsuz olarak gerçekleşecektir.



Şimdi ise bu çizmiş olduğumuz bu şekilleri kaydedebilmek ve diğer özelliklerini yapabilmek için gerekli işlemleri incelemeye çalışalım.

İlk olarak XAML kod tarafından üç adet buton ekliyoruz ve özelliklerini aşağıdaki gibi ayarlıyoruz.

<Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Content="Yeni" Click="Yeni_Cizgi"/>
<Button Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Content="Kayıt" Click="Kayit_Cizgi"/>
<Button Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Content="Aç" Click="Ac_Cizgi"/>

Butonları nasıl tanımladığımıza dikkat ederseniz, daha önceden bölmüş olduğumuz satır ve sütun değerlerini kullanarak böldük. Bu sayede formun üzerinden nasıl durduğu ile ilgili bir sorun yaşamamış olacağız.

Not: Kullanacak olduğumuz kontrolleri sütun ve satırların içerisine yerleştirmek istediğimizde Grid.Row veya Grid.Column özelliklerini kullanmamız gerekmektedir. Bu üyelerin değerleri 0 ‘den başlamaktadır. Eğer ki Grid.ColumnSpan yada Grid.RowSpan özelliklerini kullanmak istersek bu özelliklerin değerleri 1 ‘den başlatmamız gerekmektedir.

Butonlarımızı oluşturduk ve gerek özelliklerini belirledik. Şimdi butonun üzerine tıklandığı zaman gerçekleşecek olan işlemleri yapmaya başlayalım. Bunun için formumuzun kod tarafına geçerek işlemlerimizi yapmaya başlıyoruz.

İlk olarak butonlarımızın tıklanması olaylarını oluşturuyoruz. Bunların iki şekli var birincisi otomatik olarak formun üzerinden butona tıklayarak oluşturtmak bir diğeri de kendi elimizle oluşturmaktır. Biz kendi elimizle oluşturacağız. En basit anlamda butona tıklandığı zaman işlem yapabilmesi için nesneyi yönlendirebilmesi ve argümenti olması gerekmektedir.

void Yeni_Cizgi(object sender, RoutedEventArgs e)
{
}

void Kayit_Cizgi(object sender, RoutedEventArgs e)
{
}

void Ac_Cizgi(object sender, RoutedEventArgs e)
{
}

Örnek olarak yukarıdaki biçimde butona tıklanması olayı yaratılabilir. Şimdi ise gerçek yapacağımız işlemlere başlayalım. İlk olarak Yeni butonuna tıklandığı zaman formumuzdaki çalışma alanını temizlemesini sağlayalım. Bu işlemi yaparken XAML kod tarafında kullandığımız InkCanvas sınıfına ait x:name ‘i özelliğine atadığımız değerden yararlanarak düşündüğümüz işlemi gerçekleştireceğiz.


Yeni bir çalışma alanı açma işlemimizi basit olarak yukarıdaki kod bloğu ile gerçekleştirmiş olduk. Sıradaki işlemler ise bu çizdiğimiz görüntünün kaydedilip silinmesi olayı olacaktır. Kaydetme işlemi kullanacağımız için uygulamamıza System.IO isim alanını referans olarak göstermemiz gerekmektedir. Bu işlemimizi yaptıktan sonra kaydetme ve kaydettiğimizi dosyaları çağırma işlemine başlayabiliriz.

Kayıt işlemimizi yaparken ilk yapacak olduğumuz kaydedilecek dosyayı belirlemek olacaktır. Bunun için FileStream sınıfını kullanarak dosyayı ve nasıl kullanılacağını belirtiyoruz.



Kayıt edecek olduğumuz dosyayı seçtikten sonra yapmamız gereken kayıt edeceğimiz dosyanın yoluna FileStream ile belirlemiş olduğumuz kayit üyesini atamamız olacaktır.



Kayıt işlemimizi de bu şekilde tamamlamış oluyoruz. Yapacağımız bir diğer işlem ise kaydettiğimiz dosyaları açmak olacaktır. Kullanabileceğimiz dosya işlemlerin tamamı aşağıda gösterilmiştir.

Çizgilerimizi kaydettiğimiz dosyanın açılmasını sağladık diğer işlemimiz ise açmış olduğumu bu dosyayı çizim alanımıza eklemek olacaktır. Bunu yapabilmemiz için System.Windows.Ink isim alanına ait olan StrokeCollection sınıfını kullanacağız.


Kayıtlı dosyayı açma işlemini de tamamladığımıza göre artık butonlara tıklanması sonucunda yapılacak olan işlemlerimizi tamamlamış oluyoruz. C# kod tarafında hazırlamış olduğumuz kodlara toplu halde göz atalım.

using System;
using System.Windows;
using System.IO;

namespace TemelCizim
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}

void Yeni_Cizgi(object sender, RoutedEventArgs e)
{
CizgiCizme.Strokes.Clear();
}

void Kayit_Cizgi(object sender, RoutedEventArgs e)
{
FileStream kayit = new FileStream("cizim.ink",FileMode.Create);
CizgiCizme.Strokes.Save(kayit);
kayit.Close();
}

void Ac_Cizgi(object sender, RoutedEventArgs e)
{
FileStream dosyaAc = new FileStream("cizim.ink", FileMode.Open);
CizgiCizme.Strokes=new System.Windows.Ink.StrokeCollection(dosyaAc);
dosyaAc.Close();
}
}
}

Yazmış olduğumuz kodları derleyip çalıştırdığımızda sonuç tam istediğimiz gibi olacaktır. Ekrana çizmiş olduğumuz şekilleri kaydet butonuna tıkladığımız zaman cizim.ink dosyasına kaydedecektir. Tekrardan aç dediğimiz zaman ise kaydetmiş olduğumuz şekli bizim çalışma alanımıza ekleyecektir. Ayrıca uygulamamızı açıp kapattıktan sonrada en son kaydettiğimiz çizim dosyası ekran görünecektir.



Flash animasyonun boyutu 510KB olduğundan geç yüklenebilir.

Kayıt ettiğimiz dosyayı aç dediğimiz zaman en yapıp ta kaydettiğimiz çalışma bize geri dönecektir. Peki, cizim.ink dosyası nerede duruyor. Uygulamamızın oluştuğu debug klasörünün altında yer almaktadır. İçeriği göstertmek istediğimizde ise şifrelenmiş olarak saklandığını görürüz.



Yazımıza başlarken yapmak istediklerimiz yeni bir çalışma sayfası başlatabilmek, çalışma sayfasında çizdiğimiz çizimleri ise kaydedip daha sonra başka zamanlarda açabilmeyi hedeflemiştik ve bunları başarılı bir biçimde gerçekleştirdik. Şimdi çalışma alanımıza ekli olan bir resim üzerinden çizim kalemimizle düzenleme yapmaya çalışacağız.

Bunun için uygulamamıza bilgisayarımızın içerisinden herhangi bir resim ekliyoruz ve bu resmi ana çalışma sayfamızda gözükebilmesi için InkCanvas tagları arasına aşağıdaki kod parçasını yazıyoruz.



XAML kod tarafında bu ufak değişikliği yaptıktan sonra uygulamamızı çalıştırıyoruz ve kaydediyoruz. Daha sonra tekrardan uygulamamızı çalıştırıp kayıtlı dosyayı açmasını istediğimizde resim üzerinde yaptığımız çizimler geri gelmiş olacaktır.



Flash animasyonun boyutu 646KB olduğundan geç yüklenebilir.

Uygulamamızda yaptığımız ufak değişiklik sonucunda karşımıza çıkan ekran görüntüsü yukarıdaki gibidir.

Son olarak neler yaptıklarımızı toparlamak gerekirse; ilk olarak çizim yapabilmemiz için Grid alanımızı parçalara böldük. Daha sonra çizim yapabilmemiz için gerekli olan InkCanvas sınıfını nasıl kullanabileceğimize değinmeye çalıştık. Çizim işlemini yaptıktan sonra ise bu yaptığımız şekilleri nasıl kaydedip, kaydettiğimiz dosyaları incelemeye çalıştık.

Umarım yararlı olmuştur.
İyi çalışmalar…

Uygulamanın kaynak kodlarına buradan erişebilirsiniz.

Kaynak
Microsoft Developer Network
Wrox Professional WPF Programming

Pazartesi, Mayıs 12, 2008

WPF - Kendi Kullanıcı Kontrolmüzün (User Control) Oluşturulması

Windows Presentation Foundation ‘ın bizlere kattığı yenilikleri ve maksimum kullanıcı deneyimini günler geçtikçe daha iyi anlamaya başladık. Bu avantajları sağlayan en önemli etmenlerden biride özelleştirilebilir kullanıcı kontrolleri olmuştur. Bizlere sunulan kullanıcı kontrollerini dilediğimiz şekilde kullanarak son kullanıcıların hoşlarına giden uygulamalar hazırlayabiliyoruz. Fakat bazı noktalarda bu kontroller işlerimizi tam anlamıyla göremeyebiliyorlar. Bu durumlarda bizlerin yapması gereken ise kendi kullanıcı kontrollerimizi oluşturmak oluyor.

Kendilerimizin hazırlamış olduğu kullanıcı kontrollerini oluştururken Visual Studio (VS) ve Expression Blend (EB) ‘den yararlanabilmemiz mümkündür. EB ile hazırlamış olduğumuz kullanıcı kontrollerine işlevliğin yanı sıra birçok güzel animasyonda ekleyebilmemiz mümkün oluyor. EB ile tasarımını bitirmiş olduğumuz kontrolleri de rahatlıkla VS üzerinden kullanabilmemiz mümkün oluyordu. Bir diğer seçeneğimiz ise hiç işin tasarım ve animasyon yanlarına girmeden VS ile de sade tasarımlar oluşturabilmemiz mümkün oluyor. İşte biz bu yazımızda kendi kullanıcı kontrollerimizi (UserControl) nasıl oluşturacağımıza değinmeye çalışıyor olacağız. Konumuzu incelerken de örnek üzerinden değinerek daha akılda kalmasına olanak tanınacaktır.

Kendi kullanıcı kontrollerimizi geliştirme gereksinime ihtiyaç duymamız birçok sebepten ötürü doğmuştur. Bunlar kontrollerin yapmak istediğimiz işlemleri yerine getiremememizden tutunda yetersiz gördüğümüz özelliklerine kadar daha birçok düşünce aklımıza gelebilir. Bu durumda yapmamız gereken kendi isteklerimizi karşılayacak olan bir kontrol geliştirmek olacaktır.

Kullanıcı kontrollerimizi geliştirmeye başlarken ilk yapmamız gereken VS ‘den bir WPF uygulaması açmak olacaktır. Daha sonra yapmamız gereken ise oluşturmuş olduğumuz uygulamaya bir kullanıcı kontrolü eklemek olacaktır. İşlemimiz için iki yol vardır. Project-->AddUserControl yolunu takip etmektir.



Diğer yol ise Project-->Add NewItem yolunu takip edip karşımıza çıkan menüden UserControl (WPF) seçeneğini seçerek oluşturabiliriz.



İki farklı UserControl ekleme yolu gördük. Bu iki seçeneğin bir birinden farklı yerlerde olmasının içerik açısından hiçbir farklılığı yoktur. Sadece kolaylık olması açısından UserControl seçeneği ek olarak ayrı bir seçenek olarak sunulmuştur.

UserControl ümüzü yukarıda bahsettiğimiz iki yöntemden biri ile ekleyerek karşımıza gelen XAML dosyayı incelemeye başlayabiliriz. Ben bu uygulama için UserControl e “KontrolTurhal” adını verdim. Sizler istediğiniz ismi verebilirsiniz.



Eklenmiş olan kullanıcı kontrolüne değinelim. Karşımıza çıkan bir XAML dosyanın UserControl olduğunu anlayabilmemizin en kolay yolu ilk tag a bakmamız olacaktır. Burada UserControl yazdığına dikkat ediniz. Bunun anlamı ise yapmış olduğumuz işlemlerin diğer XAML dosyalar ve C# kod tarafında UserControl olarak algılanacağıdır. UserControl dışında Window, Page en çok kullanılan formlardır. User Control ise bu formlarda kullanılacak olan bileşenleri hazırlamamıza olanak tanır. Yukarıdaki resimde eklemiş olduğumuz UserControl ‘ün hangi sınıfa ait olduğunu yani hangi projede kullanılacağını belirtildiği yer ise x:Class bölümüdür. Oraya dikkat ederseniz KullaniciKontrol projesinin içerisine KontrolTurhal UserControl ‘ünün oluşturulduğunu rahatlıkla görebilirsiniz.

Artık kullanıcı kontrolümüzü oluşturmaya başlayabiliriz. Kullanıcı kontrollerini oluştururken dikkat etmemiz gereken en önemli özellik kullanıcıların neleri yapacağını düşünerek hareket etmemiz olacaktır.

Kullanıcı kontrolümüzü oluşturmaya başlarken ilk olarak DockPanel alanına ilişkin özellikleri tanımlıyoruz daha sonrada bir Border element tanımlayıp ona ait özellikleri belirlemeye başlıyoruz. Belirlediğimiz bu özellikler aşağıda görülmektedir.

KontrolTurhal.xaml
<UserControl x:Class="KullaniciKontrol.KontrolTurhal"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel LastChildFill="True">
<Border DockPanel.Dock="Top" CornerRadius="4,4,0,0" Width="Auto"
Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="Beige" BorderBrush="Brown" BorderThickness="1">
<TextBlock x:Name="txt_baslik" Width="Auto" Height="Auto"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></TextBlock>
</Border>
<Border DockPanel.Dock="Top" CornerRadius="0,0,4,4" Width="Auto"
Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
BorderBrush="Brown" BorderThickness="1,0,1,1" MinWidth="100px" MinHeight="100px">
<TextBlock x:Name="txt_icerik" Width="Auto" Height="Auto"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></TextBlock>
</Border>
</DockPanel>
</UserControl>

Belirmiş olduğumuz özelliklerin sonucunda kontrolümüzün aldığı ilk görüntü aşağıdaki gibi olmuştur.

Hazırlamış olduğumuz form kontrolüne dikkat ederseniz başlık ve içerik bölümlerinden oluşmakta ve bu bölümlere TextBlock yardımı ile yazı yazabilmekteyiz. Böyle bir kontrol tasarlamamızın amacı uygulamalarımızda başlık ve içerikten oluşan bu bölüm kullanacağımız zaman tek tek kontrolleri birleştirip oluşturmak yerine daha kullanışlı olması açısından böyle bir uygulama geliştirilmesine karar verilmiştir.

Şimdi içeriklerinin daha dinamik bir biçimde değiştirilebilmesi için C# kod tarafına özellikleri belirtmeye başlıyoruz. Özelliklerimiz başlıktan ve içerikten gelecek olan değerler için olacaktır. Hazırlamış olduğumuz C# kodu aşağıdaki gibidir.

KontrolTurhal.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;

namespace KullaniciKontrol
{

public partial class KontrolTurhal : UserControl
{
public KontrolTurhal()
{
InitializeComponent();
}

public string BaslikTxt
{
get {
return this.txt_baslik.Text;
}
set {
this.txt_baslik.Text = value;
}
}

public string IcerikTxt
{
get {
return this.txt_icerik.Text;
}
set {
this.txt_icerik.Text = value;
}
}
}
}

Yukarıda hazırlamış olduğumuz kod bloğunu kısaca açıklamak gerekirse, başlık ve içeriğe ilişkin özellikleri tanımladık. Ayrıca hazırlamış olduğumuz bu sınıfta dikkat edilecek olan bir nokta kullanılacağı projede kullanılabilecek olduğunun belirtilmiş olmasıdır. Bu bahsettiğimiz duruma namespace ile tanımlanmış bölümde görebilirsiniz. Ayrıca bu belirtme sayesinde XAML dosyamızda hazırladığımız kontrolü rahatlıkla kullanabileceğiz.

UserControl ümüzü bu şekilde ana uygulamamıza çağırmak istersel yapmamız gereken başlıca şey onu uygulamaya eklemek olacaktır. Bunun için ise kullanacağımız yöntem xmlns ile yapılacaktır. xmlns:… üç nokta ile belirttiğimiz yere kontrolü tanımlamımız gerekecektir. Bunun için yapmamız gerekecek User Control Custom ‘ı uccustom olarak belirtmek olacaktır. Sonrasında bizden CLR ‘ı belirtmemizi isteyecektir. Bizde elimizde bulunan isim alanlarını tanımlayarak işlemi bitirmiş olacağız. Dikkat ederseniz biraz önce bahsetmiş olduğumuz sınıftaki nameSpace ‘i kullanmış olacağız.

Not: User Control Custom olarak belirttiğimiz bölümü istediğimiz biçimde tanımlayabilmemiz mümkündür. Benim böyle bir şeyi tercih etmemim sebebi yaptığımız işlemin harici kullanıcı kontrolü hazırlamak olduğundan ötürü akılda daha kalıcı olması açısından öyle belirttim. Sizler xmlns:turhal (isim örnek amaçlıdır) biçiminde yazarak ta kullanabilirsiniz. Bu durumda aşağıda anlatacak olduğumuz işlemleri belirttiğiniz isme göre yapmanız gerekecektir.

,

Artık harici kontrollerimizi uygulamamızın ana ekranında kullanabilir duruma gelmiş durumdayız. Şimdi yapacak olduğumuz diğer kontrolleri kullanırmış gibi uygulamamıza eklememiz olacaktır. Tabii bunu yaparken dikkat etmemiz gereken bir nokta var. hazırladığımız olan kontrol bileşen paletinde değilde uygulamamız içerisinde olduğundan ötürü xmlns ile tanımlamış olduğumuz isme göre işlemlerimiz yapmamız gerekmektedir. Şimdi bunu nasıl yapacağımızı göz atalım.



Kullanıcı sınıfımızı çağırdıktan sonra kod tarafında tanımlamış olduğumuz özellikleride kullanabiliyoruz.



Intellisence sonucunda bizim tanımlamış olduğumuz özellikleri de tanımlıyoruz. Oluşturduğumuz XAML kodu aşağıdadır.

<Window x:Class="KullaniciKontrol.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uccustom="clr-namespace:KullaniciKontrol"
Title="Kullanici Kontrolleri" Width="300" Height="300">
<Grid>
<uccustom:KontrolTurhal Width="200px" Height="150px"
IcerikTxt="Icerigimizi giriyoruz."
BaslikTxt="Basligi giriyoruz.">
</uccustom:KontrolTurhal>
</Grid>
</Window>

Uygulamamızı çalıştırdığımız zaman ekran görüntümüzde aşağıdaki gibidir.



Kontrolümüzün içerikleri istediğimiz şekilde gerçekleşti. Hazırlamış olduğumuz kontrolde başlık ve içerik bir biçimde tanımlamış olduğumuz özellikleri doldurarak oluşturduğumuz tasarımın içerisinde yazdıklarımızı görmüş oluyoruz. Ayrıca özelliklerimizi Properties penceresinden de görebiliyoruz.



Kontrolümüzü kullanma ile ilgili birkaç noktaya değinmeye çalışalım. İçerik ve başlık biçiminde yazılarımızı girebildiğimizden bahsetmiştik. Diğer kontrolleri göz önüne aldığımızda kendi içerik özelliklerinin dışından varsayılan olarak taglar arasında yazılanları kullanıcı kontrolü dâhilinde gösterebilmektedir. Bunların en bariz örneği de <TextBlock> kontrolüdür. Bu kontrolde Text=”deneme” biçiminde içeriğini belirlerken aynı zamanda <TextBlock>deneme</TextBlock> şeklinde de tanımlayabiliyoruz. Fakat bizim hazırlamış olduğumuz kontrolü göz önüne alırsak IcerikTxt=”” özelliğinin içeriğine yazmış olduğumuz yazıyı buradan kaldırıp ta <uccustom:KontrolTurhal>Deneme</uccustom:KontrolTurhal> biçiminde yazdığımızda hazırlamış olduğumuz kontrolü ortadan kaldırarak sadece yazmış olduğumuz deneme yazısı formumuzda gözükecektir. Kontrolümüzde yazdığımız kodları yokmuş gibi varsayacaktır. Ana amacımız bu durumu ortadan kaldırmak olmalıdır. Fakat daha önce bu durumun nasıl gerçekleştiğine dair ekran görüntüsüne göz atalım.



Kodumuzu bu şekilde düzenlediğimizde karşımıza çıkan ekran görüntüsüne göz atalım.



Ekran görüntüsüne dikkat ederseniz biraz önce bahsettiğimiz sorun gerçekleşmiş olacaktır. Bu durumun ortadan kaldırılması için yapacağımız işlemleri incelemeye çalışalım.

Kontrol.Turhal.xaml.cs kod bölümüne tekrar dönelim. Yaptığımız işlem Markup ‘ların dışarında olduğu için Markup isim alanını çağırmamız gerekecektir.



System.Windows.Markup isim alanını sınıfımıza ekledikten sonra bu isim alanına ait olan Attribute (öz nitelik) lerinden ContentPropery ‘i kullanarak Markup kodlamada taglar dışına yazılanları IcerikTxt gibi algılanmasını sağlayacağız. Bu işlemi yaparken ContentProperty özniteliğinin özelliğine IcerikTxt ‘yi atamamız gerekecektir. Ekleyecek olduğunuz öz niteliği kullanıcı kontrolüne ait olan sınıfın hemen üstüne yazmamız gerekmektedir. Yoksa hata verecek ve yaptığımız özelliği varsayılan olarak kullanamadığını bize bildirecektir.



Bu değişiklik sonrasından uygulamamızı tekrardan derlediğimizde içerik özelliği ile karşılaştığımız sorunu halletmiş olacağız.



Şimdi de uygulamamızda başka bir noktaya göz atalım. Hazırlamış olduğumuz kontrollerde varsayılan olarak gelen ve kullanıcı kontrolüne içerik eklememize olanak tanıyan Content özelliği bulunmaktadır. Bu özelliği kullanmak istediğimiz aynı biraz önce karşılaştığımız gibi bir sorun ile karşı karşıya kalırız. Yine boş bir ekranda yalnızda Content özelliğine yazılmış olan yazı bizleri karşılamaktadır.

Bu durumdan kurtulabilmemiz için yapmamız gereken işlem ise, kullanıcı kontrolümüzü tanımladığımız sınıfa tekrardan giderek aşırı yüklenmeye korumalı bir sınıf oluşturmamız gerekmektir.

Oluşturacak olduğumuz sınıf içerik değişikliklerini koruyacağı için onContentChanged üyesini seçerek işlemlerimizi yapabiliriz.



KontrolTurhal.xaml.cs ‘a eklemiş olduğumuz korumalı sınıfa ait kod bloğu aşağıdaki gibidir.

protected override void OnContentChanged(object oldContent, object newContent)
{
if (oldContent!=null)
{
throw new NotSupportedException("Kullanmis oldugunuz kontrole iki adet içerik giremezsiniz.");
}
}

Değişikliklerimizi yapıp Content özelliğine değer girdikten sonra uygulamamızı derlediğimizde biraz önce belirttiğimiz mesaj kullanıcılara hata olarak sunulmaktadır.



Bu hata mesajını verdirterek kullanıcıya aynı görevi yapan iki özelliği kullanmasını da engellemiş oluyoruz. Daha sonra Content özelliğine yazdığımız değerleri kaldırdıktan sonra uygulamamızı derlediğimizde kontrolümüzün sorunsuzca çalıştığını göreceğiz.

Sonuç olarak bu yazımızda nelere değindiğimizi kısaca toparlamak gerekirse, ilk olarak WPF uygulamalarına bir UserControl eklemek istediğimizde bunu nasıl yapacağımıza değindik. Daha sonra Uygulamamıza eklemiş olduğumuz UserControl ‘ün XAML ve C# içeriğini nasıl oluşturabileceğimize inceledikten sonra ana uygulamamızda kontrolümüzü nasıl kullanabileceğimize değindik. Son olarak ise diğer kontroller ile kendi kontrolümüzü karşılaştırarak ne tür eksikleri olduğuna göz attıktan sonra bu eksikleri nasıl düzeltebileceğimize değindik.

Umarım yararlı olmuştur.

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

turhal.temizer@csharpnedir.com

Cuma, Mayıs 02, 2008

Galata Tours Silverlight.net Showcase 'de

Biraz önce silverlight.net topluluğundan güzel bir mail aldım. Fransa 'da yer alan turizm şirketine yaptığım web sayfasının intro sayfası görülebilecekler listesine eklenmiş. Müşterilerimizin beğenisini kazanan bu tasarımın bütün dünyacada görülebilecek olması hem benim açımdan hemde Galata-Tours yöneticileri açısından güzel bir his olacak.

Sitenin gerçek site tam olarak işleme girmedi. Test için yazdığım latince kelimeler bile hala duruyor. :) Ana site Fransızca olacağı için böyle bir süreç geçiyor.

Intro sayfayı merak edenler için linki: www.galata-tours.com

Intro sayfaya ilişkin silverlight.net/showcase 'den bir ekran görüntüsüde altta yer almaktadır.

galata-tours 

Daha boş bir zaman bulduğum zaman ise sitenin içeriğini WPF browser uygulaması (XBAP) ile tekrardan düzenleyeceğim. Ama o zamana kadar ASP.Net ile kalsa da olur. :)

Silverlight 2.0 - Uygulama Alanımızın Kontrol Edilmesi

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.

Bir sonraki Silverlight yazımızda TurhalDigi projemiz için Digg.com adresinden çekecek olduğumuz veriler yardımı ile uygulamamızda yer alan GridView kontrolünü nasıl doldurabileceğimizi incelemeye çalışacağız.

Umarım yararlı olmuştur.

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

Kaynaklar
ScotGu Blog