Framework’ün tamamen yeni bir sunumu olan Windows Presentation Foundation (WPF), windows uygulamaları için yepyeni bir görsel teknolojidir. WPF günümüzde kullandığımız ve oldukça popüler olan HTML ve FLASH gibi görsel teknolojilerden etkilenmiştir. WPF sayesinde günümüz windows uygulamalarında oldukça radikal değişimler gözlenebilecektir.

Öncelikle vektörel çalışma yapılabildiğinden görsel anlamda bize çok rahatlık ve güzel şeyler ortaya çıkarabilmeyi sağlamaktadır. WPF sayesinde web ortamında gördüğümüz Flash nesnelerinin hareketliliğini ve rahatlığını çok kolay bir şekilde windows uygulamalarımızda yapabileceğiz.Sanki bir web uygulaması geliştiriyormuş gibi windows ortamında uygulamalar oluşturabilme olanağı sağlamaktadır ve en önemlisi 3 boyutlu animasyonlar rahatça oluşturabilmekteyiz.

Peki,WPF ‘ten bahsetmişken XAML’ e değinmemek elbette olmaz. XAML ise XML tabanlı .NET objelerinin yaratılması ve tanımlanması için oluşturulan bir dildir. “Zammel” diye okunur. WPF uygulamarında görsel yapılar oluşturmak için XAML kullanırız. Xaml’i istersek elle kodlarız istersekte toollar’ı kullanarak kodları otomatik generate etmesini sağlayabiliriz. Açıkçası XAML’ i elle yazmak pek hoşlanacağınız bir durum olmasada çoğu zaman elle kodlama yapmanız gerekebilmektedir.Fakat intellisense özelliğinin olması işinizi oldukça kolaylaştıracaktır.

Bu nedenle Microsoft, tasarımcılar için Expression Blend geliştirdi. Aslında Expression Blend’in ortaya çıkma amacı Microsoft’un yazılımcılar ile tasarımcıları birbirlerinden bağımsız bir platformda aynı projeyi geliştirmesini sağlamaktı.Yani tasarımcılar Expression Blend ile uygulamanın tasarımını inşa ederken, yazılımcılarda .NET 2008 ile uygulamanın kod tarafını inşa edebilecekler. Peki bu 2 farklı departmanın geliştirdiği uygulama nasıl birleşecek? Tabii ki XAML sayesinde. XAML bu iki platform arasında aracı bir köprü vazifesi görevi görmekte.

Hem Expression Studio hemde .NET’i nasıl aynı anda senkronize bir şekilde kullanabileceğimize bir örnek verelim. Öncelikle bunun için aşağıda adreste Expression Blend’in ücretsiz olan aralık ayı deneme sürümünü indirelim.

http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

Expressin Blend’i indirdikten sonra şimdi .NET 2008 ile yeni bir WPF projesi açıyoruz.

Framework versiyonu olarak 3.5 seçtim ve projemizin adını myWPFApplication olarak belirledim. .NET 2008’ de projemizi açtıktan sonra diğer taraftan Expression Blend açıyoruz, karşımıza gelen pencereden Open Project diyerek az önce oluşturmuş olduğumuz projemizin solution dosyasını gösteriyoruz.

Artık projemiz hem Expression Blend’de hemde .NET 2008’de açık durumda ve senkronize bir şekilde çalışmakta.

.NET tarafına geçelim ve aşağıda gördüğünüz gibi XAML kod ekranında Grid tagleri üstünde bulunan Title="Window1" Height="300" Width="300"> yazmakta.

Biz buradaki Height değerini 331, Width değerinide 569 yapalım. Blend tarafına geçelim ve sol tarafta bulunan toolbox kısmından en altta bulunan “>>” tuşuna tıklayıp açılan kontroller arasından Expander kontrolünü seçip formumuzda oluşturalım.

Expander kontrolümüzü ekledikten sonra File menüsünden Save diyip projemizi kaydedelim. Şimdi .NET e geçelim ve karşımıza aşağıdaki ekranın geldiğini göreceksiniz.

