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

Publicado por ehrizoem

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

[twitter-follow screen_name=’eduardorizo’ show_count=’yes’]

Post relacionado:

Curso Windows Phone – Tópicos

30 comentários em “Curso Windows Phone – HubTile: Adicionando animação e informações à sua aplicação”

  1. Pingback: Curso Windows Phone – Tópicos « Blog do Eduardo H. Rizo

  2. Jean de Almeida diz:

    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….

    Responder
      1. jean de almeida diz:

        Somente mudar ícone q aparece qdo instala a app…e mudar o nome da app..nao consegui fazer isso…grato

  3. Ewerton diz:

    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á 🙂

    Responder
    1. Ewerton diz:

      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!

      Responder
      2. Ewerton diz:

        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?

      3. Eduardo H. Rizo diz:

        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 diz:

    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?

    Responder
      1. daniellllopes diz:

        Boa tarde, tudo sim. E com você?
        Eu havia feito isso, mas o problema, é que o Código C# não reconhece o HubTile, já que ele tá em um ItemTemplate do ListBox, assim não dá pra acessar as propriedades do HubTile. Aí não dá pra gerar uma LiveTile com o Title e Message da HubTile.

  5. Ulisses diz:

    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

    Responder
    1. Eduardo H. Rizo diz:

      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

      Responder
    1. Eduardo H. Rizo diz:

      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

      Responder
    1. Eduardo H. Rizo diz:

      Boa noite, tudo bom?
      Desculpe pela demora na resposta, mas ultimamente tenho estado bastante ocupado.
      Bem, para fazer uma Hubtile ficar do tamanho grande basta alterar a propriedade Size do elemento. Essa propriedade permite os tamanhos Small, Medium e Large.

      Abraços,
      Eduardo H. Rizo

      Responder
  10. sebastiao freitas diz:

    Ola, estou estudando windows phone 8, tentei fazer o exemplo dessa dica mas nao consegui implementar, simplesmente nao consegui atachar o codigo do silerlight, teria algum link para que eu estudasse essa parte?

    Outra coisa, queria na tela inicial do meu aplicativo colocar um mosaico e um dos retangulos (botao) fizesse uma transição entre 2 imagens, ora aparece uma, ora aparece outra..é isso que o hubtile faz?

    parabéns pelo material.

    Responder
    1. ehrizo diz:

      Bom dia Sebastião, tudo bom?

      Sim, com o Hubtile você pode ter esse efeito de transição de imagens e rotação nos botões.
      Não entendi a parte que você disse que não conseguiu “atachar” o código Silverlight…

      Abraços,
      Eduardo H. Rizo

      Responder
      1. sebastiao freitas diz:

        Olá, me refiro ao codigo do inicio do post : A seguir, coloco um trecho de código que exemplifica como criar os HubTiles via código Silverlight:

        Esse código fica na pagina XAML? outr dúvida professor, no winsdows phone 8.1 esse controle é o mesmo que vem como padrao na toolbox como o nome de Hub ou ele so aparece depois q instala o tookit?
        grato.

  11. sebastiao freitas diz:

    Professor, bom dia!
    O sr. poderia me ajudar a entender e adicionar esse recurso? Estou usando o Vs 2015 Community + windows phone 8.1 e não consigo instalar esse toolkit, ele funcionar nessa versao do VS? Achei como fazer esse efeito nas Live Tiles, mas elas sao somente para tela inicial do Windows Phone e quero na tela inicial da minha aplicacao.

    Grato pela atenção

    Responder
    1. sebastiao freitas diz:

      Ola, vi que não funciona no windows phohe 8.1 entao acabei criando um control personalizado para fazer o efeito…quem não tem cão, caça com gato, o importante é não perder a caça.

      Responder

Deixe um comentário