Yazdır

Windows 8/8.1 Tiles & Notification

Fatih Bekdemir tarafından yazıldı. Aktif . Yayınlanma Windows 8

Windows 8 ile birlikte hayatımıza giren Live Tiles’lar ile Windows’da yeni bir kullanıcı arayüzüne hepimiz aşina olmuştuk. Tile’ların kullanım amacı aslında dokunmatik ekranlar diye genellediğimiz tablet ve touch screen’li bilgisayalar için mail, takvim, kişiler, hava durumu gibi birçok mobil uygulamalara hızlı erişim ve kullanım kolaylığı sağlamak amacıyla geldi ve o günden bugüne yüz binlerce uygulama ile gelişti ve güzelleşti. Bu yazı da biz developer’lar olarak Windows 8 / 8.1 uygulamalarımızda değişik boyutlarda ki Tile’ları nasıl kullanırız ne gibi bilgiler içerisine ekleriz, bununla ilgili örnekler yapacağız.

 

Hangi Tile’lara Sahibiz ?

Windows 8.1 ile birlikte hayatımıza Small Medium Wide ve Large olmak üzere 4 tile kullanılabilir durumda. Windows 8’de yalnızca Medium ve Wide Tile’lara sahiptik. Bu sebeple şu an yayınlanmış uygulamalar hâlen bu şekilde. Ancak Windows’un kendi uygulamaları bu 4 Tile’ı da destekleyecek şekilde hazırlanmış. Yani örneğin üstteki resimde gördüğünüz hava durumu, haberler, resimler, takvim, kişiler, mail gibi Windows’un kendi uygulamalarını Large boyutlarında ayarlayabiliyorsunuz. Bu sayede Tile’larda verdiğiniz bilgi sayısını arttırarak kullanıcılara daha güzel bir deneyim sunabiliyorsunuz.

Buradaki kilit nokta, tile’larda uygulamayı henüz açmadan onun hakkında bilgi vermek. Örneğin okunmamış mailim varsa bunun sayısı Badge Notification olarak mail kutum sağ alt tarafında görülecektir. Aynı zamanda mailimin kimden geldiği ve içeriğinin bir bölümü de kutu içerisinde görülür. Aynı şekilde Twitter uygulamasında, örneğin mention edildiğimiz twitler yine kutularımızda update olarak gelecektir. Burada amaç insanlara sadece ihtiyacı olduğu bilgiyi göstermek. Bu şekilde düşündüğümüzde Windows 8.1 arayüzünü koca bir Notification Center olarak görebiliriz. =)

Secondary Tiles

Her uygulamada bulunmayan bu özellik aslında oldukça kullanışlı bir yapıya sahiptir. Bir uygulama içerisinde spesifik olarak ilgilendiğimiz bir bölümü ( uygulama desteklediği taktirde ) sağ tık yaparak açılan application bar’da Pin to Start diyerek kısayolunu ana ekranımıza sabitleyebiliyoruz. Dolayısıyla ne zaman yeni oluşturduğumuz tile’a tıklasak direk olarak uygulamanın ihtiyacımız olan kısmına bizi götürür. Örneğin bir spor uygulamasının basketbol menüsü gibi.

Toast Notification

Windows 8’de ki en sevdiğim notification tipi diyebilirim. Masa üstünde çalışırken bir güncelleme geldiğinde ekranın sağ tarafından bu Toast notification’ın fırlaması gerçekten hoş. Bir mail geldiğinde, facebook’dan bir mesaj geldiğinde, twitter’den bir uyarı geldiğinde, bir haber geldiğinde ya da en basitinden usb aygıtınızı takdığınızda bile bu uyarı karşınıza çıkıyor.

Örnek Uygulama

Şimdi Live Tiles kullanımları ile ilgili örnek bir uygulama yapalım. Uygulama basit bir yemek kitabı şeklinde olacak. Ana sayfada çeşitli mutfaklara göre yemekler listelenecek, gruplara tıklandığında o mutfağa özgü bilgiler verilecek. Bireysel tariflere tıklandığında ise o tarifle ilgili detay sayfasına gidilecek şeklinde düşünebiliriz. Öncelikle basit bir uygulama ile başlayacaz ve bu uygulama içerisinde Live Tile nasıl kullanılır buna bakacağız. Eğer sadece live tile kullanımlarına bakmak isterseniz yazı içerisinde ki Live Tile Eklenmesi başlığından başlayabilirsiniz.

