Tiles and Lock Screen

Notifications

Kevin Kurniawan

Windows Phone

Daftar Isi

Tiles ........................................................................................................................................................... 1

Cycle Tile Template ................................................................................................................................... 2

Iconic Tile Template .................................................................................................................................. 5

Flip Template ............................................................................................................................................ 9

Updating Tiles From a Background Agent............................................................................................... 13

Lock Screen Notifications ........................................................................................................................ 18

1

Tiles Setiap aplikasi di Windows Phone setidaknya memiliki satu buah tiles yang dapat disimpan di dalam start

screen. Berikut ini adalah beberapa template tiles yang dapat disimpan di start screen.

Flip Template

Iconic Template

Cycle Template

Berikut adalah resolusi dari image yang akan dibuat menjadi tiles

2

Tile Size Flip and Cycle Images Iconic Images

Small 159 x 159 pixels 159 x 159 pixels 110 x 110 pixels

Medium 336 x 336 pixels 336 x 336 pixels 202 x 202 pixels

Wide 691 x 336 pixels 691 x 336 pixels N/A

Windows Phone memiliki 2 buah tipe tiles yaitu :

Primary Tiles Primary Tiles adalah tiles utama yang disimpan di start screen yang didapatkan

dari aplikasi utama. Misalnya seperti gambar berikut.

Jadi user memilih aplikasi dari layar utama, menahan aplikasi yang akan dipilih dan menekan

tombol pin to start

Secondary Tiles - Sedangkan secondary Tiles adalah tiles yang disimpan di dalam start screen

yang bukan dari aplikasi utama. Setelah ini semua contoh pembuatan tiles yang menggunakan

kode porgram akan menjadi secondary tiles.

Cycle Tile Template Berikut adalah gambaran mengenai cycle tile template

Flip tempalate dapat menyimpan sampai 9 gambar. Berikut adalah cara untuk membuat cycle Tile

Template. Pertama tama masuk ke bagian WMAppManifest.xml lalu pilih di bagian tile template

pilihan TemplateCycle.

3

Setelah itu di bagian bawah kita dapat memasukkan list tile image seperti gambar di bawah ini. Gambar

yang dibuat berukuran 691 x 336 pixels untuk ukuran besar dan 159 x 159 pixels untuk ukuran small dan

kita pilih pilihan Support for Large Tile agar tile yang dibuat support 3 buah ukuran tile.

Dan berikut ada hasil tampilan pada saat aplikasi dijalankan. Untuk ukuran small, cycle tile template

tidak akan bergerak. Tiles hanya akan berganti pada saat saat ukuran tile medium atau wide.

4

Selain itu kita juga dapat membuat cycle tile template tersebut dari potongan kode program. Berikut

kita buat button yang dapat digunakan untuk Pin To Start Icon. Yang akan menjadi secondary tiles.

private void PinToStart(object sender, RoutedEventArgs e) { CycleTileData cycleTile = new CycleTileData(); cycleTile.Title = "Pemandangan"; cycleTile.Count = 5; cycleTile.SmallBackgroundImage = new Uri("/Assets/Tiles/small.png", UriKind.Relative); cycleTile.CycleImages = new Uri[] { new Uri("/Assets/Tiles/1.png", UriKind.Relative), new Uri("/Assets/Tiles/2.png", UriKind.Relative), new Uri("/Assets/Tiles/3.png", UriKind.Relative), new Uri("/Assets/Tiles/4.png", UriKind.Relative), new Uri("/Assets/Tiles/5.png", UriKind.Relative), new Uri("/Assets/Tiles/6.png", UriKind.Relative), new Uri("/Assets/Tiles/7.png", UriKind.Relative), new Uri("/Assets/Tiles/8.png", UriKind.Relative), new Uri("/Assets/Tiles/9.png", UriKind.Relative), }; ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("cycle".ToString())); if (TileToFind != null && TileToFind.NavigationUri.ToString().Contains("cycle")) { TileToFind.Delete(); ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), cycleTile, true);

5

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

Dan berikut adalah tampilan saat kode program dijalankan.

Yang membedakan adalah adanya angka 5 yang didapat dari cycleTile.Count = 5; yang nanti nya dapat

digunakan sebagai tiles notification untuk user.

Iconic Tile Template

Berikut adalah cara untuk membuat iconic tile template. Kita masuk ke WMAppManifest.xml dan pilih

