-- Silverlight, WPF, XAML

WPF ve Silverlight ile Dinamik Kontrol Oluşturmak

Silverlight ve WPF mimarisinin ortak dili olan XAML, aslında alt yapısını kullandığı .NET nesnelerinin XML formatındaki halidir. Örneğin XAML ile oluşturacağınız bir buton nesnesi(<Button>) mimari olarak .NET Framework’deki Button nesnesinden farksızdır. Yani .NET sınıf kütüphanesine XML giydirilmiş haline XAML diyoruz.

Bu konuda temel ve ileri seviye örnekler yaparak nasıl olduğunu anlamaya çalışalım.

Uygulamamızda iki adet metod kullanacağız. Bunlar CreateTextBlock() isimli, dışarıdan değer alarak dinamik TextBlock nesnesi oluşturan, diğeriyse CreateTextBox() isimli TextBox oluşturan metodumuz olacak.

C# : CreateTextBlock()

private TextBlock CreateTextBlock(string text, double height, Thickness margin, 
                                  int row, int column)

{

       TextBlock tb = new TextBlock() 
       {
             Text = text,
             Height = height,
             Margin = margin

       };
       Grid.SetColumn(tb, column);
       Grid.SetRow(tb, row);

       return tb;
}

C# : CreateTextBox()

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;
}

Gerekli metodları oluşturduğumuza göre artık form ile ilgili nesneleri oluşturmaya başlayabiliriz. Şimdi, ilk olarak ekranımızda bir Grid’e ihtiyacımız olacak, oluşturalım.

XAML

<Grid Margin="10">
</Grid>

C#

Grid rootGrid = new Grid();
rootGrid.Margin = new Thickness(10.0);

Grid’imize sütunlar tanımlayalım.

XAML

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="100" />
  <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

C#

rootGrid.ColumnDefinitions.Add(
       new ColumnDefinition() 
       { 
             Width = new GridLength(100.0) 
       });

rootGrid.ColumnDefinitions.Add(
       new ColumnDefinition() 
       { 
             Width = new GridLength(1, GridUnitType.Star) 
       });

Grid’imize satırlar tanımlayalım.

XAML

<Grid.RowDefinitions>
   <RowDefinition Height="Auto" />
   <RowDefinition Height="Auto" />
   <RowDefinition Height="Auto" />
   <RowDefinition Height="*" />
</Grid.RowDefinitions>

C#

rootGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
rootGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
rootGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
rootGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });

Ad bilgisini tanımlamak için Grid nesnesine bir TextBlock nesnesi ekliyoruz.

XAML

<TextBlock Text="Ad" Height="19" Margin="0,7,31,4" />

C#

var adLabel = CreateTextBlock("Ad", 19, new Thickness(0, 7, 31, 4), 0, 0);
rootGrid.Children.Add(adLabel);

Ad bilgilendirmesi için kullandığımız TextBlock’ın bir de değer almak için TextBox’a ihtiyacı var. Şimdi yeni bir TextBox ekleyelim.

XAML

<TextBox x:Name="Ad" Margin="3" Grid.Row="0" Grid.Column="1" />

C#

var adAlan = CreateTextBox(new Thickness(3), 0, 1);
rootGrid.Children.Add(adAlan);

Soyad bilgisini almak için gerekli TextBlock tanımlamasını yapalım.

XAML

<TextBlock Text="Soyad" Margin="0,7,6,3" Grid.Row="1" Height="20" />

C#

var soyadLabel = CreateTextBlock("Soyad", 20, new Thickness(0, 7, 6, 3), 1, 0);
rootGrid.Children.Add(soyadLabel);

Soyad bilgisinin değerini alacak TextBox’ının tanımlamasını yapalım.

XAML

<TextBox x:Name="Soyad" Margin="3" Grid.Row="1" Grid.Column="1" />

C#

var soyadAlan = CreateTextBox(new Thickness(3), 1, 1);
rootGrid.Children.Add(soyadAlan);

Kullanıcıdan doğum tarihi bilgisi almak için gerekli TextBlock’ı tanımlayalım.

XAML

<TextBlock Text="Doğum Tarih" Grid.Row="2" Margin="0,9,0,0" Height="21" />

C#

var dotLabel = CreateTextBlock("Doğum Tarih", 21, new Thickness(0, 9, 0, 0), 2, 0);
rootGrid.Children.Add(dotLabel);

Şimdiyse, kullanıcının tarih seçimi yapabilmesi için gerekli DatePicker nesnesini oluşturalım.

XAML

<DatePicker x:Name="DogumTarih" Margin="3" Grid.Row="2" Grid.Column="1" />

C#

DatePicker picker = new DatePicker();
picker.Margin = new Thickness(3);
Grid.SetRow(picker, 2);
Grid.SetColumn(picker, 1);
rootGrid.Children.Add(picker);

Bu aşamaya kadar genel kontrollerin bir çoğunu oluşturduk. Şuan formumuzda tek eksik bir Button nesnesi. Ekleyelim..

XAML

<Button x:Name="Kaydet"
        Grid.Row="3"
        Grid.Column="3"
        HorizontalAlignment="Right"
        VerticalAlignment="Top"
        Margin="3"
        Width="80"
        Height="25"
        Content="Kaydet" />

C#

Button button = new Button();
       button.HorizontalAlignment = HorizontalAlignment.Right;
       button.VerticalAlignment = VerticalAlignment.Top;
       button.Margin = new Thickness(3);
       button.Width = 80;
       button.Height = 25;
       button.Content = "Kaydet";
       Grid.SetRow(button, 3);
       Grid.SetColumn(button, 1);
       rootGrid.Children.Add(button);

Kontrollerimiz başarıyla oluşturuldu. Artık rootGrid isimli Grid nesnemizi LayoutRoot isimli ana Grid’imize ekleyebiliriz.

C#

LayoutRoot.Children.Add(rootGrid);

Yorumla

Yorum