Yeni bir Blank App açıyorum ve ismini YemekKitabı olarak veriyorum. Ancak öncesinde içeride kullanacağınız resimleri ve boyutlarını ayarlamanız gerekiyor. Resimlerinizi 150x150 ve 480x360 boyutlarında hazırlamanız uygun olacaktır.

Proje dosyamın içerisine Add -> New Folder diyerek resimlerimi ekliyorum. Daha sonra bu resimlerimi static olarak olarak kullanabileceğim & bind edebileceğim bir sınıf yaratıyorum ve adına Photos ismini veriyorum. Solution Explorer’ın şimdiki hali şu şekilde olmalı.

Şimdi Photos class’ını açalım içerisinde kullanacağımız değişkenleri tanımlayalım ve daha sonra List ise fotolarımızı tutup Add metodu ile ekleyelim.

class Photos
    {
        public int ID { get; set; }
        public string Url { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public string Country { get; set; }
        public string City { get; set; }

        public List<Photos> getAllPhotos()
        {
            List<Photos> recipePhoto = new List<Photos>();
            recipePhoto.Add(new Photos { ID = 0, Url = "Images/chinese/Chinese_1_600_C.jpg", Title = "Çin Yemeği 1", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 1, Url = "Images/chinese/Chinese_2_600_C.jpg", Title = "Çin Yemeği 2", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 2, Url = "Images/chinese/Chinese_3_600_C.jpg", Title = "Çin Yemeği 3", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 3, Url = "Images/chinese/Chinese_4_600_C.jpg", Title = "Çin Yemeği 4", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 4, Url = "Images/chinese/Chinese_5_600_C.jpg", Title = "Çin Yemeği 5", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 5, Url = "Images/chinese/Chinese_6_310_C.jpg", Title = "Çin Yemeği 6", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 6, Url = "Images/chinese/Chinese_6_600_C.jpg", Title = "Çin Yemeği 6", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 7, Url = "Images/chinese/chinese_group.png", Title = "Çin Grup", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 8, Url = "Images/chinese/chinese_group_detail.png", Title = "Çin Grup Detay", Description = "", Country = "Çin", City = "Pekin" });
            recipePhoto.Add(new Photos { ID = 9, Url = "Images/chinese/chinese_group_header.png", Title = "Çin Grup Header", Description = "", Country = "Çin", City = "Pekin" });
return recipePhoto;
        }
        public List<Photos> getByCountry(string countryName)
        {
            List<Photos> result = (from photo in getAllPhotos()
                                   where photo.Country == countryName
                                   select photo).ToList<Photos>();
            return result;
        }

Kod blogunu fazla uzun tutmamak için sadece Çin restoranlarının olduğu yapıyı ekledim. Siz eğer elinizde varsa Fransız Alman İspanyol gibi restoranların da resimlerini aynı şekilde return

den önce ekleyebilirsiniz.

Şimdi MainPage.xaml tarafına gelelim ve boş olan görsel tarafımıza toolbox’dan bir GridView ekleyelim.

<GridView x:Name="gridviewPhotos" HorizontalAlignment="Left" Margin="88,64,0,0" VerticalAlignment="Top" Width="1220" Height="642" ItemTemplate="{StaticResource DataTemplatePhotos}"/>

 Burada ItemTemplate olarak verdiğimiz staticResource’un altının çizili olduğunu görüceksiniz. Çünkü henüz uygulama açılırken App.xaml içerisinden okuyacağı bir kaynak ataması yapmadık. Hemen App.xaml’I açıyoruz ve içerisine şu kodları yazıyoruz.

<Application.Resources>
    <DataTemplate x:Key="DataTemplatePhotos">
        <Grid Height="200" Width="300">
            <Image Source="{Binding Url}" Stretch="UniformToFill"/>
        </Grid>
    </DataTemplate>
</Application.Resources>

Şimdi, ilk olarak resimlerimizin şu anki halini görmek için MainPage.xaml.cs içerisine az önce eklediğimiz GridView’a ItemSource olarak resimlerimizin tamamını veriyoruz.

        public MainPage()
        {
            this.InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            Photos data = new Photos();
            gridviewPhotos.ItemsSource = data.getAllPhotos();
        }

 Bu kodu yazdıktan sonra deneme olarak uygulamamızı çalıştıralım ve resimlerimizin şu anki halini görelim.

Burası bizim MainPage’imizdi. Şimdi bir detay sayfası eklememiz gerekiyor ki resimlere tıkladığımızda detaylarına ulaşalım. Proje dosyamıza sağ tıklayıp Add -> New Item diyoruz. Bu sefer Blank Page yerine Basic Page diyoruz çünkü Basic Page’de ki Back butonunu kullanmamız gerekicek.

Basic Page yaratırken çıkan eksik dosyaların eklenmesi uyarısına evet diyerek devam ediyoruz. Şimdi açılan boş sayfamızın içerisini doldurmalıyız. My Application’ın olduğu bar’ın altına Toolbox’dan bir Grid objesi atıyoruz ve köşelere çekerek kalan alanı kaplıyoruz. Daha sonra içerisine bir resimleri göstermek için bir Image, o resim hakkında detayları listelemek için yan tarafına bir Stack Panel koyuyoruz ve içerisine Title, City ve Country’I göstermek için TextBlock’lar yerleştiriyoruz. Örnek çıktı şu şekilde olmalı:

        <Grid x:Name="detailGrid" Height="618" VerticalAlignment="Top" Margin="10,10,0,0" Grid.Row="1">
            <Image x:Name="detailImg" HorizontalAlignment="Left" Height="454" VerticalAlignment="Top" Width="688" Source="{Binding Url}" Margin="120,0,0,0"/>
            <StackPanel HorizontalAlignment="Left" Height="608" Margin="833,0,0,0" VerticalAlignment="Top" Width="457">
                <TextBlock TextWrapping="Wrap" Text="Title" FontSize="41"/>
                <TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="31" Margin="0,0,0,25"/>
                <TextBlock TextWrapping="Wrap" Text="City" FontSize="41"/>
                <TextBlock TextWrapping="Wrap" Text="{Binding City}" FontSize="31" Margin="0,0,0,25"/>
                <TextBlock TextWrapping="Wrap" Text="Country" FontSize="41"/>
                <TextBlock TextWrapping="Wrap" Text="{Binding Country}" FontSize="31" Margin="0,0,0,25"/>

            </StackPanel>
        </Grid>

Yukarıda ki kod da görebileceğiniz üzere boş olan textBlock’ların Text’lerin Binding Title diyerek Photos sınıfında yarattığımız dosyaları çekiyoruz.

Bir sonraki adım, uygulama çalıştığında MainPage.xaml’da gördüğümüz resimlere tıkladığımızda Detail Page sayfasına yönlendirmek olacak.

MainPage.xaml.cs sayfasına geliyoruz ve sayfamızı modifiye ediyoruz. gridViewphotos objesini SelectionChanged kontrolü ile seçilmesini sağlıyoruz.

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            gridviewPhotos.SelectionChanged += gridviewPhotos_SelectionChanged;

            Photos data = new Photos();
            gridviewPhotos.ItemsSource = data.getAllPhotos();
        }
        void gridviewPhotos_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Photos selectedPhoto = gridviewPhotos.SelectedItem as Photos; 
 	  }

SelectionChanged event’ine global olarak erişebilmek için DetailPage.xaml.cs sınıfı içerisine bir control tanımlıyoruz.

        public Photos selectedImage;

 Bu control sayesinde Photos objesinde tanımladığımız herhangi bir kontrolü kullanabiliyoruz. Mainpage.xaml.cs sayfasına geri dönelim. DetailPage’den yeni bir object yaratacağız.

        void gridviewPhotos_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Photos selectedPhoto = gridviewPhotos.SelectedItem as Photos;
            DetailPage dPage = new DetailPage();
            dPage.selectedImage = selectedPhoto;
            Window.Current.Content = dPage;
        }

 Bu kodla birlikte ne zaman GridView’dan bir fotoğraf seçsem, detailPage sayfasına yönlendirileceğim. Benim bu data’yı sayfa yüklendiğinde ekrana yüklemem lazım. Bu sebeple DetailPage.xaml.cs sayfasına dönüp public DetailPage() { } arasında ki kodların altına şu kodları yazıyorum.

        public DetailPage()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
            this.navigationHelper.SaveState += navigationHelper_SaveState;
            this.Loaded += DetailPage_Loaded;
        }

        void DetailPage_Loaded(object sender, RoutedEventArgs e)
        {
            pageTitle.Text = selectedImage.Title;
            detailGrid.DataContext = selectedImage;
        }

 Kodların tamamını ekledim ki hangi kodun nereye yazılacağını karıştırmayın. Şu an bu yaptıklarımızla projeyi kaydedip çalıştıralım. Gelen ekranda çıkan resimlere tıkladığımızda bizi detay sayfasına götürüyor olması lazım.