TemplateIconic di Tile Template seperti gambar berikut.

6

Setelah itu kita isikan picture yang akan digunakan sebagai icon di tiles untuk ukuran small ukuran 110 x

110 pixels dan untuk ukuran medium ukuran 202 x 202 pixels.

Dan berikut tampilan saat aplikasi dijalankan.

7

Selain itu kita juga dapat menambahkan iconic tile template menggunakan kode porgram. Berikut

adalah potongan kode program yang untuk membuat iconic tile template. Yang akan menjadi secondary

tiles.

private void PinToStart(object sender, RoutedEventArgs e) { IconicTileData oIcontile = new IconicTileData(); oIcontile.Title = "Iconic Tile"; oIcontile.Count = 7; oIcontile.IconImage = new Uri("Assets/Tiles/iconic1.png", UriKind.Relative); oIcontile.SmallIconImage = new Uri("Assets/Tiles/iconic2.png", UriKind.Relative); oIcontile.WideContent1 = "Wide Content 1"; oIcontile.WideContent2 = "Wide Content 2"; oIcontile.WideContent3 = "Wide Content 3"; oIcontile.BackgroundColor = System.Windows.Media.Colors.Transparent; ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("Iconic".ToString())); if (TileToFind != null && TileToFind.NavigationUri.ToString().Contains("Iconic")) { TileToFind.Delete(); ShellTile.Create(new Uri("/MainPage.xaml?id=Iconic", UriKind.Relative), oIcontile, true); } else {

8

ShellTile.Create(new Uri("/MainPage.xaml?id=Iconic", UriKind.Relative), oIcontile, true); } }

Dan berikut adalah tampilan saat kode program dijalankan.

Walaupun anda tidak membuat menggunakan kode program namun anda masih dapat mengisi count

dan content yang ada di dalam tiles melalui WMAppManifest.xml yang dibuka menggunakan text editor

seperti gambar berikut. Disana terdapat tag tag seperti content dan count.

9

Flip Template

Berikut adalah cara untuk membuat Flip Template. Kita masuk ke WMAppManifest.xml dan kita pilih

TemplateFlip di bagian Tile Template lalu kita isi image dari tile yang telah dibuat. Untuk ukuran small

menggunakan ukuran 159 x 159 pixels, untuk medium menggunakan ukuran 336 x 336 pixels dan untuk

wide menggunakan ukuran 691 x 336 pixels.

Dan berikut adalah tampilan saat aplikasi dijalankan.

10

Selain itu kita juga dapat menambahkan flip template menggunakan kode porgram. Berikut adalah

potongan kode program untuk membuat flip template. Dalam kode program di bawah method

CreateFlipTileData() adalah method yang digunakan untuk membuat tiles jika tiles tersebut belum ada di

start screen. Berikut ini adalah beberapa property yang harus ada dalam pembuatan flip template icon

agar icon terlihat lebih bagus.

Title

BackTitle

BackContent

WideBackContent

Count

SmallBackgroundImage

BackgroundImage

WideBackgroundImage

BackBackgroundImage

WideBackBackgroundImage

Untuk lebih jelas nya penggunaan properti tersebut anda dapat melihat gambar berikut sebagai

referensi. Tiles ini akan menjadi secondry tiles

11

private void PinToStart(object sender, RoutedEventArgs e) { ShellTile oTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("flip".ToString())); if (oTile != null && oTile.NavigationUri.ToString().Contains("flip")) { FlipTileData oFliptile = new FlipTileData(); oFliptile.Title = "Title"; oFliptile.Count = 11; oFliptile.BackTitle = "Back Title"; oFliptile.BackContent = "Back Content Medium"; oFliptile.WideBackContent = "Back Content Wide"; oFliptile.SmallBackgroundImage = new Uri("Assets/Tiles/small.png", UriKind.Relative); oFliptile.BackgroundImage = new Uri("Assets/Tiles/medium.png", UriKind.Relative); oFliptile.WideBackgroundImage = new Uri("Assets/Tiles/wide.png", UriKind.Relative); oFliptile.BackBackgroundImage = new Uri("/Assets/Tiles/medium1.png", UriKind.Relative); oFliptile.WideBackBackgroundImage = new Uri("/Assets/Tiles/wide1.png", UriKind.Relative); oTile.Update(oFliptile); MessageBox.Show("Flip Tile Data successfully update."); } else { // once it is created flip tile Uri tileUri = new Uri("/MainPage.xaml?tile=flip", UriKind.Relative);

12

ShellTileData tileData = this.CreateFlipTileData(); ShellTile.Create(tileUri, tileData, true); } } private ShellTileData CreateFlipTileData() { return new FlipTileData() { Title = "Title", BackTitle = "Back Title", BackContent = "Back Content Medium", WideBackContent = "Back Content Wide", Count = 8, SmallBackgroundImage = new Uri("Assets/Tiles/small.png", UriKind.Relative), BackgroundImage = new Uri("Assets/Tiles/medium.png", UriKind.Relative), WideBackgroundImage = new Uri("Assets/Tiles/wide.png", UriKind.Relative), BackBackgroundImage = new Uri("/Assets/Tiles/medium1.png", UriKind.Relative), WideBackBackgroundImage = new Uri("/Assets/Tiles/wide1.png", UriKind.Relative) }; }

