Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding

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)

AspNet Core 1.0 projesine StaticFile desteği eklemek

Bu makaleyi okumadan önce Asp.Net Kategorisindeki diğer makalelerimi okumanızı tavsiye ederim.

AspNet Core 1.0 projelerinde eğer html, js, css, jpg, png gibi dosyalar kullanacaksanız bu makalede anlatıldığı gibi StaticFile desteğini projenize eklemeniz gerekmektedir.

Eğer StaticFile desteğini projeye eklemezseniz html, js, css, jpg, png gibi uzantılara sahip dosyaları tarayıcılarda görüntüleyemeyeceksiniz.

Hemen örnek proje oluşturacağımız dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidiyoruz ve aşağıdaki kodları çalıştırıyoruz;

yo aspnet // Empty Application seçeneğini seçiyoruz // Projeye aspnetcorestaticfile ismini veriyoruz

cd aspnetcorestaticfile code .</pre>

Visual Studio Code açıldıktan sonra wwwroot dizinine index.html dosyasını ekliyoruz ve içerisine Merhaba Dünya! yazıyoruz.

Command Prompt (Windows) veya Terminal (MacOS, Linux) penceresine dönüp aşağıdaki kodu çalıştırıyoruz;

dnx web

İstediğimiz tarayıcıyı kullanarak http://localhost:5000/index.html adresine gittiğimizde karşımıza hiçbirşey gelmediğini görüyoruz.

Az önce index.html dosyasını oluşturduk, fakat index.html dosyasının içeriğine ulaşamadık. Bunun sebebi AspNet Core 1.0 biz StaticFile desteğini ekleyene kadar wwwroot dizinindeki dosyaları servis etmez.

Hemen project.json dosyasını açıyoruz ve dependencies kısmına aşağıdaki satırı ekliyoruz;

"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"

Command Prompt (Windows) veya Terminal (MacOS, Linux) penceresine dönüp aşağıdaki kodu çalıştırıyoruz;

dnu restore

Böylece StaticFile servis etmek için gerekli paket projemizin olduğu dizine indirilmiş oldu.

Startup.cs dosyasını açıp, Configure() method’unu aşağıdaki şekilde değiştiriyoruz;

public void Configure(IApplicationBuilder app)
{
    app.UseIISPlatformHandler();

    app.UseStaticFiles();
}

Tekrar Command Prompt (Windows) veya Terminal (MacOS, Linux) penceresine dönüp aşağıdaki kodu çalıştırıyoruz;

dnx web


İstediğimiz tarayıcıyı kullanarak *http://localhost:5000/index.html* adresine gittiğimizde, artık Merhaba Dünya! yazısını görebiliriz.

![](/assets/uploads/2016/02/staticfile-5.png)

Eğer **AspNet Core 1.0** uygulamalarımızda *html*, *js*, *css*, *jpg*, *png* gibi dosyaları kullanmak istiyorsak, **StaticFile** desteğini projemize eklememiz gerekiyor.

Global Game Jam 2016

Global Game Jam 2016 etkinliği 29 Ocak 2016 - 31 Ocak 2016 tarihleri arasında İstanbul Bahçeşehir Üniversitesi Oyun Laboratuvarında‘nda gerçekleştirildi.

Ben de konuşmacı , mentor ve juri üyesi sıfatları ile etkinliğe katıldım ve açıkçası çok keyifli zaman geçirdim.

Global Game Jam nedir?

Global Game Jam, IGDA (International Game Developers Association - Uluslararası Oyun Geliştiricileri Derneği) Eğitim Odak Grubu‘nun yönlendirmesiyle ortaya çıkan, tüm dünyada eş zamanlı gerçekleştirilen bir oyun geliştirme etkinliğidir.

GGJ dünyada oyun geliştirilmesi amacıyla birçok öğrenciyi, profesyoneli ve akademisyeni bir araya getiren dünya genelindeki en büyük oyun geliştirme organizasyonudur.

GGJ 2016 etkinliğinde, dünya genelinde 78 ülkede 518 etkinlik alanında 28837 katılımcı ile 5438 oynanabilir oyun yalnızca 48 saat içerisinde geliştirilmiştir. GGJ etkinliğine ev sahipliği yapan etkinlik merkezleri yerel oyun sektörünün gelişmesine katkı sağlarken, katılımcılara çeşitli açılardan faydalar sağlamaktadır.

Windows 10 UWP uygulamasında Page.Resources içinde Style kullanmak

Windows 10 UWP uygulaması yazarken bazen ekranda stil verdiğimiz bir nesnenin stilini aynı tipteki diğer nesnelere de uygulamak isteriz.

Böyle bir durumda içinde bulunduğumuz Page‘in Resources kısmına stillerimizi ortak bir şekilde tanımlamak ve sayfanın içinde aynı tipteki nesnelerde kullanmak iyi bir çözüm yolu olabilir.

Bu makalede örnek olarak, saati gösterecek veya belli bir süreden geri sayım yapabilecek aşağıdaki sayfayı UWP ile tasarlayacağız;

Öncelikle sayfanın kodlarını aşağıdaki hale getirip temizleyelim;

<Page x:Class=”PageResourceStyleOrnek.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:PageResourceStyleOrnek”>

</Page></pre>

Sayfaya önce bir StackPanel nesnesi, StackPanel nesnesinin içerisine bir Grid nesnesi, Grid nesnesinin ColumnDefinitions özelliğine de 5 adet ColumnDefinition ekliyoruz.

Aynı şekilde Grid nesnesinin içerisine her Column‘a birer tane denk gelecek şekilde Border nesneleri ekliyoruz, Border nesnelerinin içerisine TextBlock veya StackPanel içerisinde TextBlock ekliyoruz.