Live Tile Eklenmesi

Bu işleme başlamadan önce, Windows 8.1 app samples dosyalarını indirmenizi tavsiye ediyorum. İçerisinde uygulama geliştirme ile ilgili bir çok örnek proje bulunmakla birlikte, C# tarafında bulunan “App tiles and badges sample” klasöründe bulunan örnek kullanımları projemizde kullanacağız. C# klasörüne girdiğinizde Tiles proje dosyasını çalıştırdığınızda içerisinde bir çok tiles seneryosunun olduğu bir örnek uygulama sizi karşılıyor.

Kendi projemize dönecek olursak, ilk olarak LiveTile’ımıza Badge Notification’ı ekleyeceğiz. Bunu yapabilmemiz için, öncelikle Tiles proje dosyasının olduğu klasöre girerek NotificationsExtensions dosyasını kopyalayıp kendi projemize yapıştırmamız gerekiyor. Daha sonra, Solution’ımıza sağ tıklayarak Add -> Existing Project diyoruz ve NotificationsExtensions dosyasına tıklayarak projemize ekliyoruz. Daha sonra projemizi Build ediyoruz ve YemekKitabı proje dosyasını içerisinde bulunan References kısmına NotificationsExtensions referansını ekliyoruz. Bunun için Add Reference dedikten sonra Projects tabına tıklayarak NotificationsExtensions’ı görebilirsiniz.

Referansımızı ekledikten sonra rahatça bu özellikleri kullanabiliriz. MainPage.xaml.cs sayfasına geri dönüyoruz. Burada Badge notification olarak kaç tane yemek fotosu eklediysek sayısını yazdıracağız. MainPage_Loaded içerisine Badge ile ilgili kodlarımızı Tile uygulamasında ki Badge örneğinden kodları kopyalayıp yapıştırıyoruz.

 

BadgeNumericNotificationContent badgeContent = newBadgeNumericNotificationContent((uint)number);

BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());

Gerekli using tanımlamalarını yapalım. Number’ın altının çizili olduğunu görüceksiniz. Biz fotolarımızı data.getAllPhotos() olarak tanımladığımız için number yerine şu kodu ekliyoruz.

 

data.getAllPhotos().Count()

 

Şimdi uygulamamızı build edip çalıştırıyoruz. Uygulama çalıştıktan sonra uygulamadan çıkıyoruz ve daha önceden Pin to Start dediğimiz uygulamamızı bulup üzerinde yazan rakama bakıyoruz.

Resimden anlayacağımız üzere 30 adet update’im bulunmakta. Yani uygulama içerisine 30 adet resim eklemişim. Ve bunu small, medium, wide, large size’larda da görebilirsiniz. Gördüğünüz üzere badge notification’ı kullanmak bu kadar kolay.

Peki bu tile resimlerini nereden ayarlıyoruz sorusuna gelirsek, Solution Explorer içerisinde bulunan Package.appxmanifest dosyasına giriyoruz ve Visual Assest tabına tıklıyoruz. Burada tile images and logos kısmından boyutlarına göre resimlerinizi atayabilirsiniz. Tabiki bu resimleri proje dosyanızın olduğu yerde bulunan Assets dosyasının olduğu klasöre kopyalamalısınız.

 

 

