Curso Windows Phone – HubTile: Adicionando animação e informações à sua aplicação

Windows Phone - HubTileOlá pessoal, tudo bom?

Basicamente, o HubTile é um controle que te permite adicionar um pouco de animação e ao mesmo tempo informação à sua aplicação. Um HubTile pode conter imagens, títulos, mensagens e notificações e podem ser agrupados sob um determinado tema a partir da propriedade GroupTag.

Para utilizar o HubTile é necessário instalar a Toolkit do Silverlight for Windows Phone e referenciá-la ao seu projeto. Veja o exemplo:


xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

A seguir, coloco um trecho de código que exemplifica como criar os HubTiles via código Silverlight:

...
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <toolkit:HubTile x:Name="Hub1" Source="Imagens/arquivos.png" Title="HubTile 1" Message="Mensagem do Hub 1" Margin="12,6,272,428" Tap="Hub1_Tap" />
   <toolkit:HubTile x:Name="Hub2" Source="Imagens/balao-conversa.png" Title="HubTile 2" Message="Mensagem do Hub 2" Margin="204,6,79,428" Tap="Hub2_Tap" />
   <toolkit:HubTile x:Name="Hub3" Source="Imagens/calculadora.png" Title="HubTile 3" Message="Mensagem do Hub 3" Margin="12,197,271,237" />
   <toolkit:HubTile x:Name="Hub4" Source="Imagens/lampada.png" Title="HubTile 4" Message="Mensagem do Hub 4" Margin="204,197,79,237">
   <toolkit:ContextMenuService.ContextMenu>
      <toolkit:ContextMenu x:Name="menu">
         <toolkit:MenuItem Header="pin to start" Tap="MenuItem_Tap"/>
      </toolkit:ContextMenu>
   </toolkit:ContextMenuService.ContextMenu>
   </toolkit:HubTile>
</Grid>
...

Repare que o HubTile 1, 2 e 4 possuem chamadas a métodos que controlam o gesto Tap do usuário. O HubTile 4, em particular, exibe um menu de contexto para executar a ação “pin to start” no Tile e adicioná-lo à tela principal do seu Windows Phone.
Veja os métodos:

private void Hub1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   MessageBox.Show("Tap no HubTile 1");
}

private void Hub2_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   Hub3.Message = "Nova mensagem";
   Hub3.Title = "Title";
}

private void MenuItem_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   CreateLiveTile(Hub4);
}

private void CreateLiveTile(HubTile hubtile)
{
   StandardTileData LiveTile = new StandardTileData
   {
      BackBackgroundImage = ((BitmapImage)hubtile.Source).UriSource,
      Title = hubtile.Title,
      BackTitle = hubtile.Title,
      BackContent = hubtile.Message
   };
   ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DefaultTitle=" + LiveTile.Title));
   if (tile == null)
      ShellTile.Create(new Uri("/HubTiles.xaml?DefaultTitle=" + LiveTile.Title, UriKind.Relative), LiveTile);
   else
      MessageBox.Show("Esse Tile já foi \"pinado\"");
}

Espero que esse post possa lhe ajudar a melhorar a usabilidades das suas aplicações.
Grande abraço,
Eduardo Henrique Rizo

Post relacionado:

Curso Windows Phone – Tópicos

Anúncios

Coordenador de Internet da Universidade do Oeste Paulista (Unoeste) e professor universitário de disciplinas relacionadas ao desenvolvimento de sistemas para Web, gerenciamento de servidores, serviços e redes.

