WPF ile MVVM: View (MVVM-3)

November 26, 2010

MVVM konusunda tonla İngilizce makale olmasına rağmen Türkçe içeriğin (her zaman ki gibi) eksik olması ve Türkiye'de bilinirliğini arttırmak amacıyla MVVM hakkında bir makale yazmayı düşünüyordum. .NET Framework teknolojileriyle ilgili yazılım geliştiricilere yönelik çıkması planlanlanan ancak çeşitli sebeplerden dolayı iptal edilen bir dergi için aylar önce yazdığım orijinal makalemi bu amaçla düzenleyerek - ve bir blog postu için uzun olduğu için bölerek - sizlerle paylaşıyorum.

1. WPF ile Model View ViewModel: Giriş
2. WPF ile MVVM: Model
3. WPF ile MVVM: View
4. WPF ile MVVM: ViewModel
5. WPF ile MVVM: Parçaları Birleştirmek
Seriye ait kaynak kodlar: MvvmWithWpfSample.rar (245,34 KB)

View’larımız, görsel öğelerin tanımlandığı, (bir sekme kontrolünün sekmeler arasında geçişi gibi GUI bileşenlerinin doğal bir parçası olan veya bir animasyon gibi yine GUI amaçlı tasarlanmış dinamizm dışında) içinde mümkün olduğunca az interaktivite kodu içeren kullanıcı arabirimi tanımlarıdır. XAML ile pencerelerimizi, kullanıcı kontrollerimizi ve kullanıcının ulaşabileceği tüm GUI’yi tasarlarız.

MVVM’in önemli bir özelliği olarak, UX tasarımcısı ile yazılım geliştiricinin paralel çalışmasına olanak sağladığını söylemiştik. Bunu sağlamak için GUI tasarlanırken XAML’ın code behind’ına kod yazılmaması gerektiği tekrar hatırlatalım. Tasarımcı butonları ve listeyi yerleştirir ancak Button_Click gibi bir olay işleme metod tanımı yapmaz. İleride göreceğimiz üzere bunu geliştirici de yapmaz. Çünkü Button.Click gibi eventler’ı (olay?) işlemek yine View’ın bir parçası olarak gördüğümüz code behind’ı kullanmayı gerektirir. Ancak birinci motivasyonumuz olan GUI’nin kendisi ile etkileşimini ayırmak presibiyle çeliştiğinden dolayı MVVM’de mümkün olduğunca klasik olay işleme metodlarını kullanmayız.

Peki bir butona tıklandığında yapılması gerekenleri nasıl açıklayacağız? Elimiz kolumuz bağlı gibi gözükmesine rağmen yine WPF’in içinde gelen Command altyapısı bu durumda bize yardımcı olur. View tasarımımızı yaparken, veya View ve ViewModel geliştirilmesi bitirildiğinde, butonumuzun üzerinde bulunan Command özelliklerine, tıklandığında çalışacak kodlarımızı içeren ViewModel metodumuzu “Bind” ederiz diğer bir değişle bağlarız. WPF Binding mekanizmalarını yoğun olarak kullanacağımızdan bahsetmiştik, öyle ki GUI’mizde gözükecek ve girilecek verileri bağlamanın yanında GUI bileşenlerinin interaktivitesinde çalışacak kodları da aslında bir çeşit veri bağlama ile tanımlarız.

View’lar konusundaki bilinmesi gereken bir konu da blendability’dir. Microsoft Expression Blend, XAML ile WYSIWYG tadında ve kod düzenleme de yapabildiğiniz GUI tasarlamak için kullanılan bir tasarımcı aracıdır. Blendability ise bu uygulamanın XAML dosyalarını, MVVM uygulamamız çalışmadan, yani tasarım zamanında ne kadar başarılı sunduğunu gösteren bir ölçüdür.  İyi bir blendability’ye sahip bir projede tasarımcılar daha rahat çalışabilir.

Modelimizde bulunan müşterileri aramak için Ekran-1’de görünen basit GUI’yi kullanıyor olacağız.

Demo Kullancı Arayüzü

Senaryomuza göre kullanıcılarımızı isimlerine göre arayıp, bilgilerini listeleyebilmeliyiz. Bu aşamada üretilen SearchView.xaml dosyasına baktığımızda, herhangi bir bağlama veya olay yönetimi veya bir Command ile ilgili bir deklerasyon bulunmaz. Tasarımcı çalışırken, C# kodlarıyla ilgisiz – içinde JavaScript kodu olmayan bir HTML dosyası benzeri – xaml dosyaları hazırlar. Örnek  senaryomuz için SearchWindowView’ını oluşturuyoruz (Kod 1). View’ımız şimdilik bir veri bağlama (binding) içermiyor, ViewModel’imizi oluşturduktan sonra gerekli veri bağlamalarımızı tanımlıyor olacağız.

<Window x:Class="WpfApplication.Views.SearchWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Arama" Height="350" Width="525">
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Müşteri İsmi" Width="86" Height="24" Margin="12,10,0,10" Padding="0,5,0,0"></TextBlock>
            <TextBox Width="217"  Height="24" Margin="10,10,0,10"/>
            <Button Width="100"  Height="24" Margin="10,10,0,10">Listele</Button>
        </StackPanel>
        <StackPanel>
            <ListView>
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="Müşteri No" Width="Auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock VerticalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="Adı" Width="Auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock VerticalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="Soyadı" Width="Auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock VerticalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </StackPanel>
    </StackPanel>
</Window>
Kod 1: SearchWindowView

ViewModel tamamlandıktan sonra, veya ViewModel’imizin nasıl olacağı hakkında bir fikrimiz mevcutsa VM henüz bitirilmeden, binding yani veri bağlama ifadeleri View’a eklenir. View’da yer alan bağlama ifadelerinde, ViewModel’in özelliklerine atıfta bulunulur. View’lar, ViewModel’in üzerindeki özelliklere bağlanabilmek için ellerinde bir nesne örnek referansı barındırmak zorundadirlar. Bunun için ViewModel, View kök element’i üzerinde bulunan ve WPF’de bir çok bileşenin türediği FrameworkElement’ten miras alınan object tipindeki DataContext’e atanır. DataContext, View içindeki tüm element’ler için özelliklerine bağlanabilecekleri bir kök nesne sağlar.

View’larınız genellikle Window, Page veya UserControl’den türeyecektir, ancak bunlarla sınırlı değildir. ViewModel örneğinin referansını atayacağımız, DataContext’i olan herhangi bir FrameworkElement View tanımlamak için kullanılabilir.

View .xaml dosyalarınızı isimlendirirken genellikle sonuna “...View” eki konması geleneği mevcuttur. Kod-1’de listelediğimiz View’a arama yapacağı için ve bir pencere olduğu için “SearchWindowView” adını verdik. View’lar aslında birer XAML dosyası olduğu için WPF/Silverlight ile ilgili kurallar, View’lar için de aynen geçerlidir. Tek unutulmaması gereken mümkün olduğunca code behind kullanımından kaçınılması gerektiğidir.

Pingbacks and trackbacks (4)+

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading