A utilização de toast notifications em aplicativos para a Windows Store faz com que o seu app fique com uma experiência mais rica. No mês passado, no artigo sobre a utilização de APIs do WinRT em aplicações desktop que eu publiquei no meu blog pessoal, eu mostrei justamente como exibir uma toast notification em projetos Windows Forms ou WPF. Exibir toast notifications em aplicativos para a Windows Store é muito mais fácil, e esse é o assunto do artigo de hoje.

As classes responsáveis pela exibição de toast notifications no WinRT ficam no namespace “Windows.UI.Notifications“. Mais especificamente, as classes ToastNotificationManager, ToastNotification e ScheduledToastNotification.

Para entendermos como funciona a exibição de toast notifications em aplicativos para a Windows Store, primeiramente vamos criar um projeto do tipo “Blank App“, que fica dentro da categoria “Store Apps” => “Windows Apps“:

Na MainPage do projeto que acabamos de criar, dentro do Grid que é criado automaticamente pelo Visual Studio, adicione um StackPanel e, dentro desse StackPanel, adicione um TextBox e um Button, conforme o código XAML abaixo:
[code language=”xml”] <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="50">
<TextBox x:Name="TextoNotificationTextBox"
Header="Texto para a Toast Notification"
Width="400"
HorizontalAlignment="Left"/>
<Button x:Name="ExibirToastButton"
Content="Exibir Toast Notification"
Width="400"
HorizontalAlignment="Left"
Click="ExibirToastButton_Click" />
</StackPanel>
</Grid>
[/code]

O resultado deve ficar parecido com a imagem abaixo:

Uma vez ajustada a UI, vamos partir para o código que será executado ao clicarmos no botão “Exibir Toast Notification“. Vá para o code-behind da MainPage e adicione o seguinte método:
[code language=”csharp”] private void ExibirToastButton_Click(object sender, RoutedEventArgs e)
{
var template = Windows.UI.Notifications.ToastNotificationManager.GetTemplateContent(Windows.UI.Notifications.ToastTemplateType.ToastText02);

var texto1 = template.GetElementsByTagName("text")[0];
texto1.AppendChild(template.CreateTextNode("Toast Notification 100loop!"));
var texto2 = template.GetElementsByTagName("text")[1];
texto2.AppendChild(template.CreateTextNode(TextoNotificationTextBox.Text));

var toast = new Windows.UI.Notifications.ToastNotification(template);
var notifier = Windows.UI.Notifications.ToastNotificationManager.CreateToastNotifier();
notifier.Show(toast);
}
[/code]

Note que o procedimento para exibir uma toast notification é muito simples. Primeiramente temos que utilizar o método GetTemplateContent da classe ToastNotificationManager para criar o template que terá a representação dos atributos da toast notification (que nada mais é do que um XML). No exemplo acima utilizamos o template chamado “ToastText02“, que é uma toast notification contendo um título e duas linhas de texto com quebra automática de linha. Para conferir todas as possibilidades de templates para toast notifications, confira o catálogo na documentação do MSDN.

Uma vez criado o template baseado em uma das opções do catálogo de toast notifications, precisamos adicionar no XML do template o conteúdo que queremos exibir na toast notification. O templateToastText02” contém duas tags chamadas “text“. Na primeira tagtext” devemos colocar o título da toast notification e na segunda tagtext” devemos colocar o conteúdo que deverá ser exibido nas outras duas linhas da notificação. No nosso exemplo, utilizamos o texto “Toast Notification 100loop!” como o título da toast notification e o conteúdo digitado na “TextNotificationTextBox” como o conteúdo restante da notificação.

Após termos preparado o template, incluindo o conteúdo que queremos exibir na notificação, temos que criar uma instância de ToastNotification passando o template criado anteriormente. Além disso, precisamos criar uma instância de ToastNotifier, que é a classe responsável por disparar a notificação. Para criar um ToastNotifier, utilizamos o método CreateToastNotifier da classe ToastNotificationManager.

Finalmente, o último passo necessário para exibir a toast notification é chamar o método Show do ToastNotifier, passando a ToastNotification criada anteriormente.

