Tutorial: Usar Grid e StackPanel para criar um aplicativo meteorológico simples

Use XAML para criar o layout para um aplicativo de clima simples usando os elementos Grid e StackPanel. Com essas ferramentas, você pode fazer ótimos aplicativos que funcionam em qualquer dispositivo que esteja executando 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 desenvolvimento atual e atualizações de segurança) Instalar ferramentas para o SDK de Aplicativos do Windows.
• Conhecimento de como criar um aplicativo "Olá, Mundo" básico usando XAML e C#. Se você ainda não tiver esse conhecimento, clique aqui para aprender a 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, digite o WeatherPanele selecione OK.
5. Para executar o programa, selecione Depuração>Iniciar Depuração no menu ou selecione F5.

Etapa 2: Definir uma grade

No XAML, um de Grade é composto por uma série de linhas e colunas. Ao especificar a linha e a coluna de um elemento dentro de uma Grade, você pode colocar e espaçar outros elementos dentro de 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 odo 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>

A nova Grade 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 a uma taxa de 3:5. Da mesma forma, as duas linhas têm uma Altura de "2*" e "*" respectivamente, portanto, a Grade aloca duas vezes mais espaço para a primeira linha do que para a segunda ("*" é igual a "1*"). Essas proporções são mantidas mesmo se a janela for redimensionada ou se 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 uma cor a ela.

Etapa 3: Colorir a Grade

Para colorir a grade adicionamos três elementos de borda , cada um com uma cor de plano de fundo diferente. Cada uma delas também é atribuída a uma linha e coluna no de Grade de pai usando os atributos Grid.Row e Grid.Column. Os valores desses atributos são definidos por padrão como 0, portanto, você não precisa atribuí-los ao primeiro Border. Adicione o código a seguir ao elemento da Grade 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 esta borda se estenda por 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 de tal 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 meteorológico. O StackPanel é uma parte fundamental de muitos layouts básicos do aplicativo, permitindo que você empilhe elementos vertical ou horizontalmente.

No código a seguir, criamos dois elementos do StackPanel e preenchemos cada um com três TextBlocks. Adicione esses elementos StackPanel à da Grade abaixo dos elementos de borda da Etapa 3. Isso faz com que os elementos 'TextBlock' renderizem sobre o 'Grid' colorido 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 um abaixo do outro. 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 dispostos horizontalmente da esquerda para a direita, assim definimos o atributo Orientation como "Horizontal". Também devemos definir o atributo Grid.ColumnSpan como "2", para que o texto seja centralizado na 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 representa o clima de hoje, algo que diz "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 Assets e selecione Adicionar ->Item Existente.... Localize partially-cloudy.png no navegador que aparece, selecione-o e clique em Adicionar.

Em seguida, em MainPage.xaml, adicione o seguinte elemento Image abaixo dos StackPanels que você criou na 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 padrão sejam "0".

E é isso! Você criou com êxito o layout para um aplicativo de clima simples. Se você executar o aplicativo pressionando F5, 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 aplicativo do Windows, consulte silhuetas de aplicativo 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