Trabalhando com Live Tiles no Windows Phone

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja neste artigo como utilizar um dos recursos mais interessantes no Windows Phone, os Live Tiles, que são blocos dinâmicos na tela inicial.

Live Tiles são blocos dinâmicos com uma função importantíssima no Windows Phone, são esses blocos que dão vida à tela inicial do aparelho, trazendo as novidades dos aplicativos em tempo real, sendo um grande diferencial nesta plataforma e muito útil em diversas situações.

Nokia Lumia 925 com Windows Phone 8

Figura 1: Nokia Lumia 925 com Windows Phone 8

Esses blocos dinâmicos podem mudar totalmente a opinião do usuário em relação ao aplicativo, e mesmo um excelente aplicativo que não tenha Live Tiles receberá várias críticas quanto ao não aproveitamento do recurso oferecido pelo Windows Phone.

Vamos supor que dois aplicativos com o mesmo objetivo e bem parecidos estejam publicados na loja do Windows Phone, sendo que um possui Live Tiles dinâmicos trazendo informações ao usuário e a outra com um Tile fixo. Pode ter certeza que a aplicação com o Live Tile dinâmico receberá mais elogios e terá um maior número de downloads do que a outra.

O Windows Phone possui 3 tamanhos de Live Tiles: pequeno, médio e grande. E estes também possuem dois lados: frente e verso que ficam se alternando mostrando as informações relevantes do aplicativo para o usuário. E ainda mais, é possível criar diversas Live Tiles a partir de um mesmo aplicativo. Por exemplo, um aplicativo de um delivery online, você teria o Live Tile mostrando as promoções do dia e disponibilizaria ao usuário a possiblidade de fixar um Live Tile do seu prato preferido, funcionando como um atalho indo diretamente para o prato.

Funcionamento dos Live Tiles

Todo aplicativo para Windows Phone obrigatoriamente tem um Live Tile, por mais que o desenvolvedor não queira utilizar os recursos de atualização ou Live Tile secundário, é necessário pelo menos um Live Tile fixo, com uma imagem que seria o ícone do aplicativo.

Como desenvolvedor, você sempre deve dar prioridade a criar um aplicativo aproveitando tudo que esses blocos dinâmicos tem a oferecer, mantendo-os assim sempre fixados na tela inicial pelos usuários.

Neste artigo será utilizada como exemplo uma aplicação que exibirá três botões, cada um com uma funcionalidade distinta para ser utilizada em Live Tiles no Windows Phone.

Crie um projeto do tipo Windows Phone App no Visual Studio chamado LiveTileApp, conforme a Figura 2.

Criação do projeto LiveTileApp no Visual Studio 2012

Figura 2: Criação do projeto LiveTileApp no Visual Studio 2012

Ao criar o projeto é exibida uma caixa com a opção de escolha da versão do Windows Phone, escolha a 7.1, pois assim o seu aplicativo funcionará em todas as versões de Windows Phone disponíveis. A primeira coisa a ser feita é criar o layout do nosso aplicativo, que conterá 3 botões que terão as seguintes funções:

  • Criar Live Tile secundário
  • Excluir Live Tile secundário
  • Atualizar Live Tile principal

Abra o arquivo MainPage.xaml e no ContentPanel adicione os controles conforme a Listagem 1.

Listagem 1: Criando o layout da aplicação na MainPage.xaml

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Width="450" Height="270" Background="LightGreen">
		<Button Width="450" Height="80" Margin="0,0,0,10"
		Content="Criar Bloco Secundário" Name="btnCriarLiveTileSecundaria"
		Click="btnCriarLiveTileSecundaria_Click" />
                <Button Width="450" Height="80" Margin="0,0,0,10"	
		Content="Excluir Bloco Secundário" Name="btnExcluirLiveTileSecundaria"
		Click="btnExcluirLiveTileSecundaria_Click" />
                <Button Width="450" Height="80" Margin="0,0,0,10"
		Content="Atualizar Bloco Principal" Name="btnAtualizarLiveTilePrincipal"
		Click="btnAtualizarLiveTilePrincipal_Click" />
	</StackPanel>
</Grid> 

Agora os eventos de cliques dos botões devem ser tratados na classe da página, então abra o arquivo MainPage.xaml.cs no Solution explorer e adicione no topo a referência para Microsoft.Power.Shell. O método btnCriarLiveTileSecundaria_Click será responsável pela criação de um Live Tile novo do aplicativo, btnExcluirLiveTileSecundaria_Click será responsável por remover o Live Tile da tela principal, e por último, o método btnAtualizarLiveTilePrincipal_Click será responsável por atualizar o Live Tile principal do aplicativo.

Listagem 2: Código do arquivo MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace LiveTileApp
{
	public partial class MainPage : PhoneApplicationPage
	{
		// Constructor
		public MainPage()
		{
			InitializeComponent();
		}

		private void btnCriarLiveTileSecundaria_Click(object sender,
		RoutedEventArgs e)
		{
			ShellTile tile = ShellTile.ActiveTiles.
			FirstOrDefault(t => t.NavigationUri.ToString().Contains("Artigos=Devmedia"));

			if (tile == null)
			{
				StandardTileData tileData = new StandardTileData()
				{ Title = "Artigos WP", Count = 3 };
				ShellTile.Create(new Uri("/MainPage.xaml?Artigos=Devmedia",	
				UriKind.Relative), tileData);
			}
		}

		private void btnAtualizarLiveTilePrincipal_Click(object sender, RoutedEventArgs e)
		{
			ShellTile tile = ShellTile.ActiveTiles.First();

			if (tile != null)
			{
				StandardTileData tileData = new StandardTileData()
				{	
					Title = "WindowsPhoneCarioca",
					Count =	 1,	
					BackTitle = "WPCarioca",
					BackContent = "Blog Windows Phone Carioca"
				};
				tile.Update(tileData);
			}
		}

		private void btnExcluirLiveTileSecundaria_Click(object sender, RoutedEventArgs e)
		{
			ShellTile tile = ShellTile.ActiveTiles.
			FirstOrDefault(t => t.NavigationUri.ToString().Contains("Artigos=Devmedia"));

			if (tile != null)
			{
				tile.Delete();
			}
		}
	}
} 

Observação: Para que você possa atualizar o Live Tile principal, ele deve estar fixado previamente pelo usuário.

Pressione F5 e teste a aplicação.

Aplicação em funcionamento e Live Tiles na tela inicial

Figura 3: Aplicação em funcionamento e Live Tiles na tela inicial

Um abraço e até o próximo artigo.

Leia também

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?