Execute o aplicativo, digite algum conteúdo no TextBox e clique no botão “Enviar Toast Notification“. Então você deve se perguntar: por que não funcionou? Porque, por padrão, os aplicativos para a Windows Store não têm permissão de exibir toast notifications. Para que o aplicativo possa exibir toast notifications é necessário alterar uma configuração no manifesto da aplicação. Portanto, abra o manifesto (Package.appxmanifest) e, na aba “Application“, altere a configuração “Toast capable” para “Yes“:

Feito isso, execute novamente e aplicação e faça o mesmo procedimento que você tinha feito anteriormente. Dessa vez, a toast notification deve ser exibida com sucesso.

Exibindo uma imagem na Toast Notification

Caso você escolha um template de toast notification que contenha uma imagem (como, por exemplo, o templateToastImageAndText02“), você pode configurar a imagem de três maneiras: apontando para uma imagem anexada ao projeto, apontando para uma imagem armazenada na local storage ou apontando para uma URL externa.

Para apontar para uma imagem anexada ao projeto, adicione o seguinte código no processo de criação do template:
[code language=”csharp”] var imagem = template.GetElementsByTagName("image");
((Windows.Data.Xml.Dom.XmlElement)imagem[0]).SetAttribute("src", "ms-appx:///assets/logo-100loop-nova-quadrada.png");
[/code]

No exemplo acima eu estou apontando para a imagem “logo-100loop-nova-quadrada.png“, localizada dentro do diretório “Assets“.

Para apontar para uma imagem armazenada na local storage, substitua a parte “ms-appx:///” por “ms-appdata:///local/“, seguida pelo nome do arquivo armazenado que está armazenado na local storage. Por exemplo:
[code language=”csharp”] var imagem = template.GetElementsByTagName("image");
((Windows.Data.Xml.Dom.XmlElement)imagem[0]).SetAttribute("src", "ms-appdata:///local/logo-100loop-nova-quadrada.png");
[/code]

Já para apontar para uma URL, basta utilizar a própria URL como conteúdo da tagsrc“:
[code language=”csharp”] var imagem = template.GetElementsByTagName("image");
((Windows.Data.Xml.Dom.XmlElement)imagem[0]).SetAttribute("src", "http://andrealveslima.com.br/files/imagens/AvatarMiniQuadrado.png");
[/code]

Configurando o tempo de duração da Toast Notification

Por padrão, todas as toast notifications exibidas pelos aplicativos para a Windows Store permanecem na tela por sete segundos. Caso você queira aumentar esse tempo para 25 segundos, basta configurar o atributo “duration” no template da toast notification para “long“, conforme você pode conferir abaixo:
[code language=”xml”] Windows.Data.Xml.Dom.IXmlNode toastNode = template.SelectSingleNode("/toast");
((Windows.Data.Xml.Dom.XmlElement)toastNode).SetAttribute("duration", "long");
[/code]

Escolhendo um som diferente para a Toast Notification

É possível alterar o som que será reproduzido pela toast notification. Não dá para escolher qualquer som, mas, dá para optar entre uma variedade de sons disponíveis no catálogo de sons para toast notifications. Por exemplo, para fazer com que o som da toast notification seja como o de um e-mail chegando na caixa de entrada, é só configurar a tag “audio“, propriedade “src” como “ms-winsoundevent:Notification.Mail“. Veja o exemplo abaixo:
[code language=”xml”] Windows.Data.Xml.Dom.IXmlNode toastNode = template.SelectSingleNode("/toast");
Windows.Data.Xml.Dom.XmlElement audio = template.CreateElement("audio");
audio.SetAttribute("src", "ms-winsoundevent:Notification.Mail");
toastNode.AppendChild(audio);
[/code]

Concluindo

Para deixar o seu aplicativo mais refinado, não custa nada utilizar toast notifications ao notificar o usuário sobre algum acontecimento no aplicativo. E, como você pode ver nesse artigo, o processo é muito simples. Não perca tempo e implemente o suporte a toast notifications nos seus projetos de aplicativos para a Windows Store (ou até mesmo em aplicativos desktop como eu mostrei no meu blog pessoal).

Espero que vocês tenham gostado desse artigo. No próximo mês eu volto com mais algum exemplo relacionado ao desenvolvimento de aplicativos para a Windows Store. Caso você tenha interesse em outros tópicos relacionados ao desenvolvimento para a plataforma Microsoft, sugiro que você visite o meu site.

Até a próxima!

André Lima