Expression ile WPF Uygulaması – III- WPF Kontrollerinin Düzenlenmesi (Expression Blend 2)

9/3/2009
WPF uygulaması geliştirdiğimiz bu makale serisinin ilk adımında Expression Design 2 ile tasarım oluşturduk. İkinci adımda Blend 2 ile proje oluşturup, XAML çıktısı olan tasarımımızı bu projeye oturttuk ve ListBox’a XML’den veri çektik. Serinin bu üçüncü adımında projelerimizde kullandığımız WPF kontrollerinin görsel düzenlemelerini inceleyeceğiz.

Başlayalım. En son ListBox’ımıza veri çekmiştik. Şimdi bu ListBox’ı düzenleyelim.

Önce Properties sekmesinden arka plan ve border renklerini iptal ediyorum.

Properties arama kutusuna “scro” yazıp Scroll Bar özelliklerinin gelmesini sağlıyorum. Ve yatay scrollbar ı Hidden yapıyorum.

Şimdi ListBox’ın seçili satırı ile üstüne gelinen satırlarının renk değiştirmesi özelliklerini iptal edelim. ListBox’a sağ klik yapıp açılan menüden “View XAML” ı seçin. Bu işlem ListBox’a ait XAML kodlarını seçmenizi sağlayacak.

XAML görünüş düzenine geçin. Sağdaki ve soldaki paletleri kaldırıp rahatça kodla çalışmak istiyorsanız F4 e basın.

Önce <ListBox xxxxx /> şeklindeki kodunuzu <ListBox xxxx></Listbox> şekline çevirin ve ortasına alttaki eğik, kalın yazılmış kodu ekleyin. Sonuç kodları alttaki gibi olmalıdır.

Sonuç olarak şu andaki ListBox’ın görünümü alttadır.

Evet ListBox’ımızla bir şeyler yaptık ama istediğimiz görünüş tabi ki bu değil. Blend layerlarında tıkladığınız kontrollerin Edit özelliklerinin göründüğü yere “breadcrumb” denir ve çalışma alanının üstüdür. ListBox’ımız seçiliyken breadcrumb da ki ListBox’a tıklıyoruz. Açılan menüde Edit Other Templates>Edit Generated Items (Item Template)>Edit Template tıklıyoruz.

Item Template’in içindeki [StackPanel] layerına tıklıyoruz ve bu layer ı siliyoruz. Böylece tüm ListBox item ları silinmiş oluyor. Biz bunların yerine kendi item larımızı koyacağız.

Expression Design’dan çıktısını aldığımız FRPKitap.XAML’deki Temp layerını olduğu gibi kopyalıyoruz.

Orjinal XAML e geri dönüp bunu ListBox’ın ItemTemplate’nin içine yapıştırıyoruz. Ve her item ı ok tuşlarını kullanarak orijinal tasarımdaki yerine getiriyoruz. (Dikkat: Temp layerını StackPanel’i silmeyi unutup onun içine yerleştirmeyin.)

Tasarımımız ListBox içine koyduğumuza göre sıra geldi her item ın dinamik olarak XML’den verisini çekmeye. Önce başlığı seçiyoruz.

Başlık seçiliyken, Properties tabındaki Common Properties kutusunda bulunan Text seçeneğinin sağındaki küçük kutucuğa basıyoruz.

Açılan menüde Data Binding e tıklıyoruz.

Açılan Create Data Binding penceresinde seçtiğiniz item ın ilgili olduğu düğümü seçip, Finish’e basıyoruz. Başlık için KITAPAD.

Bundan sonra item’ın görsel özelliklerini ayarlıyoruz. Altta textin renginin ayarlanması gösteriliyor.

Fontu ve boyunu ayarlıyoruz.

Böylece başlığı bitirmiş oluyoruz. Diğer tüm text alanlarını da aynı şekilde ayarlıyoruz. Burada dikkat etmeniz gereken alan açıklamalar alanı. Bu alanı büyütüyoruz.

