Binding básico para aplicações Metro Style

Por Vinícius Souza
Microsoft Technical Evangelist
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.
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).
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">
O StackPanel (Painel) é filho do Grid (Tabela). As caixas de texto (TextBlock) pertencem ao StackPanel (Painel) - elas são seus filhos. São apresentadas uma em cima da outra, na ordem que foram declaradas no XAML. Esta é uma característica do StackPanel, o gráfico abaixo apresenta a relação entre os elementos.
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.
XAML
<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; } }
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:
<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 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 é 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>
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.
Artigo muito bom! Deu uma boa idéia de onde começar com o XAML.
Muito bom, parabéns!
Simples e objetivo!
Atenciosamente,
Arthur Ciurilli
Geração Y Consultoria e Software
www.geracaoypro.com.br
Comunidade Windows 8 Brasil www.windows8brasil.com
public void GOSTEI(MUITO BOM ESSE ARTIGO);
Muito interessante!
Torna ainda mais fácil compreender o Visual Studio 2012.
Parabéns.
Sigamos em frente e prossigamos para o alvo.
Só não entendo porque a Microsoft não investe mais em ferramentas de desenvolvimento e treinamentos em XAML que utilizem componentes gráficos para criação, manipulação e designe de objetos na tela. Para quem vem da programação desktop, dá a impressão de que estamos regredindo em termos de facilidade de programar. Perde-se muito tempo com questões de designe, pois temos que criar e alterar linhas de código para deixar a tela como queremos, tempo esse que deveria ser aplicado para resolver problemas lógicos da aplicação e do "negócio". Só uma opinião...
Ainda a parte de código e programação, preciso estudar muito, mas já é possível ter algumas noções.