Sıra geldi bir başka tile kullanımına. LocalImageTile’ı kullanarak, en son girdiğimiz yemek tarifinde bulunan resmi uygulamadan çıktığımızda tile olarak döndürebileceğimiz bir yapı hazırlayabiliriz. Bunun için yine örnek kullanımların olduğu Tiles uygulamamıza dönüp SendLocalImageTile sınıfını açıyoruz ve içerisinde ki şu kodları kendi uygulamamızda ki DetailPage.xaml.cs sayfasında ki DetailPage_Loaded metoduna ekliyoruz.

ITileSquare310x310Image tileContent = TileContentFactory.CreateTileSquare310x310Image();
            tileContent.Image.Src = "ms-appx:///images/purpleSquare310x310.png";
            tileContent.Image.Alt = "Purple image";

            ITileWide310x150ImageAndText01 wide310x150Content = TileContentFactory.CreateTileWide310x150ImageAndText01();
            wide310x150Content.TextCaptionWrap.Text = "This tile notification uses ms-appx images";
            wide310x150Content.Image.Src = "ms-appx:///images/redWide310x150.png";
            wide310x150Content.Image.Alt = "Red image";

            ITileSquare150x150Image square150x150Content = TileContentFactory.CreateTileSquare150x150Image();
            square150x150Content.Image.Src = "ms-appx:///images/graySquare150x150.png";
            square150x150Content.Image.Alt = "Gray image";

            wide310x150Content.Square150x150Content = square150x150Content;

            tileContent.Wide310x150Content = wide310x150Content;

            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

 

Burada Image source ve Image Alt kısımlarına kendi local değerlerimizi verebilmek için kodları modifiye ediyoruz.

wide310x150Content.Image.Src = "ms-appx:///" + selectedImage.Url;
            wide310x150Content.Image.Alt = selectedImage.Title;

 

Aynı ayarları diğer boyutlarda ki tile’lar için de yapıyoruz. Son olarak projemizi kaydedip çalıştırıyoruz. Bir yemek tarifi seçip içerisine giriyoruz ve sonra uygulamamızı kapatıp çıkıyoruz. Uygulamamızın tile’larında en son girdiğimiz resim görülüyor olması lazım.

Bende yukarıda ki gördüğünüz resimler çıktı. Umarım sizin için de aynısı olmuştur.

Toast Notification

Toast notifications sample klasörüne gidip solution dosyasına tıklıyoruz ve sample’ı açıyoruz ve örnekleri inceliyoruz.


Resimli bir toast notification göndermek istediğim için ScenarioInput2’yi tercih ediyorum. Örnek bir kod alıp uygulamamın DetailPage.xaml.cs tarafına ekleyeceğim.

Kendi uygulamamıza geldiğimizde DetailPage.xaml.cs tarafında bir az evvel tanımladığımız Tile kodlarının altına modifiye edilmiş olan şu kodları ekliyoruz.


            IToastNotificationContent toastContent = null;

            IToastImageAndText01 templateContent = ToastContentFactory.CreateToastImageAndText01();
            templateContent.TextBodyWrap.Text = selectedImage.Title;
            templateContent.Image.Src = "ms-appx:///" + selectedImage.Url;
            templateContent.Image.Alt = selectedImage.Title;
            toastContent = templateContent;

            ToastNotification toast = toastContent.CreateNotification();

            ToastNotificationManager.CreateToastNotifier().Show(toast);

 Projemizi çalıştırmadan önce, uygulamamızın Package.appmanifest dosyasına tıklıyoruz. Burada uygulamamızın toast notification kullanım yetkisini vermemiz gerekiyor.

 

Bu şekilde ayarladıktan sonra tüm projemizi kaydedip çalıştırıyoruz. Uygulamamız açıldığında bir yemek tarifine girdiğimizde şu uyarıyı görüyor olmamız lazım.

Evet arkadaşlar örnekler bu kadar, ama siz Windows SDK Samples’dan bulup kullanabileceğiniz bir çok live tile örneği olduğunu ve bunun dışında bir çok kontrolü bulabileceğinizi unutmayın.

Teşekkürler...