Criar seu primeiro aplicativo da Windows Store com o Blend, parte 1: a página mestra (XAML e C#)

Artigo
06/05/2015

Você pode desenvolver um aplicativo da Windows Store com mais rapidez e eficiência usando as ferramentas de design XAML do Blend for Visual Studio. Como você conduz com este tutorial, será possível compilar um aplicativo simples, PickaFlick, em que você pode procurar uma lista de novos filmes. A lista é gerada por uma API da Rotten Tomatoes. Se você deseja concluir este tutorial, deve se registrar para obter uma chave de API que será colada no código.

Além disso, você precisará uma versão completa ou de avaliação do Microsoft Visual Studio Professional, Premium ou Ultimate para instalar o NuGet, que é necessário para concluir este tutorial. O NuGet não está disponível para o Visual Studio Express, e uma licença de desenvolvedor da Windows Store válida.

A home page do aplicativo PickaFlick

Aplicativo do Blend PickaFlick

Na parte 1 deste tutorial, será criada a home page do aplicativo. Ao longo do projeto, você aprenderá como:

Ao baixar esse projeto da galeria de amostras, você pode examinar não apenas o código, mas também todos os seus ativos, para que seja possível acompanhar e compilar o projeto à medida que avança.

Nenhuma experiência com XAML ou C# é necessária para concluir este tutorial. Entretanto, para ser bem-sucedido com o Blend, é útil ter um nível intermediário de experiência com XAML e C#.

Criar um projeto com base em um modelo de projeto

Blend e Visual Studio fornecem os mesmos modelos de projeto que ajudam a iniciar o desenvolvimento de seu aplicativo da Windows Store. Para obter mais informações sobre modelos que Blend e Visual Studio oferecem para o desenvolvimento de outros tipos de aplicativos, veja Modelos para acelerar o desenvolvimento de seu aplicativo.

Para criar um projeto

Em Blend, no menu File, clique em New Project.

Na caixa de diálogo New Project, é exibida uma lista de tipos de projetos no lado esquerdo. Quando você clica em um tipo de projeto, os modelos de projeto associados a ele aparecem do lado direito.
Na lista de tipos de projetos, clique em XAML (Windows Store).
Na lista de modelos de projetos, clique em Aplicativo em Branco (XAML).
Na caixa de texto Name, digite PickaFlick.
Na caixa de texto Location, verifique a localização do projeto.
Na lista Linguagem, clique Visual C#.
Na lista Versão, clique em 8.1. Clique em OK.

Exibir como a Interface de Usuário do Blend altera seu aplicativo

O espaço de trabalho padrão no Blend proporciona uma interface visual para a compilação de aplicativos da Windows Store: a superfície de design, os painéis, as configurações de espaço de trabalho, as exibições de autoria e os menus. Para obter mais informações, consulte Espaço de trabalho para aplicativo do Blend (XAML).

Quando você estiver trabalhando em um projeto, as alterações feitas em uma área do aplicativo são refletidas em toda a interface.

No canto superior esquerdo, clique na guia Projects para ver os arquivos e as pastas gerados automaticamente ao criar um projeto do modelo Blank App:

Referências Contém referências e arquivos de projeto, como arquivos DLL.
Ativos Contém ativos de projeto, incluindo os ativos de imagem padrão para o aplicativo da Windows Store.
Propriedades Contém informações de assembly gerais.
App.xaml Declara recursos compartilhados e manipula eventos de nível de aplicativo global. O App.xaml é necessário para exibir a interface do usuário.
MainPage.xaml A página inicial padrão do aplicativo.
package.appxmanifest Contém metadados que descrevem seu aplicativo, incluindo nome para exibição, logotipos, descrição de aplicativo, declarações, recursos e pacote de implantação.

Painel de projetos de mesclagem

Para obter mais informações, consulte Painel Projetos (XAML).

Abaixo do painel Projetos, no canto inferior esquerdo da interface, fica o painel Objetos e Linha do Tempo. O painel Objetos e Linha do Tempo mostra a estrutura de MainPage.xaml.

O painel Objetos e Linha do Tempo fornece um modo de exibição da hierarquia de objetos da página em que você está trabalhando. Trabalhando diretamente no painel Objetos e Linha do Tempo, é possível alterar de maneira rápida e fácil a hierarquia de objetos conforme você avança.

Para obter mais informações, consulte Painel Objetos e Linha do Tempo (XAML).

Com o projeto aberto no modo de exibição Divisão, você pode ver a superfície de design e o código para MainPage.xaml ao mesmo tempo. Quando você faz alterações nos elementos exibidos na superfície de design, o código é atualizado automaticamente. Se o código para MainPage.xaml não aparecer, clique no ícone do modo de exibição Divisão, no canto superior direito da superfície de design.

Nesse procedimento, você adicionará uma cor do plano de fundo a MainPage.xaml e verificará se o código foi atualizado enquanto você trabalha.

Para alterar o plano de fundo de MainPage.xaml

No painel Objetos e Linha do Tempo, clique em Grid.
No painel Propriedades, na categoria Pincel, clique no ícone Pincel de cor sólida .
Na caixa de texto Hex value, digite #D5BF9A e pressione Enter.

A marca Grid no modo de exibição de código agora contém o atributo Background="#FFD5BF9A" (o valor Alpha usa o padrão 100% ou FF) e a nova cor do plano de fundo é exibida na superfície de design.

Adicionar imagens ao projeto

O aplicativo PickaFlick é compilado com as imagens criadas por um designer gráfico. Além de adicionar interesse visual, a imagem ChickenSprite também serve como botão, que o usuário clica para iniciar o aplicativo.

As imagens a seguir são incluídas com o projeto de exemplo:

ChickenSprite
FilmStrip
MainLogo
SmallLogo-Galinha
Temp

É possível adicionar as imagens ao projeto:

Usando o comando Adicionar Item Existente, no menu Projeto.
Copiando e colando
Arrastando e soltando

Neste exemplo, você copiará e colará as imagens.

Para adicionar imagens ao projeto

Se você baixou o projeto exemplo, abra a pasta PickaFlick Assets, pressione Ctrl+A e Ctrl+C.
No Blend, no painel Projetos, clique com o botão direito na pasta Ativos e clique em Colar.

Agora, é possível adicionar imagens à superfície de design para estilizar o aplicativo.

Estilizar imagens e elementos

Há três imagens que compõem a exibição visual de MainPage.xaml: o logotipo (o escudo), a imagem de plano de fundo (a película de filme verde) e o botão (a galinha). Cada uma dessas imagens é implementada de maneira diferente. A primeira, o logotipo (MainLogo.png), é um controle Image simples. A segunda, a película de filme (FilmStrip.png) é uma imagem estreita que é repetida para dar a aparência de uma imagem muito maior. A película de filme é implementada usando o código C# do tempo de execução. A terceira imagem, o botão da galinha (ChickenSprite.png) começa com um controle Image, mas se transformará em um controle Button usando a opção Transformar em Controle.

Ao criar um aplicativo, você modifica a aparência dele basicamente aplicando propriedades aos elementos adicionados à superfície de design no painel Propriedades. É possível organizar as propriedades no painel Propriedades em uma de três maneiras: por categoria, por nome ou por origem.

Propriedades do Blend painel - Organizar por

Se você organizar as propriedades por categoria, as propriedades aparecem agrupadas por categoria, com as categorias organizadas em ordem alfabética. Se você organizar as propriedades pelo nome, verá uma lista alfabética de todas as propriedades disponíveis. Se você organizar as propriedades por origem, as propriedades serão agrupadas por Local, Associação e Recurso ou por Outro e organizadas em ordem alfabética dentro dessas categorias.

Adicionar e estilizar um controle Image

No procedimento a seguir, você adicionará e estilizará o logotipo principal do aplicativo PickaFlick usando um controle Image.

Para adicionar e estilizar o logotipo principal

No painel Projetos, clique duas vezes em MainLogo.png para adicioná-lo à superfície de design.

A imagem aparece na superfície de design, e um controle Image é adicionado ao painel Objetos e Linha do Tempo.

No painel Propriedades, na categoria Comum, observe que o atributo Source do controle Image é Assets/MainLogo.png.
Para gerenciar o controle Image que contém a imagem do logotipo principal mais facilmente, na parte superior do painel Propriedades, na caixa de texto Nome, digite MainLogo. Observe no painel Objetos e Linha do Tempo que o controle Image foi renomeado como MainLogo.
Na categoria Layout do painel Propriedades, à direita de Margem, clique no indicador Propriedades Avançadas e depois clique em Redefinir.

Dica

O rótulo do indicador Propriedades Avançadas muda com base nos recursos e nas associações de dados.Nesse caso, o rótulo é Local.
Na categoria Comum, na lista Alongamento, clique em Nenhum.

Agora o logotipo principal aparece no centro da superfície de design.

Adicionar uma imagem que seja processada no tempo de execução

A película de filme (FilmStrip.png) é uma imagem estreita que é repetida para dar a aparência de uma imagem muito maior. Como a propriedade TileBrush.TileMode, que oferece suporte à disposição lado a lado das imagens, não tem suporte em aplicativos da Windows Store, o aplicativo PickaFlick usa o código C# para organizar uma série de controles Image em um recipiente de layout, nesse caso, um controle Grid chamado FilmStrip.

Criar um recipiente de layout de película de filme

Como o Blend não é otimizado para trabalhar com código, você criará a grade principal no Blend e depois alternará para o Visual Studio para desenvolver o código.

Para criar o recipiente de imagem de película de filme

Com Grid selecionado no painel Objetos e Linha do Tempo, clique duas vezes em Grid no painel Ativos para adicionar um controle Grid à superfície de design.

Dica

Localize Grid digitando Grid na caixa Pesquisar ou abra Controles, clique em Painéis e em Grid.
No painel Objetos e Linha do Tempo, renomeie o segundo controle Grid clicando nele e digitando FilmStrip.
Com FilmStrip selecionado, no painel Propriedades, na categoria Layout, defina Largura como 2560 (para acomodar dispositivos mais largos) e Altura como 218 (a altura de FilmStrip.png).

Observe que o adorno de controle estende-se pela parte superior da superfície de design.
Na categoria Layout, defina VerticalAlignment como Centro .

Observe que o adorno de controle agora está no centro da superfície de design.

Alternar para o Visual Studio e voltar novamente

Agora que você criou a grade de película de filme, você está pronto para alternar para o Visual Studio para concluir o código.

Você pode alternar entre Blend e Visual Studio enquanto estiver trabalhando em um projeto. Você pode até ter o mesmo arquivo de projeto aberto no Blend e no Visual Studio ao mesmo tempo, no mesmo computador. Ao salvar uma alteração em um arquivo em uma ferramenta e alternar para outra, você simplesmente recarrega o arquivo para atualizar sua exibição do projeto.

Importante

Você pode copiar e colar o código no Blend ou no Visual Studio.No entanto, o Visual Studio é a ferramenta recomendada para gravar ou editar em C#.Esta etapa demonstra como é possível alternar facilmente entre o Blend e o Visual Studio, mesmo quando estiver trabalhando em um único projeto.

Se você adicionar novos arquivos ao projeto enquanto estiver trabalhando no Visual Studio, salve o projeto usando Salvar Tudo (Ctrl+Shift+S) ou compile e execute o aplicativo antes de alternar para Blend.Quando você alternar para Blend, receberá uma mensagem perguntando se você deseja recarregar o projeto.Clique Sim e novos arquivos serão adicionados ao seu projeto em Blend.

Em seguida, você alterará para o Visual Studio para criar o código que processará a imagem de película de filme quando a página principal do aplicativo for carregada.

Criar uma nova classe

Nesse procedimento, você criará um novo arquivo de classe chamado TileCanvas.cs. Esse é o código que organiza a série de controles Image que estarão contidos no controle Grid (FilmStrip) que você criou no Blend.

Para criar TileCanvas.cs

Clique com o botão direito do mouse no projeto no painel Projetos do Blend e clique em Editar no Visual Studio.
No Visual Studio, no Gerenciador de Soluções, clique com o botão direito do mouse no projeto, clique em Adicionar e em Classe.
Na caixa de diálogo Adicionar Novo Item, selecione Classe. Na caixa de texto Nome, digite TileCanvas.cs e clique em Adicionar.

Em TileCanvas.cs, adicione o seguinte usando instruções após using System.Threading.Tasks;:

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Foundation;

Exclua class TileCanvas {} e substitua-o pelo seguinte código (com base no TileCanvas.cs de Rob Fonseca-Ensor, disponível em https://gist.github.com/robfe/3077863#file-tilecanvas-cs e usado com permissão sob os termos da licença do Apache 2.0):

public class TileCanvas : Canvas
    {
        public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(TileCanvas), new PropertyMetadata(null, ImageSourceChanged));

        private Size lastActualSize;

        public TileCanvas()
        {
            LayoutUpdated += OnLayoutUpdated;
        }

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
           set { SetValue(ImageSourceProperty, value); }
        }

        private void OnLayoutUpdated(object sender, object o)
        {
            var newSize = new Size(ActualWidth, ActualHeight);
            if (lastActualSize != newSize)
            {
                lastActualSize = newSize;
                Rebuild();
            }
        }

        private static void ImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
        {
            TileCanvas self = (TileCanvas)o;
            var src = self.ImageSource;
            if (src != null)
            {
                var image = new Image { Source = src };
                image.ImageOpened += self.ImageOnImageOpened;
                image.ImageFailed += self.ImageOnImageFailed;

                //add it to the visual tree to kick off ImageOpened
                self.Children.Add(image);
            }
        }

        private void ImageOnImageFailed(object sender, ExceptionRoutedEventArgs exceptionRoutedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Children.Add(new TextBlock { Text = exceptionRoutedEventArgs.ErrorMessage, Foreground = new SolidColorBrush(Colors.Red) });
        }

        private void ImageOnImageOpened(object sender, RoutedEventArgs routedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Rebuild();
        }

        private void Rebuild()
        {
            var bmp = ImageSource as BitmapSource;
            if (bmp == null)
            {
                return;
            }

            var width = bmp.PixelWidth;
            var height = bmp.PixelHeight;

            if (width == 0 || height == 0)
            {
                return;
            }

            Children.Clear();
            for (int x = 0; x < ActualWidth; x += width)
            {
                for (int y = 0; y < ActualHeight; y += height)
                {
                    var image = new Image { Source = ImageSource };
                    Canvas.SetLeft(image, x);
                    Canvas.SetTop(image, y);
                    Children.Add(image);
                }
            }
            Clip = new RectangleGeometry { Rect = new Rect(0, 0, ActualWidth, ActualHeight) };
        }
    }

