6 11 2013

Olá caro(a) leitor(a)! Seja bem vindo(a) a mais um artigo neste pequeno e humilde blog!

No artigo de hoje quero retomar um tema sobre o qual já escrevi no passado: Flyouts de settings em aplicativos para a Windows Store. Se você leu o outro artigo que escrevi (e caso não tenha lido ainda, sugiro que dê uma olhada antes de continuar com este artigo de hoje), com certeza vai se lembrar da gambiarra que era necessária para exibir um Flyout de settings em aplicativos para a Windows Store do Windows 8. Basicamente tínhamos que construir um UserControl, elaborar todo o estilo desse UserControl de forma que ele ficasse parecendo com um Flyout de settings. Além disso, tínhamos que criar um Popup para exibir esse UserControl no local correto e lidar com toda a sistemática de exibir o Flyout quando ele fosse invocado e escondê-lo quando o usuário clicasse no botão de voltar.

Obviamente essa experiência de desenvolvimento não era nem um pouco intuitiva, muito menos prática. Por isso, já era de se esperar que a Microsoft fosse resolver essa deficiência em uma versão futura da plataforma, e foi isso que ela fez no Windows 8.1. Agora temos um novo controle disponível ao desenvolvermos aplicativos para a Windows Store do Windows 8.1, que é o controle de SettingsFlyout. Ele substitui o UserControl que tínhamos que criar no passado. Esse controle já tem um título, o botão de voltar, e lida automaticamente com todas as animações necessárias, além de respeitar automaticamente o tema do sistema. Agora vamos ver como tudo ficou mais simples na nova versão, e, para isso, vamos recriar o exemplo daquele outro artigo utilizando as novas ferramentas disponíveis.

Utilizando o Windows 8.1 e o Visual Studio 2013, crie um novo projeto do tipo “Blank App” para a Windows Store. Após criar esse projeto, escolha a opção “Add new item” e veja que agora uma das novas opções disponíveis é o controle de “Settings Flyout”:

Escolha o nome de AboutFlyout e clique no botão “Add” para adicionar um novo Settings Flyout ao projeto. Veja que o controle adicionado já segue os padrões de um Flyout de settings que você provavelmente está acostumado a ver em aplicações para a Windows Store:

A parte superior do controle Settings Flyout é fixa. Essa seção já vem com um botão de voltar (e toda a implementação de sua funcionalidade), um título e uma imagem. Você pode alterar o título através da propriedade Title e a imagem através da propriedade IconSource. Você tem duas opções para alterar essas propriedaes: utilizando a janela de propriedades ou alterando-as diretamente no XAML:

Agora que já temos o nosso controle AboutFlyout, vamos adicioná-lo à página de configurações da nossa MainPage. A maneira de fazer isso é bem parecida com a do outro artigo, porém, agora não precisamos mais da classe FlyOutHelper que criamos no outro artigo. Basta adicionar um handler para o evento Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested e adicionar um SettingsCommand que vai exibir o nosso controle AboutFlyout:

        public MainPage()
        {
            this.InitializeComponent();
            Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested;
        }

        public void Settings_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
        {
            args.Request.ApplicationCommands.Clear();

            Windows.UI.ApplicationSettings.SettingsCommand command = new Windows.UI.ApplicationSettings.SettingsCommand("AboutPage", "About", (commandHandler) => new AboutFlyout().Show());
            args.Request.ApplicationCommands.Add(command);
        }

Pronto! Execute a aplicação e veja que ela se comporta exatamente como o exemplo do outro artigo, porém, utilizando muito menos linhas de código!

É isso aí! Espero que tenham gostado dessa forma mais simples de exibirmos Flyouts de settings nas nossas aplicações para a Windows Store do Windows 8.1! Lembrando que este exemplo está disponível em um novo repositório no meu GitHub (e no futuro espero colocá-lo também na MSDN Code Gallery).

Até a próxima semana!

André Lima

RescueTime: Uma ferramenta que vai te ajudar a descobrir onde você está “investindo” seu tempo Controle de Hub no Windows 8.1