Border nesnelerini kullanmamızın sebebi, TextBlock nesnesi tek başına arkaplan rengine sahip olamaz, eğer Border nesnesinin içerisine koyarsak, Border nesnesine verdiğimiz Background özelliği sayesinde bir arkaplan rengi olabilir.

<StackPanel Margin="10">
    <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="0" />
                <TextBlock Text="0" />
            </StackPanel>
        </Border>
        <Border Grid.Column="1">
            <TextBlock Text=":" />
        </Border>
        <Border Grid.Column="2">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="0" />
                <TextBlock Text="0" />
            </StackPanel>
        </Border>
        <Border Grid.Column="3">
            <TextBlock Text=":" />
        </Border>
        <Border Grid.Column="4">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="0" />
                <TextBlock Text="0" />
            </StackPanel>
        </Border>

    </Grid>
</StackPanel>

Böylece tasarım anında ekranımız aşağıdaki gibi gözükecek;

İstediğimiz ekran tasarımına henüz sahip değiliz, fakat yaklaştık. Sayfada birçok nesnenin aynı şekilde gözükmesini istiyoruz, eğer hepsinde aynı özelliklere aynı değerleri verecek olursak aslında bunu elde edebiliriz. Fakat daha sonra değişiklik yapması zor olur, kodun karmaşıklığı artar, vs.

Sayfadaki Page elementinin içerisine Resources elementi ekler ve içerisine istediğimiz nesnelerin ortak sahip olacağı stilleri yazarsak bu problemlerin önüne geçmiş oluruz;

<Page.Resources>
    <Style TargetType="Border">
        <Setter Property="Background" Value="#e67e22" />
        <Setter Property="Padding" Value="10" />
    </Style>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="20" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Margin" Value="10" />
    </Style>
</Page.Resources>

Öncelikle Page.Resources elementini oluşturuyoruz, sayfadaki tüm Border nesneleri için hangi özelliklere hangi değeri atamak istiyorsak, Style elementi içerisinde Setter elementini kullanarak, Property ve Value değerlerine atamalar yapıyoruz.

Aynı şekilde sayfadaki tüm TextBlock nesneleri için de ortak özelliklere değer atamaları yapıyoruz.

Tüm Border ve TextBlock nesnelerine aynı değerleri tek tek atamak yerine, Page.Resources içerisinde ortak bir şekilde atamış olduk. Artık arkarengi değiştirmek istersek, tek bir yerden değiştirebileceğiz;

<Setter Property="Background" Value="#9b59b6" />


![](/assets/uploads/2016/01/style-3.png)

AspNet Core 1.0 projesine MVC 6 eklemek

Bu makaleyi okumadan önce Asp.Net Core 1.0 ile web uygulama geliştirmeye başlamak makalesini okumanızı tavsiye ederim.

Projeyi oluşturmak istediğimiz dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidiyoruz ve aşağıdaki kodları çalıştırıyoruz;

yo aspnet // Empty Application seçeneğini seçiyoruz // Projeye aspnetcoremvc6 ismini veriyoruz

// Proje oluşturulduktan sonra cd aspnetcoremvc6 code .</pre>

Visual Studio Code açıldıktan sonra project.json dosyasını açıyor ve içindeki dependencies kısmına aşağıdaki satırı ekliyoruz;

"Microsoft.AspNet.Mvc": "6.0.0-rc1-final"

Böylece Empty Application tipindeki AspNet Core uygulamamıza Mvc 6 paketini kullanacağımızı söylemiş olduk. Fakat paket henüz projemizin olduğu dizine indirilmedi. Bunun için Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinde aşağıdaki kodu çalıştırıyoruz;

dnu restore

Artık Startup.cs dosyasını açabilir ve projemizde Mvc kullanmaya başlayabiliriz. Öncelikle ConfigureServices() methodu içerisinde uygulamamıza Mvc‘yi tanıtıyoruz;

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
}

Bu noktada Configure() methodu içerisinde Mvc‘yi kullanabilir, yapılandırabiliriz;

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}"
    );
});

AspNet Core 1.0 üzerinde geliştirdiğimiz projemizde artık MVC 6 yapılandırıldı.

İlk sayfamızı ekrana getirmek için projenin olduğu dizinde Controllers ve Views isminde iki dizin oluşturalım. Bunun için aşağıdaki komutları Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinde çalıştırabiliriz;

mkdir Controllers
mkdir Views

Visual Studio Code editörüne dönerek Controllers dizininde HomeController.cs dosyasını oluşturuyoruz ve içerisine Index() methodunu aşağıdaki gibi yazıyoruz;

using Microsoft.AspNet.Mvc;

namespace aspnetcoremvc6.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Artık Views dizininde Home dizinini oluşturup içerisine Index.cshtml dosyasını koyabiliriz. Index.cshtml dosyasının içerisine aşağıdaki HTML kodlarını yazıyoruz;

<html>
    <head>
        <title>AspNetCore ve Mvc</title>
    </head>
    <body>
        Merhaba Dünya
    </body>
</html>

Böylece Windows, Linux, MacOS üzerinde yayınlanabilecek şekilde AspNet Core 1.0 üzerinde çalışan ve Mvc6 kullanan projemiz hazır hale geldi.

Projeyi çalıştırmak için Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinde aşağıdaki komutu çalıştırıyoruz;

dnx web


![](/assets/uploads/2016/01/aspnetcore-mvc.png)

Engin Polat hakkında

Chief Architect, Microsoft RD, Microsoft MVP

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 458

Creative Commons Lisansı