Pressione Ctrl+S para salvar suas alterações.

Modificar MainPage.xaml.cs

Adicionando uma referência ao namespace Windows.UI.Xaml.Media.Imaging à página, você pode usar um URI para referenciar uma fonte de imagem. Esse URI apontará para FilmStrip.png.

Para adicionar uma referência ao namespace Windows.UI.Xaml.Media.Imaging

No Gerenciador de Soluções, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Adicione a seguinte instrução após using Windows.UI.Xaml.Navigation;:
```
using Windows.UI.Xaml.Media.Imaging;
```

Adicionar um evento PageLoaded

TileCanvas.cs fornece o código que preenche a grade FilmStrip com controles Image. Referenciar o namespace Windows.UI.Xaml.Media.Imaging fornece a capacidade de apontar para um URI de imagem específico. Para concluir o código, você precisa adicionar um evento Page_Loaded que chame TileCanvas.cs e defina a URI da imagem quando MainPage.xaml é carregado.

Para adicionar um evento PageLoaded a MainPage.xaml

No Gerenciador de Soluções, clique duas vezes em MainPage.xaml para abri-lo.
No modo de exibição XAML, clique dentro do cabeçalho Page na parte superior da página. No painel Propriedades, clique no botão Eventos .
Clique duas vezes dentro da caixa Carregado para adicionar um evento Page_Loaded a MainPage.xaml.