Marcado com: , , , ,
Publicado em Windows Phone
25 comentários em “Curso Windows Phone – HubTile: Adicionando animação e informações à sua aplicação
  1. […] Windows Phone – HubTile: Adicionando animação e informações à sua aplicação […]

  2. Jean de Almeida disse:

    Olá professor, fui aluno da FIPP, me formei em 2006, parabens pelo blog, estou desenvolvendo tambem para windows phone visual studio 2012, sabe me dizer como muda o icone da app….Desde já muito obrigado !!! Grande abraço a todos da FIPP….

  3. Ewerton disse:

    http://sdrv.ms/1d5C5Uk

    No link acima é possível ver um print de uma aplicação para windows phone!
    Eu editei ela no paint (o quadrinho vermelho)
    Como eu faria aquela tarja via código no wp

    Com Hub eu conseguiria ?
    Ou tem outro jeito melhor ?

    Grato desde já 🙂

    • Ewerton disse:

      ah e aparecesse esta mensagem igual na imagem e depois de uns 3 segundos sumisse.

      Ou se tivesse uma maneira também de o MessageBox.show(“”);
      Dele aparecesse SEM o BOTÃO ok e depois sumisse seria também legal!

      • Pensei em algo simples.
        Você poderia usar um Rectangle para fazer o quadro e posiciona-lo no topo da tela, depois através do uso das propriedades de visibilidade fazer com que ele apareça ou não de acordo com a tua lógica. O que acha?
        Há um post no meu blog que mostra como criar esses retângulos (https://ehrizo.wordpress.com/2012/03/22/curso-windows-phone-manipulando-eventos-de-gestos-gestures/)

        []s
        Eduardo

      • Ewerton disse:

        Eu até tentei ontem fazer isto
        Mas como eu faria para colocar um controle dentro do retângulo.
        Eu tentei por exemplo colocar um textblock!

        Como eu faria isto
        Pois ainda tenho de fazer o seguinte

        ° deixar o retangulo invisivel (com um textblock)
        ° quando for mostrar o retangulo
        mudar a cor dele
        mudar o texto do textblock
        ° depois mostrar o retangulo MAS depois de 3 ou 2 segundos ele sumir (ficar invisivel)

        Para mim o problema que eu estou vendo é colocar um controle dentro do retangulo
        e a questão de sumir depois de alguns segundos

        Teria como você me ajudar nisto?

      • Ewerton, tudo bom?
        Nesse caso creio que fosse melhor você usar um container …. pois aí você ficaria livre para adicionar dentro dele quaisquer tipos de controles e realizar quaisquer tipos de formatações. Para o posicionamento na tela bastaria ajustar a propriedade margin do Grid. Certo?

  4. daniellllopes disse:

    Olá, Eduardo.
    Caso eu queria fixar um HubTile que é gerado a partir de um ItemTemplate em um ListBox, como faço pra fixa-lo no iniciar?

  5. Ulisses disse:

    Olá mestre!

    Como faço para usar a toolkit com o Visual Studio 2013?

    No Visual Studio 2012, quando faço a referência a toolkit xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”

    funciona normalmente, mas no VS 2013 essa referência não aparece. Por exemplo, não consigo usar no arquivo xaml o código

    Observação: No VS 2013, aparece outras referências da toolkit.

    Obrigado, abraços

    • Bom dia Ulisses, tudo bom?

      Bem, uma alternativa que sempre funciona é adicionar a Toolkit através do XXX
      Para isso, faça o seguinte: Abra seu projeto Windows Phone no Visual Studio -> Clique sobre o menu TOOLS -> Escolha a opção NuGet Package Manager e depois clique sobre Package Manager Console.
      Na janela que se abre (Package Manager Console), digite o seguinte comando: Install-Package WPToolkit

      Repare que depois da instalação, a referência da toolkit já estará colocada em seu projeto WP, ou seja, agora é só declarar o XML Namespace (xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”) na página XAML que você deseja usar e pronto.

      Abraços,
      Eduardo H. Rizo

  6. Ulisses disse:

    Boa noite professor!

    Deu certo, muito obrigado!

  7. Professor, tem como mudar o tamanho da tile?

    • Bom dia, tudo bom?

      Nunca vi nada a respeito. Dei uma pesquisada e também não encontrei uma forma de fazer isso via C#.
      Vamos fazer o seguinte: Explique melhor seu contexto para eu tentar ajudar em algo.

      Abraços,
      Eduardo H. Rizo

  8. ola, eu gostaria de fazer uma tile retangular igual a tile grande do WP 8 mas com a animaçao do Hub Tile …

  9. Em uma pagina dentro da App… 🙂

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

Erro: o Twitter não respondeu. Por favor, aguarde alguns minutos e atualize esta página.

Sorocaba e Região
Prestadora de serviços RIZZO GS - Sorocaba/SP

Serviços de limpeza, conservação, recepção, copa, portaria, vigia, zeladoria, jardim, elétrica, hidráulica, pintura, etc.

Contato: (15) 3357-4263 / (15) 3357-4502 - contato@rizzogs.com.br

Website: http://www.rizzogs.com.br

%d blogueiros gostam disto: