Tutorial: Usar Grid e StackPanel para criar um aplicativo de clima simples

Use XAML para criar o layout de um aplicativo de clima simples usando os elementos Grid e StackPanel . Com essas ferramentas, você pode criar aplicativos de ótima aparência que funcionam em qualquer dispositivo que execute o Windows. Este tutorial leva de 10 a 20 minutos.

APIs importantes: classe Grid, classe StackPanel

Pré-requisitos

• Windows 10 e Microsoft Visual Studio 2015 ou posterior. (O Visual Studio mais recente recomendado para atualizações atuais de desenvolvimento e segurança) Instale ferramentas para o SDK do Aplicativo Windows.
• Conhecimento de como criar um aplicativo básico "Hello World" usando XAML e C#. Se você ainda não o tem, clique aqui para saber como criar um aplicativo "Hello World".

Etapa 1: criar um aplicativo em branco

1. No menu do Visual Studio, selecione Arquivo>Novo Projeto.
2. No painel esquerdo da caixa de diálogo Novo Projeto, selecione Visual C#>Windows>Universal ou Visual C++>Windows>Universal.
3. No painel central, selecione Aplicativo em branco.
4. Na caixa Nome, insira WeatherPanel e selecione OK.
5. Para executar o programa, selecione Depurar>Iniciar Depuração no menu ou selecione F5.

Etapa 2: Definir uma grade

Em XAML, uma Grid é composta por uma série de linhas e colunas. Ao especificar a linha e a coluna de um elemento em uma Grade, você pode colocar e espaçar outros elementos em uma interface do usuário. Linhas e colunas são definidas com os elementos RowDefinition e ColumnDefinition .

Para começar a criar um layout, abra MainPage.xaml usando o Gerenciador de Soluções e substitua o elemento Grid gerado automaticamente por esse código.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

O novo Grid cria um conjunto de duas linhas e colunas, que define o layout da interface do aplicativo. A primeira coluna tem uma largura de "3*", enquanto a segunda tem "5*", dividindo o espaço horizontal entre as duas colunas na proporção de 3:5. Da mesma forma, as duas linhas têm uma altura de "2*" e "*" respectivamente, então a grade aloca duas vezes mais espaço para a primeira linha do que para a segunda ("*" é o mesmo que "1*"). Essas proporções são mantidas mesmo se a janela for redimensionada ou o dispositivo for alterado.

Para saber mais sobre outros métodos de dimensionamento de linhas e colunas, consulte Definir layouts com XAML.

Se você executar o aplicativo agora, não verá nada, exceto uma página em branco, porque nenhuma das áreas da grade tem conteúdo. Para mostrar a grade , vamos dar um pouco de cor.

Etapa 3: colorir a grade

Para colorir a Grade , adicionamos três elementos de Borda , cada um com uma cor de fundo diferente. Cada um também é atribuído a uma linha e coluna na Grid pai usando os atributos Grid.Row e Grid.Column. Os valores desses atributos são padronizados como 0, portanto, você não precisa atribuí-los à primeira borda. Adicione o código a seguir ao elemento Grid após as definições de linha e coluna.

<Border Background="#2f5cb6"/>
<Border Grid.Column ="1" Background="#1f3d7a"/>
<Border Grid.Row="1" Grid.ColumnSpan="2" Background="#152951"/>

Observe que, para a terceira Borda , usamos um atributo extra, Grid.ColumnSpan, que faz com que essa Borda abranja ambas as colunas na linha inferior. Você pode usar Grid.RowSpan da mesma maneira e, juntos, esses atributos permitem que você estenda um elemento em qualquer número de linhas e colunas. O canto superior esquerdo desse intervalo é sempre o Grid.Column e o Grid.Row especificados nos atributos do elemento.

Se você executar o aplicativo, o resultado será semelhante a este.

Etapa 4: Organizar o conteúdo usando elementos StackPanel

StackPanel é o segundo elemento de interface do usuário que usaremos para criar nosso aplicativo de clima. O StackPanel é uma parte fundamental de muitos layouts básicos de aplicativos, permitindo que você empilhe elementos vertical ou horizontalmente.

No código a seguir, criamos dois elementos StackPanel e preenchemos cada um com três TextBlocks. Adicione esses elementos StackPanel ao Grid abaixo dos elementos Border da Etapa 3. Isso faz com que os elementos TextBlock sejam renderizados sobre a Grade colorida que criamos anteriormente.

<StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="Today - 64° F"/>
    <TextBlock Foreground="White" FontSize="25" Text="Partially Cloudy"/>
    <TextBlock Foreground="White" FontSize="25" Text="Precipitation: 25%"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal"
            HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="High: 66°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Feels like: 63°"/>
</StackPanel>

No primeiro Stackpanel, cada TextBlock é empilhado verticalmente abaixo do próximo. Esse é o comportamento padrão de um StackPanel, portanto, não precisamos definir o atributo Orientation . No segundo StackPanel, queremos que os elementos filho sejam empilhados horizontalmente da esquerda para a direita, portanto, definimos o atributo Orientation como "Horizontal". Também devemos definir o atributo Grid.ColumnSpan como "2", para que o texto seja centralizado sobre a borda inferior.

Se você executar o aplicativo agora, verá algo assim.

Etapa 5: adicionar um ícone de imagem

Por fim, vamos preencher a seção vazia em nossa grade com uma imagem que represente o clima de hoje - algo que diga "parcialmente nublado".

Baixe a imagem abaixo e salve-a como um PNG chamado "parcialmente nublado".

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Ativos e selecione Adicionar ->Item Existente... Encontre partially-cloudy.png no navegador que aparece, selecione-o e clique em Adicionar.

Em seguida, em MainPage.xaml, adicione o seguinte elemento Image abaixo do StackPanels da Etapa 4.

<Image Margin="20" Source="Assets/partially-cloudy.png"/>

Como queremos a imagem na primeira linha e coluna, não precisamos definir seus atributos Grid.Row ou Grid.Column , permitindo que eles sejam padronizados como "0".

Pronto! Você criou com êxito o layout para um aplicativo de clima simples. Se você executar o aplicativo pressionando F5, deverá ver algo assim:

Se quiser, tente experimentar o layout acima e explore diferentes maneiras de representar dados meteorológicos.

Artigos relacionados

• Para obter uma introdução ao design de layouts de aplicativos do Windows, consulte Silhuetas de aplicativos do Windows
• Para saber mais sobre como criar layouts responsivos que se adaptam a diferentes tamanhos de tela, consulte Definir layouts de página com XAML