MainPage.xaml.cs se abre, e o seguinte código é adicionado à página:
```
private void Page_Loaded(object sender, RoutedEventArgs e) {}
```

Coloque o seguinte código entre as chaves após private void Page_Loaded(object sender, RoutedEventArgs e):

            TileCanvas tc = new TileCanvas();
            BitmapImage img = new BitmapImage();
            Uri baseUri = new Uri("ms-appx:///");
            img.UriSource = new Uri(baseUri, "Assets/FilmStrip.png");
            tc.ImageSource = img;
            FilmStrip.Children.Add(tc);

Pressione Ctrl+Shift+S para salvar todas as alterações no projeto.

Volte para o Blend. Uma mensagem aparece perguntando se você deseja recarregar o projeto. Clique em Sim.
Pressione F5 para compilar e executar o projeto. Observe que a película de filme expande a exibição do aplicativo conforme esperado, mas está na frente do logotipo principal, escondendo-o da exibição. Pressione Alt+F4 para fechar o aplicativo.
No Blend, no painel Objetos e Linha do Tempo, observe que FilmStrip está abaixo de MainLogo na hierarquia de objetos. A camada de objetos (também conhecida como ZIndex) em um arquivo XAML é determinada pela ordem da hierarquia. Clique em FilmStrip e arraste o item de forma que apareça antes de MainLogo na hierarquia.

