Canlı Kutucuklar (Live Tiles)

Canlı Kutucuklar (Live Tiles), Windows Phone 7 ile birlikte gelen bir yeniliktir. Canlı Kutucukları kullanan uygulamalar dinamik bir şekilde hareket ediyor. Bir Canlı Kutucuk'ta bir uygulamanın iki farklı yüzü bulunur: Ön yüz (uygulamanın isminin ve simgesinin bulunduğu alan) ve arka yüz (uygulama arka tarafa döndüğü zaman göstereceğiniz içerik).

Canlı Kutucuk oluşturmanın en kolay yolu yolu, StandardTiles nesnesini kullanmaktır. Aşağıdakine benzer yapıda bir kodu uygulamanızın herhangi bir yerinden çağırdığınızda uygulamanız Live Tiles destekli olacaktır:

ShellTile tile = ShellTile.ActiveTiles.First();

if (null != tile)
{
    //ÖnYüz
    StandardTileData data = new StandardTileData();
    data.BackgroundImage = new Uri(@"/Assets/ApplicationIcon.png", UriKind.Relative);
    //Arka Yüz
    data.BackTitle = "Son Makaleler";
    data.BackContent = "Örnek Makale";
    tile.Update(data);
}

Update metoduyla Windows Phone ana ekranında uygulamamızın kullanacağı Live Tile özelliğine ait bilgileri güncelliyoruz. Bu örneğin dışında Phone 8 ile birlikte gelen 3 farklı kutucuk formatı bulunmaktadır.

1. Flip Template
2. Cycle Template
3. Iconic Template

Bu template'lerin boyut karşılaştırma tabloları aşağıdaki gibidir.

	Flip	Cycle	Iconic
Small	159 * 159px	159 * 159px	110 * 110px
Medium	336 * 336px	336 * 336px	202 * 202px
Wide	691 * 336px

 

Flip Tiles:

Aslında Windows Phone 7'de kullandığımız StandardTile, Windows Phone 8'de karşımıza Flip Tile olarak çıkıyor ve aynı özellikleri taşıyor. Farklı olan tarafı, arka tarafında veriyi tutup belli periyotlarda bu veriyi gösterebilmesidir.

ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

FlipTileData fliptile = new FlipTileData();
fliptile.Title = "Turkcell Geleceği Yazanlar";
fliptile.Count = 9;
fliptile.BackTitle = "Son Makaleler";
 
fliptile.BackContent = "Örnek Makale";
fliptile.WideBackContent = "Turkcell Geleceği Yazanlar ile Phone 8'e giriş";

fliptile.SmallBackgroundImage = new Uri("Assets/ApplicationIconSmall.png", UriKind.Relative);
fliptile.BackgroundImage = new Uri("Assets/ApplicationIconBG.png", UriKind.Relative);
fliptile.WideBackgroundImage = new Uri("Assets/ApplicationIconWide.png", UriKind.Relative);
 
tile.Update(fliptile);

Iconic Tiles:

Birçok kişi uygulamalarının özgün Windows Phone uygulamaları gibi görünmesi için beyaz simge ve saydam arka plan görüntüsü kullanmaktadır. Ancak bu simgelerin boyutlandırılmasında ve numaraların arka planlarının siyah olmasından kaynaklı problem yaşanmaktadır. Bu nedenle Windows Phone 8'de Iconic template'ini kullanıp, farklı renklerde simge ve numaralar kullanılabilmektedir.

ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

IconicTileData icontile = new IconicTileData();
icontile.Title = "Turkcell Geleceği Yazanlar";
icontile.Count = 12;
icontile.IconImage = new Uri("Assets/ApplicationIcon.png", UriKind.Relative);
icontile.SmallIconImage = new Uri("Assets/ApplicationIconSmall.png", UriKind.Relative);

icontile.WideContent1 = "Turkcell Geleceği Yazanlar ile Phone 8'e giriş";
icontile.WideContent2 = "Turkcell Geleceği Yazanlar ile Canlı Kutucuklar";
icontile.WideContent3 = "Turkcell Geleceği Yazanlar ile Phone 8 Örnekleri";
ShellTile.Create(new Uri("/MainPage.xaml",UriKind.Relative), icontile, true);

Cycle Template:

Cycle template kullanarak birbirini takip eden resim serisi oluşturabiliyoruz. Windows Phone 7'de geliştirici olarak bunu yapmamız mümkün değildi.

CycleTileData cycleicon = new CycleTileData();
cycleicon.Title = "Turkcell Geleceği Yazanlar";
cycleicon.Count = 5;

cycleicon.SmallBackgroundImage = new Uri("Assets/ApplicationIconSmall.png", UriKind.Relative);
List<Uri> images = new List<Uri>();
images.Add(new Uri("Assets/Image1.png", UriKind.Relative));
images.Add(new Uri("Assets/Image2.png", UriKind.Relative));
images.Add(new Uri("Assets/Image3.png", UriKind.Relative));
cycleicon.CycleImages = images;

ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), cycleicon, true);