-- C#, Silverlight, WPF, XAML

Silverlight ile ViewModel Dinamik Kontrol Kullanımı

Silverlight ve WPF teknolojilerinde dinamik kontrol(code behind) kullanarak, View Model mantığına uygun geliştirme yapmak mümkündür. Bu işlem tabiki karmaşık bir hal alabilmektedir. Zaten XAML ile arayüzün arka plan kodlardan ayrılma nedeni de bu zorlukları ayrıştırmaktır. Çünkü dinamik kontroller ile yapacağımız bu uygulamada, daha fazla kod ve daha dikkatli bir geliştirme süreci gerekmektedir.

Arayüze dinamik nesneler ekleyeceğim için, belirli bir düzen oluşturma adına XAML katmanında bir Grid oluşturacağım. Bu Grid’i de dinamik oluşturarak kodları daha da karmaşık hale getirmek istemedim.

XAML

    <Grid x:Name="LayoutRoot" Background="White" Height="200" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

Arayüz çalışmamız için bu kadar XAML kodu yeterli olacaktır. Şimdi C# katmanına geçebiliriz.

ViewModel.xaml.cs içerisinde yeni bir class oluşturuyorum. Bu class INotifyPropertyChanged interface’ini implemente edecek.

C#

     public class ViewModelOrnegi : INotifyPropertyChanged
        {
            private string _soyAd;
            public string Soyad
            {
                get { return _soyAd; }
                set { _soyAd = value; NotifyPropertyChanged("Soyad"); }
            } 

            private string _ad;
            public string Ad
            {
                get { return _ad; }
                set { _ad = value; NotifyPropertyChanged("Ad"); }
            }

            private DateTime _dogumTarih;
            public DateTime DogumTarih
            {
                get { return _dogumTarih; }
                set { _dogumTarih = value; NotifyPropertyChanged("DogumTarih"); }
            }

            public event PropertyChangedEventHandler PropertyChanged;

            protected void NotifyPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

Şimdi, dinamik olarak kodları üretmemi sağlayacak olan CreateTextBox() ve CreateTextBlock() isimli metodları oluşturalım.

private TextBox CreateTextBox(Thickness margin, int row, int column)
{
       TextBox tb = new TextBox() { Margin = margin    };
       Grid.SetColumn(tb, column);
       Grid.SetRow(tb, row);

       return tb;
}
private TextBlock CreateTextBlock(Thickness margin, int row, int column)
{
       TextBlock tb = new TextBlock() { Margin = margin };
       Grid.SetColumn(tb, column);
       Grid.SetRow(tb, row);
       return tb;
}

Artık temel anlamda çalışmaya hazırız. Yapıcı metodumun(bende ViewModel()) üzerinde ViewModelOrnegi sınıfının nesnef örneğini oluşturarak çalışmaya başlayabiliriz.

private ViewModelOrnegi vm = new ViewModelOrnegi();

Şimdi de ViewModel() yapıcı metodumun içerisindeki InitializeComponent() metodundan önce veri atamalarını yapalım.

vm.Soyad = "Özhan";
vm.Ad = "Cihan";
vm.DogumTarih = DateTime.Parse("Aralık 1, 2013");

Artık dinamik kontrollerimizi oluşturup bunlara veri bağlamaya geçebiliriz.

Ad bilgisiyle ilgili TextBlock ve TextBox nesnelerini oluşturalım.

            // Ad TextBlock alanını oluşturmak
            var adBlock = CreateTextBlock(new Thickness(3), 0, 0);
            adBlock.Text = "Ad";
            adBlock.Height = 30;
            adBlock.Width = 50;

            // Ad TextBox alanını oluşturmak
            var adAlan = CreateTextBox(new Thickness(3), 0, 1);
            adAlan.Height = 30;
            adAlan.Width = 150;

Bu kontrollerin veri bağlamasını gerçekleştirelim.

            // Ad veri bağlama nesnesini oluşturmak
            Binding adBaglama = new Binding();
            adBaglama.Source = vm;
            adBaglama.Path = new PropertyPath("Ad");
            adBaglama.Mode = BindingMode.TwoWay;
            adAlan.SetBinding(TextBox.TextProperty, adBaglama);

Aynı işlemleri Soyad bilgisi için de yapalım.

            // Soyad TextBlock alanını oluşturmak
            var soyadBlock = CreateTextBlock(new Thickness(2), 1, 0);
            soyadBlock.Text = "Soyad";
            soyadBlock.Height = 50;
            soyadBlock.Width = 100;

            // Soyad TextBox alanını oluşturmak
            var soyadAlan = CreateTextBox(new Thickness(2), 1, 1);
            soyadAlan.Height = 30;
            soyadAlan.Width = 150;

            // Soyad veri bağlama nesnesini oluşturmak
            Binding soyadBaglama = new Binding();
            soyadBaglama.Source = vm;
            soyadBaglama.Path = new PropertyPath("Soyad");
            soyadBaglama.Mode = BindingMode.TwoWay;
        soyadAlan.SetBinding(TextBox.TextProperty, soyadBaglama);

Tüm kontroller ve veri bağlama işlemleri gerçekleşti. Artık nesnelerimizi LayoutRoot Grid’imize ekleyerek projeyi çalıştırabiliriz.

            // Nesneleri LayoutRoot isimli ana Grid'imize eklemek.
            LayoutRoot.Children.Add(adAlan);
            LayoutRoot.Children.Add(soyadAlan);

            LayoutRoot.Children.Add(adBlock);
            LayoutRoot.Children.Add(soyadBlock);

Sonuç

Ekran Alıntısı

Yorumla

Yorum