Live Tiles

Live Tiles são blocos dinâmicos, de tamanhos ajustáveis, que o usuário pode fixar na tela inicial do sistema operacional Windows. Esses blocos disponibilizam atualizações com as informações mais importantes do aplicativo, seja ao exibir o placar de um aplicativo esportivo, previsão do tempo, agenda, notícias ou qualquer informação relevante para o usuário.

live_tiles_universal_apps_img_live_tiles
Live Tiles – Windows Phone
Live Tiles - Windows Desktop
Live Tiles – Windows Desktop

Mas porque usar Live Tiles? Simples. O fato do seu aplicativo ter um Live Tile permite uma ótima experiência visual. O app vai estar na tela inicial do dispositivo, tornando as informações visíveis para o usuário.

Você deve usar Live Tiles quando precisar mostrar informações que o usuário ainda não saiba e que seja importante para ele, como uma ligação perdida ou um compromisso do dia por exemplo. Caso opte por usar um modelo dinâmico, fique atento para as informações mais importantes do aplicativo, elas não devem sair do campo de visão do usuário. Na dúvida de qual Live Tile usar, acesse a Guideline aqui.

No Windows temos até 4 tamanhos de Live Tiles: pequeno, médio, wide e grande (somente desktop). Estes também possuem até 2 faces: frente e verso, que se alternam exibindo informações dos dois lados. Para ver todos os templates de Live Tile, acesse o catálogo de Live Tiles aqui.

Tamanho dos Live Tiles
Tamanho dos Live Tiles

Agora, vamos para um breve tutorial de como criar um projeto Universal Apps com Live Tile. Você verá que usaremos o mesmo código e criar Live Tiles para todos os dispositivos Windows 8.1 e posterior.

Vamos começar criando um projeto Universal Apps:

Criando um novo projeto Universal Apps
Criando um novo projeto Universal Apps

Escolha os Live Tiles nos tamanhos desejados e crie um arquivo com o XML dos Live Tile escolhidos (catálogo).

<tile>
    <visual version="3">
        <binding template="TileWide310x150ImageAndText01">
            <image id="1" src="img_310x150_blue.png" alt="alt text"/>
            <text id="1">Text Field 1</text>
        </binding>
        <binding template="TileSquare150x150Text02" fallback="TileSquareText02">
            <text id="1">Text Field 1</text>
            <text id="2">Text Field 2</text>
        </binding>
    </visual>
</tile>

Veja que nesse XML foi adicionado 2 Live Tiles, um Wide (TileWide310x150ImageAndText01) e um quadrado médio (TileSquare150x150Text02)

Criando um arquivo .xml fica mais fácil administrar os Live Tiles. Eles ficam concentrados em um arquivo separado, facilitando a manutenção do código.
É possível criar Live Tile sem usar XML, mas você ficará restrito a apenas um Live Tile, não podendo customizar vários tamanhos de uma só vez.

Agora para usar o Live Tile é simples, vamos pegar o nosso XML e criar o Live Tile:

var xmlFile = XElement.Load("Tile.xml");

XmlDocument xmldoc = new XmlDocument();
xmldoc.LoadXml(xmlFile.ToString());

TileNotification tileNotification = new TileNotification(xmldoc);

TileUpdateManager.CreateTileUpdaterForApplication().Clear();            
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
live_tiles_universal_apps_img_new_tile
Live Tile criado – Windows Phone
live_tiles_universal_desktop_apps_img_new_tile
Live Tile criado – Windows Desktop

Pronto, já está com o Live Tile configurado. Agora precisamos alterar o texto com as informações corretas:

var xmlFile = XElement.Load("Tile.xml");

XmlDocument xmldoc = new XmlDocument();
xmldoc.LoadXml(xmlFile.ToString());

// Change content of tile
foreach (IXmlNode node in xmldoc.GetElementsByTagName("text"))
{
    if (node.ParentNode.Attributes.GetNamedItem("template").InnerText == "TileWide310x150ImageAndText01")
    {
        if (node.Attributes.GetNamedItem("id").InnerText == "1")
        {
            node.InnerText = this.text1TextBox.Text;
        }
    }
    else if (node.ParentNode.Attributes.GetNamedItem("template").InnerText == "TileSquare150x150Text02")
    {
        if (node.Attributes.GetNamedItem("id").InnerText == "1")
        {
            node.InnerText = this.text1TextBox.Text;
        }
        if (node.Attributes.GetNamedItem("id").InnerText == "2")
        {
            node.InnerText = this.text2TextBox.Text;
        }
    }
}

TileNotification tileNotification = new TileNotification(xmldoc);

TileUpdateManager.CreateTileUpdaterForApplication().Clear();
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

Alteramos o conteúdo dos 2 Live Tiles do aplicativo, veja que o id é muito importante, pois por ele vamos conseguir chegar nos campos do Live Tile.

Live Tile atualizado
Live Tile atualizado

Cada Live Tile possui o seu XML especifico. Fique atento para escolher o que mais se encaixa com o seu app.

Para baixar o código fonte completo com exemplos de edição, criação e troca de template de Live Tile, clique aqui.

No próximo post vamos ver como adicionar um Secondary Live Tile e deixar o aplicativo ainda mais interessante.

Até a próxima.
#talkitbr
Imagem capa: “Nokia Lumia 930” by Kārlis Dambrāns, used under CC BY 2.0 / Cropped from original

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s