Controles básicos do XAML

Neste artigo, apresentarei alguns controles de Silverlight, controles estes, básicos para a construção de uma aplicação Metro Style.

Quando digo que os controles são básicos, em momento algum me refiro à sua simplicidade. Na verdade, significa que são a base na definição do layout em Silverlight.

Mas, antes de falar dos controles, falarei um pouco de XAML.

O XAML

Quando optar por desenvolver uma aplicação Metro Style utilizando C#, Visual Basic ou C++, você deve utilizar o XAML (Extensible Application Markup Language) para definir a interface do usuário. O XAML é uma linguagem declarativa, que você pode utilizar para definir controles que fazem interface com o usuário, tais como: botões, formas, textos e outros conteúdos apresentados na tela.

Quem já teve contato com HTML ou XML, não terá grandes problemas para trabalhar com o XAML. Assim como aqueles, o XAML é constituído por elementos e atributos. No que diz respeito à validação, o XAML é mais parecido com o XML, pois obedece às mesmas regras, o que implica em termos o arquivo  bem formatado.

Segue abaixo um exemplo de código XAML:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

Uma das maiores facilidades de se utilizar o XAML é poder separar a interface de usuário e o código da aplicação. Este modelo de trabalho permite uma separação das tarefas de desenvolvimento de software. Por exemplo, um designer do seu time pode fazer o desenho da interface do usuário e depois entregar para o desenvolvedor realizar a programação. Mesmo que o desenvolvedor e o designer sejam a mesma pessoa, conseguimos dividir a interface em arquivos XAML e o código em code-behind (.cs e .vb).

XAML e a relação entre os objetos

No XAML temos elementos como botões <Button> e tabelas <Grid>, que podem possuir outros elementos, seus filhos.  A relação entre pai e filho especifica coisas como, por exemplo, de que forma os objetos são posicionados na tela e como eles respondem aos eventos disparados pelos usuários.

Veja exemplo abaixo:

<Grid x:Name="Tabela" Background="Red" Grid.Row="1" Margin="12,0,12,0">

Relação entre os componentes visuais.

Além de determinar como o conteúdo é apresentado, a relação entre os componentes pode ter um efeito em como os eventos são processados. Vários eventos que são relacionados com a interface do usuário percorrem toda a árvore de relacionamento dos objetos. Você pode incluir um handle de eventos no StackPanel (Painel) para todos as caixas de texto, por exemplo.

Para tanto, basta incluir a propriedade PointerPressed="commonHandler", no objeto Painel.

<StackPanel x:Name="Painel" Margin="20" Background="Blue" PointerPressed="commonHandler">
  <TextBlock Name="primeiroTb" FontSize="30">Primeiro</TextBlock>
  <TextBlock Name="segundoTb" FontSize="30">Segundo</TextBlock>
  <TextBlock Name="terceiroTb" FontSize="30">Terceiro</TextBlock>
</StackPanel>

No trecho de código acima, quando o usuário clicar ou pressionar sobre uma das caixas de texto definidas em seu interior, o evento será capturado pela caixa de texto. O evento, por sua vez, vai subir até o elemento raiz.

O gráfico acima está representado no código abaixo:

private void commonHandler(object sender, PointerRoutedEventArgs e)

{
   FrameworkElement origem = e.OriginalSource as FrameworkElement;
   switch (origem.Name)
   {
case "primeiroTb":
   primeiroTb.Text = primeiroTb.Text + " Click!";
break;
case "segundoTb":
   segundoTb.Text = segundoTb.Text + " Click!";
break;
case "terceiroTb":
   terceiroTb.Text = terceiroTb.Text + " Click!";
break;
   }
}
 

Posicionamento absoluto e relativo (dinâmico)

Depois deste ensejo, sobre o formato XAML e como os elementos estão relacionados, focarei no posicionamento dos objetos.

Podemos optar por posicionar os objetos, absolutamente ou relativamente. Ao utilizarmos o posicionamento relativo dos elementos, ganhamos em produtividade, pois o conteúdo será apresentado corretamente em todas as resoluções de tela.

Apesar da facilidade proporcionada pelo posicionamento relativo, às vezes, se faz necessário posicionar os elementos absolutamente. Neste caso, fazemos isso utilizando o controle Canvas.