Dan berikut adalah tampilan pada saat kode program tersebut dijalankan.

13

Updating Tiles From a Background Agent Pada contoh kali ini akan dibahas cara mengupdate tiles melalui background agent. Jika ada diantara

rekan yang masih belum familiar dengan background agent bisa melihat tutorial saja di bagian Windows

Phone 8 Application Lifecycle. Pada kasus ini akan dibuat sebuah Flip Template yang memiliki content

jumlah content yang akan selalu bertambah setiap 1 menit. Pertama tama kita tambahkan dahulu

Windows Phone Scheduled Task Agent seperti gambar berikut.

14

Setelah itu tambahkan reference di project aplikasi kita yang mengacu pada ScheduledTaskAgent seperti

gambar berikut.

15

Setelah itu kita tambahkan kode program berikut di bagian App.xaml.cs pada method

Application_Closing.

PeriodicTask periodicTask; string periodicTaskName = "PeriodicAgentTiles"; private void Application_Closing(object sender, ClosingEventArgs e) { if (!IsolatedStorageSettings.ApplicationSettings.Contains("counter")) { IsolatedStorageSettings.ApplicationSettings["counter"] = 1; IsolatedStorageSettings.ApplicationSettings.Save(); } periodicTask = ScheduledActionService.Find(periodicTaskName) as PeriodicTask; if (periodicTask != null)

16

{ RemoveAgent(periodicTaskName); } periodicTask = new PeriodicTask(periodicTaskName); periodicTask.ExpirationTime = DateTime.Now.AddDays(14); periodicTask.Description = "This demonstrates a periodic task."; ScheduledActionService.Add(periodicTask); #if(DEBUG_AGENT) ScheduledActionService.LaunchForTest(periodicTask.Name, TimeSpan.FromSeconds(60)); #endif if (!periodicTask.IsScheduled || periodicTask.ExpirationTime < DateTime.Now) { periodicTask.ExpirationTime = DateTime.Now.AddDays(14); #if(DEBUG_AGENT) ScheduledActionService.LaunchForTest(periodicTask.Name, TimeSpan.FromSeconds(60)); #endif } } private void RemoveAgent(string name) { try { ScheduledActionService.Remove(name); } catch (Exception) { } }

Jangan lupa untuk menambahkan #define DEBUG_AGENT di bagian paling atas App.xaml.cs. Setelah itu

tambahkan kode program berikut di bagian ScheduledAgent.cs

protected override void OnInvoke(ScheduledTask task) { ShellToast toast = new ShellToast(); toast.Title = "App"; toast.Content = "You Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification"; toast.Show(); ShellTile oTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("flip".ToString())); if (oTile != null && oTile.NavigationUri.ToString().Contains("flip")) {

17

FlipTileData oFliptile = new FlipTileData(); oFliptile.Title = "Tiles Workshop"; oFliptile.Count = 0; oFliptile.BackTitle = "Tiles Workshop"; oFliptile.BackContent = "You Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification"; oFliptile.WideBackContent = "You Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification"; oFliptile.SmallBackgroundImage = new Uri("Assets/Tiles/small.png", UriKind.Relative); oFliptile.BackgroundImage = new Uri("Assets/Tiles/medium.png", UriKind.Relative); oFliptile.WideBackgroundImage = new Uri("Assets/Tiles/wide.png", UriKind.Relative); oFliptile.BackBackgroundImage = new Uri("/Assets/Tiles/medium1.png", UriKind.Relative); oFliptile.WideBackBackgroundImage = new Uri("/Assets/Tiles/wide1.png", UriKind.Relative); oTile.Update(oFliptile); //MessageBox.Show("Flip Tile Data successfully update."); } IsolatedStorageSettings.ApplicationSettings["counter"] = (int)IsolatedStorageSettings.ApplicationSettings["counter"] + 1; IsolatedStorageSettings.ApplicationSettings.Save(); #if DEBUG_AGENT ScheduledActionService.LaunchForTest(task.Name, TimeSpan.FromSeconds(60)); #endif NotifyComplete(); }

Pastikan di bagian atas kode program tersebut sudah terdapat #define DEBUG_AGENT. Setelah itu

jangan lupa membuka WMAppManifest.xml dan menambahkan kode program berikut di bagian

Dan berikut adalah tampilan pada saat kode program dijalankan.

18

Dari kode program tersebut bisa terlihat jika tiles mengalami perubahan content yang sudah diset

berubah setiap 1 menit.

Lock Screen Notifications Lock screen notification digunakan untuk menampilkan pemberitahuan kepada user tentang aplikasi kita

di bagian lock screen.

Untuk membuat lock screen notification kita membutuhkan icon sebesar 38 x 38 pixels. Pada contoh kali

ini akan dibuat lanjutan dari Flip tempate di bagian sebelumnya yang akan membuat notifikasi di bagian

lock screen akan bertambah setiap 1 menit. Pertama tama kita buka WMAppManifest.xml lalu kita

tambahkan kode seperti ini.

19

Bagian tersebut diletakan setelah tag penutup token seperti gambar berikut.

Dan jangan lupa di bagian atas terdapat tag yang digunakan untuk

mendefinisikan icon yang akan kita pakai di halaman lock screen. Icon yang dipakai berukuran 38 x 38

pixels. Berikut adalah potongan kode yang digunakan.

Assets\LockIcon.png

Berikut adalah peryataan untuk membuat lock screen notification

Jumlah angka yang ditampilkan pada halaman lock screen sama dengan property Count di tiles primary

kita. Jadi jumlah angka yang ditampilkan tidak akan dipengaruhi oleh jumlah Count di secondary tiles.

Untuk itu dibuat kode program berikut di bagian Application_Launching untuk mendefinisikan

notification lock screen yang diambil dari tiles primary akan dalam keadaan kosong atau property Count

nya berjumlah 0 setiap aplikasi pertama kali dijalankan. Berikut adalah potongan kode program nya.

private void Application_Launching(object sender, LaunchingEventArgs e) { var tile = ShellTile.ActiveTiles.First();

20

var data = new FlipTileData { Count = 0, WideBackContent = "Tidak ada notifikasi" }; tile.Update(data); IsolatedStorageSettings.ApplicationSettings["counter"] = 1; IsolatedStorageSettings.ApplicationSettings.Save(); }

Count = 0 akan mereset notifikasi di dalam aplikasi kita agar menjadi kosong. Dan

IsolatedStorageSettings.ApplicationSettings["counter"] = 1 syntak yang kita persiapkan jika aplikasi

membutuhkan notifikasi. Kita menggunakan IsolatedStorage dikarenakan nilai counter tersebut

nantinya akan dipanggil oleh Background Agent. Dan berikut adalah potongan kode program di bagian

ScheduledAgent.cs yang telah dimodifikasi.

protected override void OnInvoke(ScheduledTask task) { ShellToast toast = new ShellToast(); toast.Title = "App"; toast.Content = "You Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification"; toast.Show(); ShellTile oTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("flip".ToString())); if (oTile != null && oTile.NavigationUri.ToString().Contains("flip")) { FlipTileData oFliptile = new FlipTileData(); oFliptile.Title = "Tiles Workshop"; oFliptile.Count = (int)IsolatedStorageSettings.ApplicationSettings["counter"]; oFliptile.BackTitle = "Tiles Workshop"; oFliptile.BackContent = "You Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification"; oFliptile.WideBackContent = "You Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification"; oFliptile.SmallBackgroundImage = new Uri("Assets/Tiles/small.png", UriKind.Relative); oFliptile.BackgroundImage = new Uri("Assets/Tiles/medium.png", UriKind.Relative); oFliptile.WideBackgroundImage = new Uri("Assets/Tiles/wide.png", UriKind.Relative); oFliptile.BackBackgroundImage = new Uri("/Assets/Tiles/medium1.png", UriKind.Relative); oFliptile.WideBackBackgroundImage = new Uri("/Assets/Tiles/wide1.png", UriKind.Relative); oTile.Update(oFliptile); }

21

var tile = ShellTile.ActiveTiles.First(); var data = new FlipTileData { Title = "Tiles Workshop", Count = (int)IsolatedStorageSettings.ApplicationSettings["counter"], BackTitle = "Tiles Workshop", BackContent = "You Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification", WideBackContent = "My App\nYou Have " + IsolatedStorageSettings.ApplicationSettings["counter"].ToString() + " Notification", SmallBackgroundImage = new Uri("Assets/Tiles/small.png", UriKind.Relative), BackgroundImage = new Uri("Assets/Tiles/medium.png", UriKind.Relative), WideBackgroundImage = new Uri("Assets/Tiles/wide.png", UriKind.Relative), BackBackgroundImage = new Uri("/Assets/Tiles/medium1.png", UriKind.Relative), WideBackBackgroundImage = new Uri("/Assets/Tiles/wide1.png", UriKind.Relative) }; tile.Update(data); IsolatedStorageSettings.ApplicationSettings["counter"] = (int)IsolatedStorageSettings.ApplicationSettings["counter"] + 1; IsolatedStorageSettings.ApplicationSettings.Save(); #if DEBUG_AGENT ScheduledActionService.LaunchForTest(task.Name, TimeSpan.FromSeconds(60)); #endif NotifyComplete(); }

Bagian berwarna biru adalah bagian untuk menampilkan toast notification. Bagian kuning adalah bagian

untuk mengupdate secondary tiles. Dan bagian hijau digunakan untuk mengupdate primary tiles. Yang

membedakan antara primary tiles adalah cara pengakses an primary tiles menggunakan kode :

var tile = ShellTile.ActiveTiles.First();

Untuk bagian di Application_Closing masih menggunakan kode yang sama pada saat menggunakan Flip

Template. Berikut adalah potongan kode program nya.

PeriodicTask periodicTask; string periodicTaskName = "PeriodicAgentTiles"; private void Application_Closing(object sender, ClosingEventArgs e) { if (!IsolatedStorageSettings.ApplicationSettings.Contains("counter")) { IsolatedStorageSettings.ApplicationSettings["counter"] = 1; IsolatedStorageSettings.ApplicationSettings.Save(); } periodicTask = ScheduledActionService.Find(periodicTaskName) as PeriodicTask;

22

if (periodicTask != null) { RemoveAgent(periodicTaskName); } periodicTask = new PeriodicTask(periodicTaskName); periodicTask.ExpirationTime = DateTime.Now.AddDays(14); periodicTask.Description = "This demonstrates a periodic task."; ScheduledActionService.Add(periodicTask); #if(DEBUG_AGENT) ScheduledActionService.LaunchForTest(periodicTask.Name, TimeSpan.FromSeconds(60)); #endif if (!periodicTask.IsScheduled || periodicTask.ExpirationTime < DateTime.Now) { periodicTask.ExpirationTime = DateTime.Now.AddDays(14); #if(DEBUG_AGENT) ScheduledActionService.LaunchForTest(periodicTask.Name, TimeSpan.FromSeconds(60)); #endif } }

Dan berikut adalah tampilan pada saat kode program dijalankan. Kita akan melakukan pin to start ke dua

buat tiles yaitu primary tiles dan secondary tiles. Primary tiles akan disimpan di atas dan secondry tiles di

bagian bawah. Untuk kode program secondry tiles masih sama dengan potongan kode program saat

membuat Flip Template.

Dari gambar diatas bisa dilihat lock screen notification mengambil data dari primary tiles.

23

Selain itu kita juga bisa mengganti background dari device kita yang kita set di dalam aplikasi kita.

Sebelumnya pastikan terlebih dahulu di WMAppManifest.xml di bagian extensions sudah terdapat item

berikut.

Jika sudah maka anda tinggal membuat button dan mengisikan kode program berikut.

private async void SetBackgroundClicked(object sender, RoutedEventArgs e) { if (await LockScreenManager.RequestAccessAsync() == LockScreenRequestResult.Granted) { var uri = new Uri("ms-appx:///Assets/wallpaper.png", UriKind.Absolute); LockScreen.SetImageUri(uri); } else { MessageBox.Show("You said no, so I can't update your background."); } }