Windows Phone 8: Canlı Kutucukların Etkili Kullanımı

Canlı Kutucuk (Live Tile) Kavramı
Windows Store ve Windows Phone başlangıç ekranlarında görmeye alışık olduğumuz kutucuklar, sıradan birer simge olmanın ötesinde özellikler taşıyor. Bunlara Canlı Kutucuklar (Live Tiles) denmesinin sebebi, üzerlerinde aktif olarak güncellenen veriler barındırmasıdır.

Başlangıç ekranındaki canlı kutucuklar, uygulamalara hayat verir ve uygulama çalışır durumda değilken bile en güncel bilgileri gösterir. Canlı kutucuklar, gerçek zamanlı olarak değişip güncellenir, böylece kullanıcıların önem verdiği konularda her an güncel kalması sağlanır.

Canlı Kutucuklara Programatik Erişim
Şimdi, vakit kaybetmeden, Windows Phone 8 üzerinde Canlı Kutucuklara nasıl erişebileceğimizi ele alan örnek bir proje geliştirelim. İlk adım olarak LiveTileKullanimi isimli bir Windows Phone projesi oluşturalım.

Hedef platform olarak Windows Phone 8.0 seçelim ve ilerleyelim.

Proje oluşturulduktan sonra, Solution Explorer penceresinde yer alan Properties bölümünün altında bulunan WMAppManifest.xml dosyasına çift tıklayarak açalım.

WMAppManifest standart bir xml dosyasıdır. Visual Studio 2012 bu dosya için bir editör ekranı sunar ve daha kolay bir biçimde düzenleme yapmamıza imkan verir. Bu dosyayı açtığımızda, aşağıdaki görselde olduğu gibi Application UI sekmesini görürüz.

 

Bu ekranda App Icon bölümünde uygulamaya ait simgeyi tanımlayabileceğimiz gibi, ek olarak uygulamamızın başlangıç ekranına sabitlenmesi sırasında kullanılacak olan görselleri de Tile Images bölümünden tanımlayabiliyoruz. Başlangıç ekranı için 3 farklı boyutta görsel kullanabiliriz. Küçük (Small), Orta (Medium) ve Geniş (Large). Geniş kutucuk için bir görsel tanımlamak zorunda değiliz ama Küçük ve Orta boyutlu kutucuklar için bir görsel tanımlamak zorunlu.

Geniş kutucuk için de görsel tanımlamak istiyorsak, Support for large Tiles seçeneğini işaretlememiz gerekiyor. Kutucuk şablonu olarak TemplateFlip seçtiğimizde, kutucuklar üzerinde kullanılacak görsellerin uygun boyutlarını aşağıda bulabilirsiniz.

Small Tile: 159x159
Medium Tile: 336x336
Large Tile: 691x336

TemplateFlip yerine TemplateIconic ya da TemplateCycle şablonları da tercih edilebilir. Tercihinizi Tile Template bölümünde belirtebilirsiniz.

TemplateIconic için Small (71x110) ve de Medium (134x202) boyutta görseller kullanmak zorunlu iken, TemplateCycle tarafında dönüşümlü olarak gösterilmek üzere bir Small bir de ek olmak üzere toplam 2 görsel kullanmak zorunludur. Fakat tercihe bağlı olarak bir Small, 9 adet de ek görsel kullanılarak daha haraketli bir kutucuk tasarlanabilir. Bu üç şablondan istediğimizi tercih edebiliriz.

Bu makalemizde, örneğimizi TemplateIconic şablonunu kullanarak gerçekleştireceğiz. İlgili ekranı tasarlayıp, kodlarımızı yazmaya başlayalım.

TemplateIconic şablonunu kullanarak kutucuklar üzerinde sunabileceğimiz ve güncelleyebileceğimiz bilgiler;
Başlık (Title), Adet (Count), Üç satırlık metinsel ifade (WideContent1-2-3), Küçük Simge Görseli (SmallIconImage), Orta ya da Geniş Boy Simge Görseli (IconImage), Arkaplan Rengi (BackgroundColor) bilgileridir.

Bu bilgileri güncelleyebilmek için öncelikle kutucuk (Tile) referansını yakalamak gerekiyor. Sonrasında ilgili özellikler üzerine değer atamaları yapılabilir. Örnek kod bloğunu aşağıda bulabilirsiniz.

        private void KutucukGuncelle()
        {
            ShellTile anaKutucuk = ShellTile.ActiveTiles.FirstOrDefault();
            if (anaKutucuk != null)
            {
                IconicTileData veriler = new IconicTileData();
                veriler.Count = 10;
                veriler.Title = "Güncel Başlık";
                veriler.WideContent1 = "ilk satırdaki yazılar";
                veriler.WideContent2 = "ikinci satırdaki yazılar";
                veriler.WideContent3 = "üçüncü satırdaki yazılar";
                anaKutucuk.Update(veriler);
            }
        }

