Merhaba. Bu makalemde Windows Phone’ un en önemli yapı taşlarından birisi olan canlı kutucukları anlatacağım. Ve canlı kutucukları(Live Tiles) uygulamamızda kullanmayı anlatacağım. Teknik detaylara girmeden önce biraz Windows Phone’ un tasarım anlayışından bahsetmek istiyorum. Windows Phone’ da uygulamaların yerleştiği 2 adet ekran bulunuyor. 1. Ekranda sürekli hareket eden, hareket ettikçe içerisinde o uygulamaya ait olduğu bilgilerin geldiği ve tek tıklamayla her an erişilebilecek kutucuklar var. 2. ekranda ise liste halinde, alfabetik olarak listelenmiş tüm uygulamalar mevcut. 1. Ekrana tekrar döndüğümüzde ise 1. ekrandaki kutucukların boyutları küçük, orta ve büyük seçenekleriyle oluşturulabiliyor(Windows Phone 7′ de sadece orta ve büyük). Ve bu canlı kutucuklarla amaçlanan şey bizim tek bir ekrandan birden çok bilgiyi görebilmemizi sağlamak aynı zamanda uygulamaları açmadan bu bilgilere erişebilmemizi sağlamaktır.

Ana ekrandaki Tile’ ın özelliklerini sıralayacak olursam;

Title : Tile’ ın ön yüzündeki başlık özelliği.
BackgroundImage : Tile’ ın ön yüzünde gösterilecek resim.
Count : Tile’ın sağ üst köşesinde göstereceğimiz sayı.
BackTitle : Tile arka yüzünü döndüğünde gösterilecek başlık.
BackContent : Tile arka yüzünü dödüğünde gösterilecek açıklama.
BackBackgroundImage : Tile’ ın arka yüzünü döndüğünde gösterilecek resim.

Uygulamamızla oluşturabileceğimiz 2 adet Tile çeşidimiz vardır. Birincisi kullanıcının kendisinin ana ekrana pin’lediği Tile, ikincisi ise bizim uygulamadan ana ekrana oluşturduğumuz Secondary Tile’ dır. Bu ikisini de uygulamamız içerisinde göstereceğimiz için 2 adet butonumuz var. Üçüncü buton ise Secondary Tile’ı silmeye yarıyor.

Hemen kendi uygulamamızda nasıl Live Tile kullanırız onu göstermek istiyorum. Yeni bir proje açın ve aşağıda vereceğim xaml kodunu MainPage.xaml’deki ContentPanel içerisine yazın.

<TextBox x:Name=”basliktxt” HorizontalAlignment=”Right” Height=”72″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”297″ Margin=”159,0,0,0″/>
<TextBlock HorizontalAlignment=”Left” TextWrapping=”Wrap” Text=”Başlık” VerticalAlignment=”Top” Margin=”26,23,0,0″/>
<TextBox x:Name=”sayitxt” HorizontalAlignment=”Right” Height=”72″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”297″ Margin=”159,54,0,0″/>
<TextBlock HorizontalAlignment=”Left” TextWrapping=”Wrap” Text=”Sayı” VerticalAlignment=”Top” Margin=”26,77,0,0″/>
<TextBox x:Name=”abasliktxt” HorizontalAlignment=”Right” Height=”72″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”297″ Margin=”159,107,0,0″/>
<TextBlock HorizontalAlignment=”Left” TextWrapping=”Wrap” Text=”Arka Başlık” VerticalAlignment=”Top” Margin=”26,130,0,0″/>
<TextBox x:Name=”aciklamatxt” HorizontalAlignment=”Right” Height=”72″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”297″ Margin=”159,160,0,0″/>
<TextBlock HorizontalAlignment=”Left” TextWrapping=”Wrap” Text=”ArkaAçıklama” VerticalAlignment=”Top” Margin=”26,183,0,0″/>
<Button Content=”2. Tile Oluştur” HorizontalAlignment=”Left” VerticalAlignment=”Top” Margin=”232,525,0,0″ Width=”214″/>
<Button Content=”1. Tile Güncelle” HorizontalAlignment=”Left” VerticalAlignment=”Top” Margin=”10,525,0,0″ Width=”241″/>
<Button Content=”2. Tile Sil” HorizontalAlignment=”Left” VerticalAlignment=”Top” Margin=”130,453,0,0″ Width=”214″ />

Yukarıdaki kodlar uygulamamızın tasarımını oluşturuyor. Textblock nesneleri yanında bulunduğu nesneye hangi verilerin girilmesi gerektiğini kullanıcıya bildiriyor. TextBox nesneleriyle kullanıcıdan Tile'lar ile ilgili bilgileri topluyoruz. Button'larla ise işlemi gerçekleştiriyoruz.

Sonraki adım olarak Solution Explorer’ dan projemiz Add -> New Item ile Windows Phone Portrait Page’ i seçin ve adını Sayfa2.xaml yaparak projeye ekleyin. Ve Sayfa2.xaml’ e gidip sayfanın başlığını Sayfa2 olarak değiştirin. Bunu 2. Tile’ a tıklanınca 2. Sayfaya gidip gitmediğini anlamak için yapıyoruz.