Para posicionarmos um controle dentro do controle Canvas, utilizamos as propriedades Canvas.Left e Canvas.Top. Quando utilizamos o designer do Visual Studio, estas propriedades são atualizadas, automaticamente, ao arrastarmos o controle dentro do Canvas.

Já em um posicionamento relativo ou dinâmico, especificamos os elementos definindo como eles serão organizados em relação a seus pais. Por exemplo, você pode organizar os controles em um painel e especificar que eles devem ficar dispostos horizontalmente. Para utilizar o tamanho automático ou proporcional, é necessário definir as propriedades Height (altura) e Width (largura).

Utilize as seguintes recomendações para definir um layout dinâmico:

• Defina a altura e a largura de um controle para Auto (automático). Quando este valor é utilizado em um controle Grid, o controle preencherá o conteúdo da célula que o contém;
• Controles que possuem texto não utilizam a propriedade Width (largura) e Height (altura) e, sim, as propriedade MinWidth (largura mínima) e MinHeight (altura mínima). Com isso, você previne que um texto assuma um tamanho que dificulte a sua leitura;
• Para definir valores proporcionais para os elementos RowDefinition (definição de linha) e ColumnDefinition (definição de coluna) de um Grid, utilize valores relativos em Height (altura) e Width (largura). Por exemplo, para especificar que uma coluna será cinco vezes mais larga do que outra utilize "*" e "5" para a propriedade Width (largura) no elemento ColumnDefinition. Veja o exemplo abaixo:

<Grid Margin="12,0,12,0">
 
  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>
 
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="5*" />
   </Grid.ColumnDefinitions>
</Grid>

No exemplo anterior, a segunda coluna possui cinco vezes o tamanho da primeira coluna.

O controle Grid

O controle Grid suporta disponibilizar os controles em múltiplas linhas e colunas. Você pode especificar as linhas e colunas de um controle do tipo Grid, incluindo elementos RowDefinition e ColumnDefinition imediatamente após a definição de um elemento Grid, como apresentado na seção anterior. Para posicionar objetos em uma célula específica, utilizamos as propriedades Grid.Row e Grid.Column do objeto que desejamos posicionar. Os controles podem, ainda, ocupar mais do que uma linha ou coluna, utilizando as propriedades Grid.RowSpan e Grid.ColumnSpan. Veja exemplo abaixo:

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
</Grid.RowDefinitions>
 
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
 
<TextBox Text="1a linha 1a coluna" FontSize="60" Grid.Column="0" Grid.Row="0" />
<TextBox Text="3a linha 1a coluna" FontSize="60" Grid.Column="0" Grid.Row="2" />
 
<TextBox Text="1a linha 2a coluna" FontSize="60" Grid.Column="0" Grid.Row="1" />
<TextBox Text="3a linha 2a coluna" FontSize="60" Grid.Column="1" Grid.Row="2" />
 
</Grid>
 

O controle StackPanel

O controle StackPanel é um painel de layout que organiza os controles nele existentes, em uma linha que pode ser orientada horizontalmente ou verticalmente. Você pode utilizar a propriedade Orientation para especificar a direção dos elementos filhos. Por padrão, a propriedade Orientation assume o valor Orientation.Vertical. Controles StackPanel são comumente utilizados para organizar pequenos conjuntos de objetos na interface. Veja o exemplo abaixo:

 <StackPanel >
  <Rectangle Fill="White" Width="50" Height="50" Margin="15" />
  <Rectangle Fill="Blue" Width="50" Height="50" Margin="15" />
  <Rectangle Fill="Green" Width="50" Height="50" Margin="15" />
  <Rectangle Fill="Red" Width="50" Height="50" Margin="15" />
</StackPanel>

Conclusão

O XAML é uma linguagem de marcação, assim como HTML e XML especializado para definir os objetos que serão apresentados na tela. Apesar da separação de responsabilidades definidas no XAML e no Code Behind, existem situações onde alterar alguma característica visual no código (Code Behind) é mais fácil do que no XAML, mas isso implica no nível de conhecimento de cada hum.

Aconselho vocês sempre utilizar o modelo de posicionamento dinâmico, pois uma vez que a aplicação está na loja, ela pode ser utilizada por diferentes resoluções. Para tanto os controles Grid e StackPanel são essenciais para definir como os componentes serão apresentados.