Tiles and Lock Screen Notifications

Kevin Kurniawan

Tiles

Flip Template Iconic Template Cycle Template

Tiles (Flip Template)

Tiles (Iconic Template)

Tiles (Cycle Template)

TilesTile 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

Tiles

Windows Phone memiliki 2 buah tipe tiles yaitu : Primary Tiles Secondary Tiles

Cycle Tile Template

Cycle Tile Template

Cycle Tile Template

Cycle Tile Template

Cycle Tile Templateprivate 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);}else{

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

}}

Cycle Tile Template

Iconic Tile Template

Iconic Tile Template

Iconic Tile Template

Iconic Tile Template

Iconic Tile Templateprivate 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{

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

}

Iconic Tile Template

Flip Template

Flip Template

Flip Template

Flip Templateprivate 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 tileUri tileUri = new Uri("/MainPage.xaml?tile=flip", UriKind.Relative);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)

};}

Flip Template

Updating Tiles From a Background Agent

Demo

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

Lock Screen Notifications

Lock Screen Notifications

Lock Screen Notifications

Assets\LockIcon.png

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.

Lock Screen Notifications

private void Application_Launching(object sender, LaunchingEventArgs e){

var tile = ShellTile.ActiveTiles.First();var data = new FlipTileData{

Count = 0,WideBackContent = "Tidak ada notifikasi"

};tile.Update(data);

IsolatedStorageSettings.ApplicationSettings["counter"] = 1;IsolatedStorageSettings.ApplicationSettings.Save();

}

Updating Tiles and Lock Screen Notification From a Background Agent

Demo

Background

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.");}

}