Bunları yaptıktan sonra Solution Explorer penceresindeki projemize sağ tıklayarak Add Existing Item seçeneğine tıklayarak Tile’ da kullanacağımız 2 adet resim belirleyelim ve projemize ekleyelim. Benim projemdeki resimlerin ismi “on.png” ve “arka.png”. Sonra ise Solution Explorer’daki MainPage.xaml.cs çift tıklayalım ve kod tarafına geçelim. Hemen namespace’ in üstündeki class’ların içine aşağıdaki class’ı ekleyelim.

using Microsoft.Phone.Shell;

Shell sınıfı, Tile’ ı kullanmamızı sağlayan bir sınıftır. Bu işlemden sonra kullanıcı tarafından pinlenmiş Tile'ı güncellemek için önce 1.Tile Güncelle butonuna çift tıklayalım ve kod tarafına geçelim. 

private void Button_Click_1(object sender, RoutedEventArgs e)
{
//Aktif kutucukların ilkini belirliyoruz
ShellTile AktifTile = ShellTile.ActiveTiles.First();
if (AktifTile!=null) //Kullanıcının Tile pinlediyse içerisindeki kodlar devreye girecek
{
StandardTileData KUTU = new StandardTileData(); //Yeni bir birincil Tile sınıfı oluşturuyoruz
//Özelliklerini atıyoruz
KUTU.Title = basliktxt.Text; //Kutucuğun ön yüzündeki başlık
KUTU.BackgroundImage = new Uri(“on.png”,UriKind.Relative); //Kutucuğun ön yüzündeki resim
KUTU.Count = Convert.ToInt32(sayitxt.Text); //Kutucuğun sol üstünde yer alan rakam
KUTU.BackTitle = abasliktxt.Text; //Kutucuk arkasını döndüğünde gösterilecek başlık
KUTU.BackContent = aciklamatxt.Text; //Kutucuğun arkasını döndüğünde gösterilecek yazı
KUTU.BackBackgroundImage = new Uri(“arka.png”,UriKind.Relative); //Kutucuk arkasını döndüğünde gösterilecek resim

AktifTile.Update(KUTU); //Güncellemeyi başlatalım.
}
}

Diğer butonlara yaptıracağımız işlemler bu kodlara çok benzer olacağından tekrar açıklama satırları koymayacağım. Burada olanları kısaca özetlersem, kullanıcı Tile pinlediyse, TextBoxlardaki girilen değerler oluşturulan Tile'ı güncelliyor. Bu kod hazırda bulunan Tile'ı güncellemek içindi. Şimdi yazacağımız kod ise baştan bir Tile oluşturturmak olacak. Hemen 2. Tile Oluştur butonuna çift tıklayalım ve kod tarafına geçelim.

//Aktif kutucukların ilkini belirliyoruz

StandardTileData YENIKUTU = new StandardTileData(); //Yeni bir birincil Tile sınıfı oluşturuyoruz
//Özelliklerini atıyoruz
YENIKUTU.Title = basliktxt.Text;
YENIKUTU.BackgroundImage = new Uri(“on.png”, UriKind.Relative);
YENIKUTU.Count = Convert.ToInt32(sayitxt.Text);
YENIKUTU.BackTitle = abasliktxt.Text;
YENIKUTU.BackContent = aciklamatxt.Text;
YENIKUTU.BackBackgroundImage = new Uri(“arka.png”, UriKind.Relative);
ShellTile.Create(new Uri(“/Sayfa2.xaml?veri=tile2″,UriKind.Relative),YENIKUTU); //Tile tıklanınca gidilecek adres ve veri2=”tile2″ ile Tile’ı etiketleyip istediğimiz zaman üzerinde işlem yapabiliyoruz.

Burada kullanıcının oluşturduğu Tile ile işimiz olmadığı için Tile'ın varlığını kontrol etmemize gerek yok. Önceki koddan tek farkı ShellTile.Create ile başlayan kod satırı oldu. Bu kod Tile'ımızı oluşturmakla birlikte, Tile'ımıza dokunulduğunda uygulama içerisindeki hangi sayfaya gidileceğini belirtiyor. Kodun içerisideki ?veri=tile2 ise ifadesi ise Tile ile sayfaya herhangi bir string ifadeyi göndermek için yazılmış. Burada tile2 string'i gönderiliyor.

Eğer Windows Phone'da sayfalar arası veri transferleri hakkında bilgi sahibi değilseniz, buradan ilgili makaleye ulaşıp konu hakkında detaylı bilgi edinebilirsiniz.

Oluşturduğunuz Tile'ı silmek isteyebilirsiniz. Bunun için öncelikle 2.Tile'ı Sil butonuna çift tıklayalım ve tekrar kod sayfasına gelelim. Artık Tile'ı silmek için kodlarımızı yazabiliriz.

private void Button_Click_3(object sender, RoutedEventArgs e)
{
ShellTile STile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains(“veri=tile2″));
STile.Delete();
}

Daha önce Tile'ı oluştururken NavigationString değerini vermiştik. Bu değeri STile nesnesinde aratarak NavigationUri'ı "veri=tile2" değerine eşit olan Tile'ı buluyoruz .Biraz meşakkatli bir iş :) 

Projenin kaynak kodlarını buradan indirebilirsiniz.

Umarım faydalı bir makale olmuştur. Görüşmek üzere :)