Herkese selamlar. Bu makalemde Windows Phone toolkit ile beraber gelen, uygulama içinde kullanılan canlı kutucukların (HubTile) uygulamada nasıl kullanıldığını anlatacağım. Öncelikle Hubtile nedir? Neden kullanırız? Avantajları-Dezavantajları nelerdir? Ve nasıl uygulamamıza entegre ederiz gibi soruları bu makalemde cevaplandıracağım.
Hubtile’ı açıklayacak olursam başlığı, açıklaması, ön yüzünde bir görsel barındıran ve güzel bir animasyon ile arkasını dönüp diğer açıklamalarını gösteren bir toolkit nesnesidir.
Hubtile tek bir nesnede birçok özellik barındırdığı için, pratik bir yapı olduğu için ve görsel olarak hoş bir görüntüsü olduğu için kullanırız. Dezavantajları ise bu nesnenin başlığını çok uzatmamalıyız çünkü Hubtile'ın genişliği sınırlığı olduğundan başlığın tamamı görünmeyebilir. Ve uygulamamız içerisinde Hubtile kullanımında aşırıya kaçmamalıyız. Çünkü Hubtile’lar sürekli hareket halinde oldukları için hem bellek hem de şarj açısından olumsuz etki yapabilir. Çok fazla uzatmadan bir Hubtile uygulaması yapalım.

Öncelikle eğer Silverlight for Windows Phone toolkit yüklü değilse buraya tıklayarak indirin. Size eski toolkit adresini verdim, çünkü eskisinde Hubtile bulunmaktadır. Yeni toolkit’i kısa bir aramayla nuget kullanarak indirebilirsiniz. Bu adımdan sonra yeni bir Windows Phone projesi oluşturun. Daha sonra hemen uygulamamıza toolkit referans dll’ ini eklememiz gerekiyor. Bunun için Solution Explorer’dan References kısmına sağ tık -> Add References kısmına tıkladıktan sonra açılan sayfadan Microsoft.Phone.Controls.Toolkit dll’ini eklemeliyiz.

Toolkit dll’ini projemize ekledik. Şimdi sıra geldi bunu kullanacağımız sayfada çağırmaya. Hemen aşağıda vereceğim kodu <phone:PhoneApplicationPage kısmının içine yazın.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Yukarıdaki kod sayesinde xaml kısmında toolkit nesnelerini çağırabiliyoruz. Artık tasarım kısmına Hubtile'ımızı ekleyebiliriz. Ancak elimizde Hubtile'ın üzerinde gözükecek resim yok. Resim eklemek için Solution Explorer içerisindeki projemize sağ tıklayarak Add -> Exiting Item seçeneğine tıklayın. Resmin ideal boyutu 200×200 olmalıdır. Bu adımdan sonra ise bir Content içerisine aşağıda vereceğim xaml kodunu yazın.

<toolkit:HubTile x:Name=”hubTile” Title=”HubTile” Message=”HubTile Mesajı” Margin=”10″ Source=”resim.png” Background=”Purple”/>
<Button x:Name=”btn1″ Content=”Dondur” HorizontalAlignment=”Center” VerticalAlignment=”Bottom” Click=”btn1_Click” />

Burada Hubtile’ın başlığını(Title),mesajını(Message), resim yolunu(Source) ve arkaplanını(Background) belirledim. Buton koymamdaki amaç ise butona basılınca Hubtile’ın hareketlerinin dondurulmasını, tekrar tıklandıktan sonra ise devam ettiğini sağlamak. Gördüğünüz gibi butonumuzda btn1_Click event’i var. Hemen bunu kod tarafında dolduralım. Eğer sizin Button'ınızda bu event yoksa üzerine çift tıklayarak direkt olarak Button'ın click event'ine ulaşabilirsiniz.

private void btn1_Click(object sender, RoutedEventArgs e)
{

if (hubTile.IsFrozen==false)
{
hubTile.IsFrozen=true; //Hubtile'ı dondur
btn1.Content = “Devam Et”; //Button'ın üzerinde yazan yazıyı değiştir
}
else

{
hubTile.IsFrozen = false;
btn1.Content = “Dondur”;

}
}

Görüldüğü gibi HubTile’ın donuk olup olmadığını denetleyip ona göre hareket edebiliyoruz. Yukarıdaki kodun yaptığı iş, eğer Hubtile çalışıyorsa durdurmak, duruyorsa çalıştırmak ve bu işi yapan Button'ın üzeirndeki yazıyı uygun olarak değiştirmektir. Eğer ki HubTile tıklandığında tıklanan Hubtile’a ait bir özelliği almak istiyorsanız aşağıdaki kodu deneyin.

private void hubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
HubTile hbt = sender as HubTile;
MessageBox.Show(hbt.Title);
}
//Kodu kullanmak için HubTile’a Tap event’i oluşturun

Projeyi buradan indirebilirsiniz.

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