11/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. Üçüncü adımda projelerimizde kullandığımız WPF kontrollerinin görsel düzenlemelerini yaptık. Bu makalede değiştirdiğimiz scroll barın butonlarının etkileşimini tetiklemeyi ve kitap verilerimizi yazarlara göre filtrelemeyi inceleyeceğiz. Ve böylece bu makale serisi tamamlanmış olacak.
Başlayalım. Layerlardan [ListBox]’ı seçiyoruz.
O malum breadcrumb yolunu kullanarak üst butonumuzun path’ine ulaşıyoruz. (Bu yolu, serinin 3. makalesinde anlatıyorum)
Üçgen buton path’i seçiliyken, Triggers kutusundaki +Property butonuna tıklıyoruz.
target-element’in yanındaki oka tıklayıp açılan menüden path’i seçiyoruz.
Onun yanındaki, şu anda Delay olan oka tıklayıp açılan menüden “IsMouseOver” ı seçiyoruz. Böylece mouse butonumuzun üstüne geldiğinde bir etkileşim tetikleyeceğiz. Örneğin butonun rengini değiştireceğiz.
Butonun rengini değiştirmek için özelliklerdeki Brushes kutusunu kullanıyoruz.
Butonun gradient turuncusunu değiştiriyoruz.
Diğer butona da aynı işlemleri yapıyoruz. Projeyi F5 ile çalıştırıp butonların üstüne geldiğinizde butonun rengi değişmeli.
Evet etkileşim tetiklemeyi incelediğimize göre şimdi filtrelemeye geçebiliriz. Bunun için önce LayoutRoot’u seçiyoruz.
Tool Box’da “Asset Library” ikonuna tıklıyoruz.
Açılan pencerede ComboBox ‘ı seçiliyoruz. Eğer ComboBox gözükmüyorsa sağ üst köşedeki Show All’u tıklayın.
Tasarımın sağ üst köşesinde sürükleyip bırakarak ComboBox’ımızı oluşturuyoruz. ComboBox’ın boyutlarından ya da yerinden memnun değilseniz dert etmeyin, bunu istediğiniz zaman değiştirebilirsiniz.
Layer düzeni şu şekilde oluşmuştur.
ComboBox seçiliyken Properties sekmesindeki Common Properties kutusunda bulunan ItemSource’un sağındaki küçük kareye tıklıyoruz.
Açılan menüde Data Binding’e tıklıyoruz.
Açılan Create Data Binding penceresinde solda KitapDataSource’a tıklıyoruz.
Sağda @ Yazar : (String)’i seçiyoruz ve Finish’e basıyoruz.
Böylece ComboBox’ımıza yazarları çekmiş olduk.
Şimdi gelelim ComboBox’da seçilen yazara göre ListBox’ın filtrelenmesinin ayarlanmasına. ListBox’ı seçiyoruz.
ListBox Common Properties’deki DataContext’in sağındaki küçük kareye tıklayıp, açılan menüde Data Binding’e tıklıyoruz.
Create Data Binding penceresinde “Element Property” sekmesine tıklıyoruz.
Solda Combox ile ilgili olan seçeneği seçiyoruz. (System.Windows.Controls.ComboBox şeklinde yazıyor olacak)
Sağda açılan seçeneklerden “SelectedItem:(Object)” i seçip Finish’e basıyoruz.
Yine ListBox’ın Common Properties’inde ItemSource’un sağındaki küçük kareye tıklıyoruz.
Açılan menüde yine Data Binding’e tıklıyoruz.
Açılan Create Data Binding penceresinde “Explicit Data Context” sekmesine tıklıyoruz.
Ve burada KITAP (Array) i seçip Finish’e basıyoruz.
F5 e basıp projeye çalıştırdığınızda alttaki gibi gözükmeli.
Ve her şeyi doğru yaptıysanız ComboBox’da başka bir yazar seçerseniz,
O yazarın kitapları listelenmeli.
Böylece “Expression ile WPF Uygulaması” makale serisi burada tamamlanmış oluyor ve bu sayede ilk WPF Uygulamamızı (Windows) geliştirmiş oluyoruz. Hem de hiç kod kullanmadan. Elbette Expression Studio’nun özellikleri bunlarla sınırlı değil. Kontrollere gelen tasarım değiştirebilme özelliği, kolayca eklenebilen etkileşimler ve arkada duran Visual Studio kod desteği ile yapılabilecekleri hayal etmek bile çok zevkli. Expression Blend 2’nin özelliklerini anlatmaya devam edeceğim diğer makalelerde görüşmek üzere. Elbette esas amacımız olan Silverlight’a ulaşmaya çalışıyoruz. Bunun içinde toolarımıza hakim olmalıyız.
İyi çalışmalar
Teşekkürler.