Dica

Como alternativa, você pode definir ZIndex no painel Propriedades e depois optar por exibir os elementos no painel Objetos e Linha do Tempo na ordem ZIndex clicando em Organizar por ordem z no canto inferior esquerdo do painel.

Dica

O ponto de inserção é indicado pelo adorno azul.
Pressione F5 para compilar e executar o aplicativo. Observe que a película de filme agora aparece atrás do logotipo principal como esperado. Pressione Alt+F4 para fechar o aplicativo.

Criar o botão da galinha

A terceira imagem no aplicativo PickaFlick é a imagem do botão (ChickenSprite.png). Você pode criar rapidamente um botão de uma imagem adicionando um controle Image à superfície de design e convertendo essa imagem em um controle de usuário Button. Você pode modificar o modelo Button que é gerado automaticamente quando se cria um controle Button.

Transformar uma imagem em controle de usuário

No procedimento a seguir, você adicionará a imagem da galinha à superfície de design e a converterá em controle Button usando o comando Transformar em Controle.

Para criar o controle ChickenButton

Verifique se a opção Grid está selecionada no painel Objetos e Linha do Tempo. No painel Projetos, abra a pasta Ativos e clique duas vezes em ChickenSprite.png para adicioná-la à superfície de design.
No painel Objetos e Linha do Tempo, renomeie o controle Image clicando nele e digitando ChickenSprite. Pressione Enter.
No menu Ferramentas, clique em Transformar em Controle.

