Universal APPs: Ajustar a interface do usuário a diferentes tamanhos de tela

Olá, tudo bom?

Neste post vou demonstrar como utilizar o VisualStateManager para ajustar/adaptar a interface do usuário a diferentes tamanhos de tela.

Como base para nosso exemplo, utilizaremos o seguinte trecho de código XAML para composição do layout da aplicação de teste:

<Page
 x:Class="TesteVisualStateManager.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:TesteVisualStateManager"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <StackPanel x:Name="contentPanel" Margin="8,32,0,0">
   <TextBlock Text="Blog do Eduardo H. Rizo" FontSize="30" />
   <TextBlock Text="Teste com o VisualStateManager" FontSize="20" />
   <TextBlock Text="Informe seu nome:" Margin="0,40,0,0" />
   <StackPanel Orientation="Horizontal" x:Name="inputPanel" Margin="0,20,0,20">
      <TextBox x:Name="txtNome" Width="280" HorizontalAlignment="Left"/>
      <Button x:Name="btnDigaOla" Content="Diga Olá..." />
   </StackPanel>
  </StackPanel>
 </Grid>
</Page>

Ao executarmos o projeto simulando seu uso em um computador local ou tablet teremos a seguinte visualização:

visualstatemanager-pc

Porém, ao executar o mesmo projeto em um Windows Phone, cuja tela obviamente é menor, veremos que o botão “Diga Olá” ficará cortado e não ajustado à nova realidade da tela.

visualstatemanager-mobile-sem-ajuste

Para resolver a situação podemos usar o recurso do VisualStateManager e criar uma AdaptativeTrigger que será disparada sempre que a aplicação perceber situações diferentes de resolução ou tamanho de tela. Repare o trecho de código XAML abaixo:

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup>
    <VisualState x:Name="wideState"> <!-- Estado amplo (tablet / PC) -->
      <VisualState.StateTriggers>
         <AdaptiveTrigger MinWindowWidth="641" /> 
      </VisualState.StateTriggers>
    </VisualState>
    <VisualState x:Name="narrowState"> <!-- Estado estreito (entre 0 e 641) -->
      <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="0" />
      </VisualState.StateTriggers>
      <VisualState.Setters>
         <Setter Target="inputPanel.Orientation" Value="Vertical"/>
         <Setter Target="btnDigaOla.Margin" Value="0,4,0,0"/>
      </VisualState.Setters>
    </VisualState>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

A codificação acima informa para a página XAML que se ela estiver em um tamanho entre 0 (zero) e 641 então deverá utilizar as adaptações indicadas no VisualState de nome narrowState, caso contrário, deve utilizar a própria codificação já indicada pelo desenvolvedor, ou seja, o código original.

visualstatemanager-mobile

Veja agora a codificação completa da página:

<Page
 x:Class="TesteVisualStateManager.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:TesteVisualStateManager"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <VisualStateManager.VisualStateGroups>
     <VisualStateGroup>
       <VisualState x:Name="wideState"> <!-- Estado amplo (tablet / PC) -->
       <VisualState.StateTriggers>
         <AdaptiveTrigger MinWindowWidth="641" /> 
       </VisualState.StateTriggers>
     </VisualState>
     <VisualState x:Name="narrowState"> <!-- Estado estreito (entre 0 e 641) -->
       <VisualState.StateTriggers>
         <AdaptiveTrigger MinWindowWidth="0" />
       </VisualState.StateTriggers>
       <VisualState.Setters>
         <Setter Target="inputPanel.Orientation" Value="Vertical"/>
         <Setter Target="btnDigaOla.Margin" Value="0,4,0,0"/>
       </VisualState.Setters>
     </VisualState>
   </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>
 
 <StackPanel x:Name="contentPanel" Margin="8,32,0,0">
   <TextBlock Text="Blog do Eduardo H. Rizo" FontSize="30" />
   <TextBlock Text="Teste com o VisualStateManager" FontSize="20" />
   <TextBlock Text="Informe seu nome:" Margin="0,40,0,0" />
   <StackPanel Orientation="Horizontal" x:Name="inputPanel" Margin="0,20,0,20">
      <TextBox x:Name="txtNome" Width="280" HorizontalAlignment="Left"/>
      <Button x:Name="btnDigaOla" Content="Diga Olá..." />
   </StackPanel>
  </StackPanel>
 </Grid>
</Page>

Abraços,

Eduardo Henrique Rizo

MCP

Fonte: 

Post Relacionado: 

[twitter-follow screen_name=’eduardorizo’ show_count=’yes’]

Marcado com: , , , , , , ,
3 comentários sobre “Universal APPs: Ajustar a interface do usuário a diferentes tamanhos de tela
  1. David G disse:

    Olá ! Tudo bem?
    Muito bom teu blog ! Conteúdos interessantes e dinâmicos.
    Gostaria da sua ajuda. Tenho muita vontade de começar a desenvolver apps para Windows, talvez até universalmente. Não somente por ser fã da plataforma, mas, por ter grande carência de apps. E futuramente vejo isso como algo rentável. Mas, sou inexperiente nesse universo da programação, nunca me interessei até agora. E depois de muita pesquisa, observei que programação é o futuro, a base de toda tecnologia, digamos assim, então quem sabe programar, esta bem. Poderia me passar teu email, gostaria de trocar umas ideias contigo, um tira duvidas. Okay ? ! Abraço

  2. David G disse:

    Olá ! Tudo joia ?
    Muito bom teu blog, está de parabéns. Especialmente, não vemos muitos artigos como estes relacionados ao Windows em geral. Gostaria de trocar uma ídeia contigo, creio que como é mais experiente na área, poderá me dar uma ajuda. Poderia me passar teu e-mail ?
    Obrigado amigo 😉
    Bom dia !!!!!

1 Pings/Trackbacks para "Universal APPs: Ajustar a interface do usuário a diferentes tamanhos de tela"
  1. […] Ajustar a interface do usuário a diferentes tamanhos de tela […]

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*