Senkronize dememin sebebide buydu.Yani siz Blend tarafında herhangi bir değişiklik yapıp save yaptığınız ya da .NET tarafında herhangi bir değişiklik yapıp save yaptığınız takdirde otomatikman diğer tarafa geçerken size “Dışarıdaki bir editor tarafından dosyanız değiştirilmiştir.Tekrar yüklemek ister misiniz?” gibisinden bir soru sormakta. Biz “Yes to All” seçeneğini seçiyoruz ve Blend’de eklemiş olduğumuz Expander kontrolünün .NET tarafında da eklendiğini görmüş olacaksınız.

Expander kontrolümüzü oluşturduktan sonra .NET tarafında XAML kodlarına baktığımız takdirde aşağıdaki gibi bir kod dizimi göreceksiniz.

<Window x:Class="myWPFApplication.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="331" Width="569">

<Grid>

</Expander>

</Grid>

</Window>

Görmüş olduğunuz üzere bizim Blend tarafında eklemiş olduğumuz Expander kontrolünü toolbox’tan oluşturduğumuz takdirde otomatikman XAML kodunu generate etmekte.Istersek elle yazabilirdik ve gene aynı Expander kontrolü formumuzda çizilmiş olurdu. İsterseniz şimdi toolbox’tan değilde XAML içinden bir kontrol ekleyelim ve ekledikten sonra kontrolümüzün formumuz üstünde belirdiğini göreceksiniz. Expander kontrolümüzün tagleri arasına bir TextBlock kontrolü ekleyelim. XAML tarafında kod yazmak aslında oldukça rahat çünkü daha öncede bahsettiğim gibi intellisense özelliği bulunduğundan ötürü işiniz oldukça rahat oluyor.

</TextBlock>

</Expander>

Expander tagleri arasına bir TextBlock kontrolü ekledik, Wrap özelliğini açıp içine alt satırlara taşacak uzunlukta birşeyler yazdık. Projemizi çalıştırdığımızda aşağıdaki ekran görüntüsü karşımıza çıkacaktır.

Expander kontrolümüzün aşağıya bakan ok işaretine tıkladığımız takdirde aşağıdaki gibi yazımızın bir anda çıktığını göreceksiniz.

Yalnız bir sorun var, yazımız Expander kontrolümüzün boyutunu aştığı zaman, aşan kısım malesef gözükmeyecektir. Bunu önlemenin yolu ise Expander tagleri arasına ScrollViewer özelliğini eklememiz ve scrollbarın uzunluğunu vermemiz yeterli olacaktır.Artık yazımız taştığı zaman otomatik scrollbar çıkacaktır.

</TextBlock>

</ScrollViewer>

</Expander>

Şu an için Expander kontrolümüz sadece aşağıya doğru açılmamakta. Yazımız istersek sağa,sola ve yukarıda açılabilir tek yapmanız gereken Expander tagini yazarken yukarıda bulunan Header’dan sonra ExpandDirection="Up" (Down,Left,Right) yazarak okun yönünü ve yazıların açılmasını istediğiniz yönü değiştirebilirsiniz.

Evet bu makalemizde hem .NET 2008 ile Blend’i ortak nasıl senkronize bir şekilde kullanacağımızı hem de WPF ile yeni gelen Expander kontrolünü kullanarak basit bir örnek geliştirdik. Umarım sizler için yararlı bir makale olmuştur.

Tekrar bir başka makalede görüşmek dileğiyle ..

Erkan Derviş

ErkanDervis@gmail.com

Http://www.ErkanDervis.com

	Print
WPF & Blend ve Expander Kontrolü	02.03.2008 22:05:00

Kategori : .NET Framework Özet : Framework’ün tamamen yeni bir sunumu olan Windows Presentation Foundation (WPF), windows uygulamaları için yepyeni bir görsel teknolojidir. WPF günümüzde kullandığımız ve oldukça popüler olan HTML ve FLASH gibi görsel teknolojilerden etkilenmiştir. WPF sayesinde günümüz windows uygulamalarında oldukça radikal değişimler gözlenebilecektir.