A caixa de diálogo Transformar em Controle é exibida.
Na caixa de diálogo Transformar em Controle, na lista Controles, clique em Button.
Na caixa de texto Nome (chave), digite ChickenButton.
Em Definir em, Este documento é selecionado. Na lista suspensa Este documento, Página: <sem nome> aparece. Clique em OK.

Agora o controle ChickenSprite Image é um controle Button. Observe que agora o modelo de botão aparece no painel Objetos e Linha do Tempo (também chamado de modo de edição de modelos). O modelo aparece na parte superior do painel (ChickenButton (Modelo de Botão)), e a hierarquia de objetos do modelo é exibida (Grid, controle ChickenSprite e ContentPresenter).

Mistura - modelo de botão - objetos e linha do tempo

Estilizar um modelo de controle

Agora você está pronto para personalizar o modelo de controle. Você começará removendo o ContentPresenter (o controle que exibe o texto "Button" na superfície de design). Você alterará o tipo de recipiente e depois modificará a exibição de modo que o recipiente mostre apenas a metade superior da imagem. A segunda metade da imagem ficará oculta.

Para modificar o modelo Button

Para remover o ContentPresenter, no painel Objetos e Linha do Tempo, clique com o botão direito do mouse em [ContentPresenter] e clique em Excluir.
Altere o tipo de recipiente de layout clicando com o botão direito do mouse em Grid, clicando em Alterar Tipo de Layout e em Viewbox.
Para redimensionar a Viewbox na altura de metade da imagem, no painel Propriedades, na categoria Layout, defina Altura como 180.
A imagem é redimensionada para ajustar à altura da Viewbox. Para corrigir isso, na categoria Aparência do painel Propriedades, defina Alongamento como Nenhum.

Agora a imagem ocupa a largura do controle Viewbox, e somente a metade superior da imagem está visível.
Agora que você terminou a edição do modelo, saia do modo de edição de modelos clicando no ícone Retornar ao escopo na parte superior do painel Objetos e Linha do Tempo.
Para mover o controle Button para o centro da tela do aplicativo, na categoria Layout, à direita de Margem, clique no ícone Propriedades Avançadas e depois clique em Redefinir. Clique no ícone Centro ao lado de HorizontalAlignment.

Adicionar uma alteração de estado visual

Quando você executa o aplicativo PickaFlick, ChickenButton é o controle que, quando clicado, abre a página de detalhes do filme. Ao focalizar ChickenButton, a galinha parece se mexer. Esse efeito interativo é uma alteração de estado visual que é aplicada ao controle. Por padrão, somente metade superior da imagem é exibida. Quando você aponta para ela, a parte inferior oculta da imagem se torna visível, substituindo o modo de exibição padrão e simulando uma animação.

Para adicionar a alteração de estado, você editará o modelo ChickenButton.

Para adicionar uma alteração de estado visual ao controle ChickenButton

No painel Objetos e Linha do Tempo, clique com o botão direito do mouse em Button, aponte para Editar Modelo e depois clique em Editar Atual.

Outra alternativa é clicar em Modelo na barra de trilha abaixo da guia do documento.
No painel Objetos e Linha do Tempo, clique em ChickenSprite.
No painel Estados, clique em PointerOver.
No painel Propriedades, na categoria Layout, defina a Margem superior como -179.

Aviso

Definir a Margem superior como -180 deixará as metades superior e inferior da imagem visíveis.
Desative a gravação de estado clicando no indicador de modo de gravação na janela de design sob as guias do documento.
Saia do modelo de edição de modelos clicando no ícone Retornar ao escopo na parte superior do painel Objetos e Linha do Tempo.

Pressione F5 para compilar e executar o aplicativo. Aponte para a imagem de galinha para confirmar se a imagem de galinha alterna os estados. Pressione Alt+F4 para fechar o aplicativo.

Agora você está pronto para criar a página de detalhes. Para continuar, consulte Criar seu primeiro aplicativo da Windows Store com o Blend, parte 2: a página de detalhes (XAML e C#).