24/10/2008
Merhaba bu makalede Expression Blend 2’de proje birleşenlerini, projeye obje import etmeyi, proje için sitil yaratmayı genel olarak inceleyeceğiz.
İlk önce yeni bir proje açalım.
Blend’de yeni bir proje açtığımızda alttaki gibi varsayılan bir proje sekmesiyle karşılaşırız. Bu sekme Visual Studio ile geliştirilen projelere aşina iseniz tanıdık gelecektir. “References” altında projenin kullanacağı .dll dosyaları bulunmaktadır. “Window1.xaml” ve onun .cs dosyası üzerinde çalıştığımız dosyadır. “AssemblyInfo.cs” dosyası ile bir işimiz olmayacaktır. “App.xaml” ise global applikasyon dosyamızdır.
App.xaml dosyasına çift tıkladığınızda alttaki gibi bir görüntüyle karşılaşırsınız.App.xaml dosyası design view’da görüntülenemez.
XAML sekmesine tıklayarak App.xaml’in kodlarını görebilirsiniz.
Proje ilk açıldığında App.xaml dosyasının durumu alttadır.
Şimdi projemizde kullanmak üzere, projemize obje eklemeyi inceleyelim. Örnek olarak projemizde kullanacağımız imajlar ‘ı projeye almayı inceleyelim. Diyelim ki projemizde kullanmayı düşündüğümüz iki tane imaj var.
Önce proje dosyasına sağ tıklayıp açılan menüde “Add New Folder” a basıyoruz.
Projemizde kullanacağımız imajlar için klasörümüz hazır.
Yeni açtığımız klasöre imaj eklemek için images klasörüne sağ klik yapıyoruz. Açılan menüde “Add Existing Item” a tıklıyoruz.
Açılan pencereden imajımızı seçiyoruz.
İmaj projemize eklenmiştir. “Add Existing Item” ile bu işlemi yaptığımız için imaj proje klasörüne de fiziksel olarak kopyalanmıştır.
Bir imajı “Link to Existing Item” ile de projeye dahil edebiliriz.
Harici imaj projeye eklenmiştir. Linklenmiş imajın yanında siyah küçük bir ok olduğuna dikkat edin. Bu imajın proje harici başka bir yerden referans alındığını temsil etmektedir. Dolayısıyla imaj proje klasörüne fiziksel olarak kaydedilmemiştir ve bulunduğu yerden silinirse projede imajı kaybeder.
Eğer aynı menüde “Add New Item” ı kullanırsak,
Proje içinde kullanabileceğimiz dahili şablonlara ulaşırız. Bu konuyu daha sonra inceleyeceğiz.
Blend projelerinizde HTML – CSS ilişkisine benzer sitiller oluşturabilirsiniz. Buna hazırlık olarak bir “Styles” isimli bir klasör yaratıyoruz.
Şimdi örnek olarak mavi dikdörtgen bir obje kullanalım.
Bu mavi rengi eğer projenizde başka objelerde de kullanacaksanız sitil olarak kullanmanız yararlı olacaktır. Mavi renkten sitil yaratmak için renk kodunun yanındaki “Convert color to resource” butonuna basıyoruz. (üzerinde sağa sola doğru bakan oklar olan buton)
Sitilimiz için isim belirliyoruz. Sitilin global ya da lokal olmasına karar veriyoruz. Resource dictionary için “New” butonuna basıyoruz.
XAML olarak yeni bir resource dictionary yaratıyoruz.
Yeni dictionarymiz Styles klasöründedir.
Resource tabında yeni dictionarymizin altında mavi sitilimiz kullanıma hazırdır.
Diyelim ki tek renk için değil de bir gradient için sitil yaratmak istiyorsunuz. Gradient brush tabını kullanarak istediğiniz rengi ayarlayın.
Renk paletinin altındaki “Brush” yazan butona tıklayın.
Sitiliniz için isim belirleyin. Biraz önce yaratmış olduğunuz dictionary’yi tekrar kullanabilirsiniz.
Resources tabında görebileceğiniz gibi iki sitilimizde kullanıma hazır.
Şimdi hazırladığımız bir şekli sitil olarak belirleyelim. Bunun için pen tool unu kullanarak bir şekil çiziyoruz.
Deneme için çizilmiş pek bir şeye benzemeyen şeklimiz hazır. Bu şekli çizerken “SiyahGradient” sitilini kullandığıma dikkat edin.
Şekli tamamlayınca Menüde Tools>Make Brush Resource>Make DrawingBrush Resource.. a basıyoruz.
Yine sitlimize isim veriyoruz ve sitili daha önce yarattığımız dictionary’ye bağlıyoruz.
“TuhafSekil” isimli sitilimiz hazır.
Bu sitilin kullanımını görmek için bir daire çizdim.
TuhafSekil isimli sitilimi daireye uygulayınca ortaya çıkan sonuç altadır.
Yaptığımız işlemler sonucunda App.xaml de gerçekleşen değişiklik altadır.
Yarattığımız ResourceDictionary1.xaml kodları alttaki gibidir.
Projenizin Window1.xaml dosyasının code behind C# kodları için Visual Studio’ya ihtiyacınız bulunmaktadır.
Visual Studio ile Expression Blend’le hazırladığınız projeyi açın.
Solution Explorer penceresinin Blend’in Project penceresiyle aynı düzende olduğunu göreceksiniz.
Visual Studio’nuzu kullanarak Blend kodlarınızı düzenleyebilirsiniz.
Bunu yaptığınızda Blend sizi değişiklik konusunda uyaracaktır.
Bu makalede Expression Blend 2’de bir proje oluşturduğunuzda ihtiyacınız olabilecek özellikleri inceledik.
İyi çalışmalar
Teşekkürler.