Ve Text ileri özelliklerinde TextWrapping’i “Wrap” olarak ayarlıyoruz. Böylece açıklamalarımız düzgünce görülebilir.

Kitap imajını seçiyoruz.İmaj işlemleride text işlemlerine çok benziyor.

Bu sefer Common Properties’de ki Source’un küçük kutucuğuna basıyoruz.-

Yine Data Binding

Yine doğru düğümü seçiyoruz ve Finish.

Projeyi F5 ile çalıştırırsanız ve her şeyi doğru yaptıysanız sağdaki scroll barı aşağıya indirdikçe başka bir kitabın geliyor olması lazım.

Evet şimdi gelelim WPF’in büyüsüne. WPF’deki kontroller istediğiniz şekle sokulabilmektedir. Biz bu projede scroll bar yerine bizim belirlediğimiz turuncu üçgenlerin çalışmasını istiyoruz. Bunu yağacağız ama genel olarak bilinen yollardan bir buton ve üstüne kod yazarak değil. Biz scroll barı istediğimiz şekle sokacağız. Enfes değil mi? Hadi başlayalım. Layer lardan çift tıklayarak ListBox’ı seçiyorsunuz. Yukarıda, breadcrumb’da ListBox’a tıklıyoruz. Edit Control Parts (Template)>Edit Copy’ye tıklıyoruz.

Gelen kutuda OK’e basıyoruz. İsterseniz isim belirleyebilirsiniz.

ListBox Template itemları layer paletinde dizilmiştir. [ScrollViewer] ı seçiyoruz.

Breadcrumb’da [ScrollViewer]’a tıklıyoruz. Açılan menüden Edit Control Parts (Template)>Edit Copy’ye tıklıyoruz.

OK’e tıklıyoruz.

Bu sefer ScrollViewer’ı içindeyiz. Layer paletinde PART_VerticalScrollBar’a tıklıyoruz.

Breadcrumb’da PART_VerticalScrollBar’a tıklıyoruz. Açılan menüden Edit Control Parts (Template)>Edit Copy’ye tıklıyoruz.

OK’e tıklıyoruz.

Üst RepeatButton’u seçiyoruz.

Breadcrumb’da [RepeatButton]’a tıklıyoruz. Açılan menüden Edit Control Parts (Template)>Edit Copy’ye tıklıyoruz.

OK’e tıklıyoruz.

Evet sonunda butona ulaştık:) Biliyorum biraz uzun oldu ama emin olun değecek. Expression Studio 3’te bunu daha kolay bir hale getireceklerini umuyorum. Chrome layerını seçip siliyoruz. Chrome bildiğimiz standart Scroll oku.

Chrome’un yerine kendi okumuzu yerleştireceğiz. Ben okun path olarak kalması için Design’dan kopyaladım. Bu da çok iyi bir özellik.

Repeat Butonun içine okumuzu yapıştırıyoruz.

Aynı işlemleri alt buton içinde yapıyoruz. Her iki butonun durduğu yerleri ayarlamanız gerekebilir.

Breadcrumb ı kullanarak,

Görünmesini istemediğimiz diğer Scroll Bar birleşenlerine ulaşıp,

özellikleriyle oynayarak onları da ortadan kaldırıyoruz.

Temp’in içinde gelen diğer okları silmeyi unutmayın.

Scroll Barı düzenlenmiş uygulamamız şu şekilde gözükmelidir.

Projeyi çalıştırdığınızda değiştirilmiş scroll barınız gayet güzel çalışıyor olmalıdır.

“Expression ile WPF Uygulaması” makale serisinin bu adımında Expression Blend 2 yardımıyla WPF kontrollerini tasarımımıza uygun hale getirmeyi öğrendik. Bir sonraki makalede verilerimizi yazarlara göre filtrelemeyi ve kontrollere etkileşim tetikleri eklemeyi inceleyeceğiz.

İyi çalışmalar

Teşekkürler.