Bu makaleyi okumadan önce Windows 10 UWP uygulamasında Page.Resources içinde Style kullanmak makalesini okumanızı tavsiye ederim.

En son geliştirdiğimiz hali ile ekranımız aşağıdaki şekilde gözüküyor olmalı;

Databinding yapabilmek için öncelikle MainPage.xaml.cs dosyasını açıp, binding yapacağımız property‘leri ve varsa varsayılan değerlerini tanımlıyoruz.

Bu örnekte saat, dakika ve saniyenin her hanesini ayrı gösterebilmek için Hour1, Hour2, Minute1, Minute2, Second1 ve Second2 property’lerini aşağıdaki gibi tanımladım;

public string Hour1 { get; set; } = “0”;

public string Hour2 { get; set; } = “0”;

public string Minute1 { get; set; } = “0”;

public string Minute2 { get; set; } = “0”;

public string Second1 { get; set; } = “0”;

public string Second2 { get; set; } = “0”;</pre>

Artık ekrandaki Textblock nesnelerini güncelleyebiliriz, RefreshDisplay() methodunu tanımlayıp, içerisinde yukarıda tanımladığımız property‘lere değer ataması yapıyoruz;

private void RefreshDisplays()
{
    var now = DateTime.Now;

    var hour = now.Hour.ToString("00");
    var minute = now.Minute.ToString("00");
    var second = now.Second.ToString("00");

    Hour1 = hour.Substring(0, 1);
    Hour2 = hour.Substring(1, 1);

    Minute1 = minute.Substring(0, 1);
    Minute2 = minute.Substring(1, 1);

    Second1 = second.Substring(0, 1);
    Second2 = second.Substring(1, 1);
}

Sayfa açıldığında RefreshDisplays() methodunu çağırabilmek için sayfanın açıldığı anı bilmemiz ve tam orada RefreshDisplays() methodunu çağırmamız lazım.

Windows 10 UWP uygulamalarında bir sayfanın açıldığı anı Page sınıfında tanımlı olan OnNavigatedTo() methodunda yakalayabiliyoruz.

MainPage sınıfımızın base class‘ı olan Page sınıfında tanımlı olan OnNavigatedTo() methodunda kod çalıştırabilmek için OnNavigatedTo methodunu override etmemiz lazım;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    RefreshDisplays();
}

override ettiğimiz OnNavigatedTo() methodunun içerisinde RefreshDisplays() methodunu çağırıyoruz.

Databinding için code-behind tarafında yapmamız gereken tüm hazırlıkları yaptık, şimdi MainPage.xaml dosyasını açarak binding kodlarını tamamlayalım.

MainPage.xaml dosyasında yeralan nesnelerden binding yapmak istediklerimizin, binding yapmak istediğimiz property‘lerine değer olarak {x:Bind} ataması yapmalıyız.

Bu örnekte, Textblock nesnelerinin Text property‘lerine binding yapmak istiyoruz, MainPage.xaml dosyasındaki Grid elementini aşağıdaki kodlara dönüştürüyoruz;

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

    <Border Grid.Column="0">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{x:Bind Hour1}" />
            <TextBlock Text="{x:Bind Hour2}" />
        </StackPanel>
    </Border>
    <Border Grid.Column="1">
        <TextBlock Text=":" />
    </Border>
    <Border Grid.Column="2">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{x:Bind Minute1}" />
            <TextBlock Text="{x:Bind Minute2}" />
        </StackPanel>
    </Border>
    <Border Grid.Column="3">
        <TextBlock Text=":" />
    </Border>
    <Border Grid.Column="4">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{x:Bind Second1}" />
            <TextBlock Text="{x:Bind Second2}" />
        </StackPanel>
    </Border>

</Grid>


*MainPage.xaml* dosyasında sayfamızın **ön izlemesi** aşağıdaki gibi gözükmeli;

![](/assets/uploads/2016/02/databinding-2.png)

Eğer uygulamayı çalıştıracak olursak **zaman** bilgisi aşağıdaki şekilde ekranda gözüküyor olmalı;

![](/assets/uploads/2016/02/databinding-3.png)