Küçük kutucuk üzerinde sadece simge ve sayısal bilgi barındırılabilirken, orta boy kutucuk bu iki bilgiye ek olarak bir de başlık bilgisi kullanmamıza imkan sağlıyor. Geniş boyuttaki kutucuğun üzerinde de diğer verilere ek olarak üç satırlık metinsel veri sunabiliyoruz.

BackgroundTask Kullanarak Canlı Kutucukların Periyodik Olarak Güncellenmesi
Arkaplanda düzenli bir güncelleme yapabilmek için, ScheduledTaskAgent proje şablonundan faydalanacağız. Bu amaçla Solution üzerine sağ tıklayıp, Add New Project seçeneği ile bir Windows Phone Scheduled TaskAgent projesi ekleyelim.

Yine Windows Phone SDK 8.0 hedefli olarak bu projeyi oluşturduğumuzu belirtelim ve sonrasında ilk oluşturmuş olduğumuz LiveTileKullanimi isimli projenin referanslarına gidip, yeni projemizi referanslar arasına ekleyelim.

Yeni projemizin referansını, ilk projemiz olan LiveTileKullanimi projesine ekledikten sonra, ScheduledTaskAgent1 projemiz içerisinde yer alan ScheduledAgent.cs dosyasına çift tıklayalım ve kod sayfamızı açalım.

Öncelikle, System, System.Linq ve Microsoft.Phone.Shell isimalanını using direktiflerimiz arasına ekleyelim. Sonrasında, OnInvoke metodunu aşağıdaki gibi kodlayalım.

        protected override void OnInvoke(ScheduledTask task)
        {
            //TODO: Add code to perform your task in background
            ShellTile kutucuk = ShellTile.ActiveTiles.FirstOrDefault();
            if (kutucuk != null)
            {
                int x = DateTime.Now.Second; // Örnek değer olarak sistem saatinin saniye hanesini kullanacağız.
                IconicTileData veriler = new IconicTileData();
                veriler.Count = x;
                veriler.Title = String.Format("Güncel {0} Başlık",x);
                veriler.WideContent1 = "ilk satırdaki yazılar" + x;
                veriler.WideContent2 = "ikinci satırdaki yazılar" + x;
                veriler.WideContent3 = "üçüncü satırdaki yazılar" + x;
                kutucuk.Update(veriler);
            }
            NotifyComplete();
        }

OnInvoke metodunu bu şekilde kodladığımızda, ScheduledTask her tetiklendiğinde yapılacak iş tanımlanmış oldu. Şimdi, bu işi uygulamamız içerisinde nasıl periyodik olarak tetikleyeceğimizi kodlayalım.

İlk olarak, LiveTileKullanimi projemize geçelim ve Microsoft.Phone.Scheduler isimalanını kod sayfamıza ekleyelim. Sonrasında da aşağıdaki metodu projemiz içerisine ekleyelim.

        private void PeriyodikGuncelle()
        {
            if (ScheduledActionService.Find("CanliKutucuk") != null) // Eğer bu isimde bir servis var ise daha sonra tekrar eklemek üzere kaldırıyoruz.
            {
                ScheduledActionService.Remove("CanliKutucuk");
            }
            PeriodicTask pt = new PeriodicTask("CanliKutucuk");
            pt.Description = "LiveTileKullanimi Uygulamasının Canlı Kutucuk Güncelleyicisi";
            pt.ExpirationTime = DateTime.Now.AddHours(1);
            ScheduledActionService.Add(pt);
            ScheduledActionService.LaunchForTest("CanliKutucuk",TimeSpan.FromSeconds(8));
        }

Bu metodu uygun bir yerde çalıştırarak, arkaplanda CanliKutucuk isminde bir PeriodicTask, Schedule edilmemiş ise oluşturulup çalıştırılmasını sağlayabilirsiniz. Bu kod tekrar çalıştığında böyle bir servis tanımlı ise servisi kaldırıp tekrar ekleyecek ve herhangi bir sorun yaşanmadan kodların çalışabilmesi sağlanmış olacaktır.

Ek Kaynak
Bu konuda daha detaylı Türkçe bilgiyi ilerleyen yazılarımda paylaşacağım. Beklemek istemiyorum, İngilizce kaynak da işimi görür daha detaylı bilgiye ihtiyacım var diyorsanız, aşağıdaki videodan faydalanabilirsiniz.