Framework’ün tamamen yeni bir sunumu olan Windows Presentation Foundation (WPF), windows uygulamaları için yepyeni bir görsel teknolojidir. WPF günümüzde kullandığımız ve oldukça popüler olan HTML ve FLASH gibi görsel teknolojilerden etkilenmiştir. WPF sayesinde günümüz windows uygulamalarında oldukça radikal değişimler gözlenebilecektir. Öncelikle vektörel çalışma yapılabildiğinden görsel anlamda bize çok rahatlık ve güzel şeyler ortaya çıkarabilmeyi sağlamaktadır. WPF sayesinde web ortamında gördüğümüz Flash nesnelerinin hareketliliğini ve rahatlığını çok kolay bir şekilde windows uygulamalarımızda yapabileceğiz.Sanki bir web uygulaması geliştiriyormuş gibi windows ortamında uygulamalar oluşturabilme olanağı sağlamaktadır ve en önemlisi 3 boyutlu animasyonlar rahatça oluşturabilmekteyiz. Peki,WPF ‘ten bahsetmişken XAML’ e değinmemek elbette olmaz. XAML ise XML tabanlı .NET objelerinin yaratılması ve tanımlanması için oluşturulan bir dildir. “Zammel” diye okunur. WPF uygulamarında görsel yapılar oluşturmak için XAML kullanırız. Xaml’i istersek elle kodlarız istersekte toollar’ı kullanarak kodları otomatik generate etmesini sağlayabiliriz. Açıkçası XAML’ i elle yazmak pek hoşlanacağınız bir durum olmasada çoğu zaman elle kodlama yapmanız gerekebilmektedir.Fakat intellisense özelliğinin olması işinizi oldukça kolaylaştıracaktır. Bu nedenle Microsoft, tasarımcılar için Expression Blend geliştirdi. Aslında Expression Blend’in ortaya çıkma amacı Microsoft’un yazılımcılar ile tasarımcıları birbirlerinden bağımsız bir platformda aynı projeyi geliştirmesini sağlamaktı.Yani tasarımcılar Expression Blend ile uygulamanın tasarımını inşa ederken, yazılımcılarda .NET 2008 ile uygulamanın kod tarafını inşa edebilecekler. Peki bu 2 farklı departmanın geliştirdiği uygulama nasıl birleşecek? Tabii ki XAML sayesinde. XAML bu iki platform arasında aracı bir köprü vazifesi görevi görmekte. Hem Expression Studio hemde .NET’i nasıl aynı anda senkronize bir şekilde kullanabileceğimize bir örnek verelim. Öncelikle bunun için aşağıda adreste Expression Blend’in ücretsiz olan aralık ayı deneme sürümünü indirelim. http://www.microsoft.com/expression/products/download.aspx?key=blend2preview Expressin Blend’i indirdikten sonra şimdi .NET 2008 ile yeni bir WPF projesi açıyoruz. Framework versiyonu olarak 3.5 seçtim ve projemizin adını myWPFApplication olarak belirledim. .NET 2008’ de projemizi açtıktan sonra diğer taraftan Expression Blend açıyoruz, karşımıza gelen pencereden Open Project diyerek az önce oluşturmuş olduğumuz projemizin solution dosyasını gösteriyoruz. Artık projemiz hem Expression Blend’de hemde .NET 2008’de açık durumda ve senkronize bir şekilde çalışmakta. .NET tarafına geçelim ve aşağıda gördüğünüz gibi XAML kod ekranında Grid tagleri üstünde bulunan Title="Window1" Height="300" Width="300"> yazmakta. Biz buradaki Height değerini 331, Width değerinide 569 yapalım. Blend tarafına geçelim ve sol tarafta bulunan toolbox kısmından en altta bulunan “>>” tuşuna tıklayıp açılan kontroller arasından Expander kontrolünü seçip formumuzda oluşturalım. Expander kontrolümüzü ekledikten sonra File menüsünden Save diyip projemizi kaydedelim. Şimdi .NET e geçelim ve karşımıza aşağıdaki ekranın geldiğini göreceksiniz. Senkronize dememin sebebide buydu.Yani siz Blend tarafında herhangi bir değişiklik yapıp save yaptığınız ya da .NET tarafında herhangi bir değişiklik yapıp save yaptığınız takdirde otomatikman diğer tarafa geçerken size “Dışarıdaki bir editor tarafından dosyanız değiştirilmiştir.Tekrar yüklemek ister misiniz?” gibisinden bir soru sormakta. Biz “Yes to All” seçeneğini seçiyoruz ve Blend’de eklemiş olduğumuz Expander kontrolünün .NET tarafında da eklendiğini görmüş olacaksınız. Expander kontrolümüzü oluşturduktan sonra .NET tarafında XAML kodlarına baktığımız takdirde aşağıdaki gibi bir kod dizimi göreceksiniz. <Window x:Class="myWPFApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="331" Width="569"> <Grid> <Expander Margin="152,21,171,128" Header="Expander"> </Expander> </Grid> </Window> Görmüş olduğunuz üzere bizim Blend tarafında eklemiş olduğumuz Expander kontrolünü toolbox’tan oluşturduğumuz takdirde otomatikman XAML kodunu generate etmekte.Istersek elle yazabilirdik ve gene aynı Expander kontrolü formumuzda çizilmiş olurdu. İsterseniz şimdi toolbox’tan değilde XAML içinden bir kontrol ekleyelim ve ekledikten sonra kontrolümüzün formumuz üstünde belirdiğini göreceksiniz. Expander kontrolümüzün tagleri arasına bir TextBlock kontrolü ekleyelim. XAML tarafında kod yazmak aslında oldukça rahat çünkü daha öncede bahsettiğim gibi intellisense özelliği bulunduğundan ötürü işiniz oldukça rahat oluyor. <Expander Margin="152,21,171,128" Header="Expander"> <TextBlock TextWrapping="Wrap" > Framework’ün tamamen yeni bir sunumu olan Windows Presentation Foundation (WPF), windows uygulamaları için yepyeni bir görsel teknolojidir. WPF günümüzde kullandığımız ve oldukça popüler olan HTML ve FLASH gibi görsel teknolojilerden etkilenmiştir. WPF sayesinde günümüz windows uygulamalarında oldukça radikal değişimler gözlenebilecektir. </TextBlock> </Expander> Expander tagleri arasına bir TextBlock kontrolü ekledik, Wrap özelliğini açıp içine alt satırlara taşacak uzunlukta birşeyler yazdık. Projemizi çalıştırdığımızda aşağıdaki ekran görüntüsü karşımıza çıkacaktır. Expander kontrolümüzün aşağıya bakan ok işaretine tıkladığımız takdirde aşağıdaki gibi yazımızın bir anda çıktığını göreceksiniz. Yalnız bir sorun var, yazımız Expander kontrolümüzün boyutunu aştığı zaman, aşan kısım malesef gözükmeyecektir. Bunu önlemenin yolu ise Expander tagleri arasına ScrollViewer özelliğini eklememiz ve scrollbarın uzunluğunu vermemiz yeterli olacaktır.Artık yazımız taştığı zaman otomatik scrollbar çıkacaktır. <Expander Margin="152,21,171,128" Header="Expander"> <ScrollViewer Height="60"> <TextBlock TextWrapping="Wrap" > Framework’ün tamamen yeni bir sunumu olan Windows Presentation Foundation (WPF), windows uygulamaları için yepyeni bir görsel teknolojidir. WPF günümüzde kullandığımız ve oldukça popüler olan HTML ve FLASH gibi görsel teknolojilerden etkilenmiştir. WPF sayesinde günümüz windows uygulamalarında oldukça radikal değişimler gözlenebilecektir. </TextBlock> </ScrollViewer> </Expander> Şu an için Expander kontrolümüz sadece aşağıya doğru açılmamakta. Yazımız istersek sağa,sola ve yukarıda açılabilir tek yapmanız gereken Expander tagini yazarken yukarıda bulunan Header’dan sonra ExpandDirection="Up" (Down,Left,Right) yazarak okun yönünü ve yazıların açılmasını istediğiniz yönü değiştirebilirsiniz. Evet bu makalemizde hem .NET 2008 ile Blend’i ortak nasıl senkronize bir şekilde kullanacağımızı hem de WPF ile yeni gelen Expander kontrolünü kullanarak basit bir örnek geliştirdik. Umarım sizler için yararlı bir makale olmuştur. Tekrar bir başka makalede görüşmek dileğiyle .. Erkan Derviş ErkanDervis@gmail.com Http://www.ErkanDervis.com
Yazgelistir.com

WPF & Blend ve Expander Kontrolü