6/3/2009
Merhaba Expression ile WPF Uygulamasının 2. makalesiyle devam ediyoruz. Bu makalede Expression Blend ile yeni bir WPF projesi oluşturup, Expression Design ile hazırladığımız tasarımı bu projeye aktaracağız ve XML’i kullanarak kontrolümüze veri çekeceğiz.
Başlayalım. Expression Blend 2 yi açın. File>New Project’e basın.
New Project penceresinden “WPF Application (.exe)” yi seçin. Proje isminizi, proje klasörünüzü, kod dilinizi (bu makale dizisinde kod kullanmayacağız) ve framework’u belirleyin.
Projeniz açılınca sağdaki Project tabına basıp, proje isminizin olduğu başlığa sağ klik yapın ve “Add Existing Item” a tıklayın.
Hazırlamış olduğunuz XML’i ve Expression Design’dan çıkan XAML’ınızı sırayla projeye ekleyin.
Yine aynı yere sağ klik yapıp bu sefer “Add New Folder” a basın.
Bu klasöre images adını verin.
images klasörüne sağ tıklayın ve “Add Existing Item” a basın.
Veriler için hazırlamış olduğunuz imajları projenize ekleyin.
Project penceresi şu durumdadır.
Solution satırına sağ tıklayıp projenizden Visual Studio ya da geçiş yapabilirsiniz.
Blend ve Visual Studio aynı proje penceresine sahipler.
Blend’de her zaman F5 e basarak projeyi çalıştırabilir ve sonucu görebilirsiniz.
“Objects and Timeline” kutusunda Window layer ına çift tıklayın.
Window seçiliyken sağ tarafta Properties tabındaki Layout kısmında açılacak pencerenin boyunun ve yüksekliğini ayarlayın.
Proje penceresinde FRPKitap.xaml’ e çift tıklayıp açın.
Blend’de FRPKitap.xaml görüntüsü. Design’de nasıl hazırladıysak öyle gözüküyor.
FRPKitap.xaml da Background layerına sağ klik yapıp onu kopyalayın.
Üst taraftaki tab sistemini kullanarak Blend’le oluşturduğunuz XAML’e geri dönün.
LayoutRoot layerını çift tıklayarak seçin ve art board da boş bir yere tıklayıp CTRL+V yapın.
Sonuç. Altta.
F5 e basarsanız uygulamanızın durumunu görebilirsiniz.
Layer düzeni şu şekilde olmalıdır.
Genel tasarımı tamamladığımıza göre şimdi içeriğimizi oluşturabiliriz. Bunun için Tool Box’dan “Asset Library” ikonuna tıklıyoruz ve açılan pencereden ListBox kontrolünü seçiyoruz. ListBox kontrolü gözükmüyorsa sağ üst köşedeki “Show All” kutucuğunu işaretleyin.
ListBox kontrolünü çalışma alanında sürükleyerek oluşturuyoruz.
Layer düzeni alttaki gibi oluşmuş olmalıdır.
ListBox’ımımz hazır olduğuna göre şimdi onun içine veri çekebiliriz. Tabi önce XML e bağlanmalıyız. Bunun için Project sekmesindeki Data kutusundaki “+XML” e tıklayın.
Açılan pencerede isimi belirleyin ve XML dosyanızı HD’den bulun.
XML tüm düğümleriyle Blend’de gözükmektedir.
KITAP düğümünden tutup ListBox’ın üzerine sürükleyin. Bunu yapınca bir menü açılacak. (Bind “KITAP” to “ListBox”) ı seçin.
Gelen pencereye OK deyin.
Create Data Template penceresine de OK deyin.
XML’imiz ListBox içinde listelenmiştir.
“Expression ile WPF Uygulaması” makale serisinin bu adımında Blend’le proje oluşturup, tasarımı bu projeye oturttuk. XML ile bağlantı kurup, veri çektik. Sonraki adımda WPF kontrollerimizi düzenleyeceğiz.
İyi çalışmalar
Teşekkürler.
