Tutorial: Use 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 estas ferramentas, pode criar aplicações de excelente aspeto que funcionam em qualquer dispositivo com 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 o desenvolvimento atual e atualizações de segurança) Instale ferramentas para o Windows App SDK.
• Conhecimento de como criar um aplicativo "Hello World" básico usando XAML e C#. Se você ainda não tem isso, clique aqui para saber como criar um aplicativo "Hello World".

Etapa 1: Criar um aplicativo em branco

1. No menu 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 Aplicação em Branco.
4. Na caixa Nome, introduza WeatherPanele selecione OK.
5. Para executar o programa, selecione Depurar>Iniciar Depuração no menu ou selecione F5.

Etapa 2: Definir uma grade

Em XAML, um Grid é composto por uma série de linhas e colunas. Ao especificar a linha e a coluna de um elemento dentro de uma Grade , pode colocar e espaçar outros elementos numa interface do utilizador. 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>

A nova Grade cria um conjunto de duas linhas e colunas, que define o layout da interface do aplicativo. A primeira coluna tem uma de largura de "3*", enquanto a segunda tem "5*", dividindo o espaço horizontal entre as duas colunas numa proporção de 3:5. Da mesma forma, as duas linhas têm uma de altura de "2*" e "*", respectivamente, de modo que a Grid 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 executar a aplicação agora, não verá nada além de uma página em branco, porque nenhuma das áreas da Grade tem qualquer conteúdo. Para mostrar a grelha vamos dar-lhe alguma cor.

Etapa 3: Colorir a grade

Para colorir a Grade adicionamos três elementos Border, cada um com uma cor de plano de fundo diferente. Cada um também é atribuído a uma linha e coluna na grelha principal usando os atributos Grid.Row e Grid.Column . O padrão dos valores desses atributos é 0, portanto, você não precisa atribuí-los à primeira Borda. Adicione o seguinte código 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 o terceiro Border, usamos um atributo extra, Grid.ColumnSpan, que faz com que este Border abranja ambas as colunas na linha inferior. Você pode usar Grid.RowSpan da mesma maneira e, juntos, esses atributos permitem que você espalhe um elemento por qualquer número de linhas e colunas. O canto superior esquerdo de tal extensão é sempre o Grid.Column e o Grid.Row especificados nos atributos do elemento.

Se você executar o aplicativo, o resultado será mais ou menos assim.

Etapa 4: Organizar o conteúdo usando elementos StackPanel

StackPanel é o segundo elemento da interface do usuário que usaremos para criar nosso aplicativo de meteorologia. 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 à Grade abaixo dos elementos Border do Passo 3. Isso faz com que os elementos TextBlock sejam renderizados na parte superior da Grid colorida que criámos 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 empilha-se verticalmente abaixo do anterior. Este é 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, por isso definimos o atributo Orientation como "Horizontal". Também devemos definir o atributo Grid.ColumnSpan como "2", para que o texto seja centralizado sobre a Border inferior .

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

Etapa 5: adicionar um ícone de imagem

Finalmente, vamos preencher a seção vazia em nosso Grid com uma imagem que representa o clima de hoje – algo que diz "parcialmente nublado".

Faça o download da imagem abaixo e salve-a como um PNG chamado "parcialmente nublado".

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

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

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

Como queremos a Imagem na primeira linha e coluna, não precisamos definir os seus atributos Grid.Row ou Grid.Column, permitindo que sejam definidos por defeito como "0".

E é isso! Você criou com sucesso o layout para um aplicativo meteorológico simples. Se você executar o aplicativo pressionando F5, você verá algo assim:

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

Artigos relacionados

• Para obter uma introdução à criação 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