Pesquisar

Estilos e Grid no WPF

Uma das coisas mais demoradas e chatas no desenvolvimento Windows, depois de escrever Sql (brincadeirinha), é o alinhamento de controles e botões na tela. O Visual Studio nos traz várias ferramentas que alinham os botões, aumenta o espaçamento, etc, mas mesmo assim a vida do desenvolvedor fica um pouco complicado. Com o WPF e estilos ao formato dos estilos css da web, podemos criar telas mais faceis de serem escritas através do xaml.
O WPF nos permite definir Grids em nosso formularios e criar linhas e colunas imaginarias onde nossos controles irão ficar. Vamos usar isso para criar a definição dessas linhas e após adicionarmos nossos controles nessas linhas e definirmos um tamanho. Algo como na figura abaixo.
image
Primeiro criamos um estilo para a nossa aplicação, onde devemos colocar o tamanho das colunas e linhas, e o tamanho dos componentes.
Como vocês pode ve
<Style TargetType="ColumnDefinition">        
<Setter Property="MinWidth" Value="70" />
</Style>
<Style TargetType="RowDefinition">
<Setter Property="Height" Value="50" />
</Style>

<Style x:Key="LabelUm" TargetType="Label">        
<Setter Property="Height" Value="23" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>

<Style x:Key="LabelDois" TargetType="Label" BasedOn="{StaticResource LabelUm}">
<Setter Property="Grid.ColumnSpan" Value="2" />
</Style>

<Style x:Key="LabelTres" TargetType="Label" BasedOn="{StaticResource LabelUm}">
<Setter Property="Grid.ColumnSpan" Value="3" />
</Style>
r, nós criamos o tamanho da coluna e da linha, e adicionamos os tamanhos dos labels, apartir da propriedade Grid.ColumnSpan, que permite que um label ocupe o espaço de duas colunas, ou uma.

E agora o nosso formulário principal, onde chamamos os estilos e adicionamos eles aos labels, e textbox, desta forma eles vão se alinhando automaticamente. A idéia é igual a programação Web, criar um estilo e fazer o alinhamento apartir do estilo. Aqui vai o código do formulario principal.

<Window x:Class="MecanicaWPF.CadastroCliente" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MecanicaWPF"
Title="Cadastro de Clientes">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>                
<ResourceDictionary Source="../EstilosFormulario.xaml" />                
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TabControl Margin="12,12,12,42" Name="tabControleCliente" Height="507">
<TabItem Name="tabCliente" Header="Dados do Cliente">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>                     
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<Label Grid.Row="0" Content="Nome do Cliente:" Style="{StaticResource LabelSeis}" />
<TextBox Grid.Row="0" Name="txtCliente" Style="{StaticResource TextBoxSeis}" />

<Label Grid.Row="0" Grid.Column="6" Content="CPF/CNPJ:" Style="{StaticResource LabelDois}" />
<TextBox Grid.Row="0" Grid.Column="6" Name="txtCpfCnpj" Style="{StaticResource TextBoxDois}" />

<Label Grid.Row="1" Content="Tipo:"  Style="{StaticResource LabelDois}" />
<TextBox Grid.Row="1" Name="txtTipoPessoa" Style="{StaticResource TextBoxDois}" />

<Label Grid.Row="1" Grid.Column="2" Content="Enquadramento Cliente:"  Style="{StaticResource LabelSeis}" />
<RadioButton Grid.Row="1" Grid.Column="2" Content="Cliente" Name="rdbCliente" Style="{StaticResource Dois}"/>
<RadioButton Grid.Row="1" Grid.Column="4" Content="Fornecedor" Name="rdbFornecedor" Style="{StaticResource Dois}"/>
<RadioButton Grid.Row="1" Grid.Column="6" Content="Ambos" Name="rdbAmbos" Style="{StaticResource Dois}"/>

<Label Grid.Row="2" Content="RG/Inscricao:"  Style="{StaticResource LabelDois}" />
<TextBox Grid.Row="2" Name="txtRgInscricao" Style="{StaticResource TextBoxDois}" />

<Label Grid.Row="2" Grid.Column="2" Content="Telefone 1:"  Style="{StaticResource LabelDois}" />
<TextBox Grid.Row="2" Grid.Column="2" Name="txtTelefoneUm" Style="{StaticResource TextBoxDois}" />

<Label Grid.Row="2" Grid.Column="4" Content="Telefone 2:"  Style="{StaticResource LabelDois}" />
<TextBox Grid.Row="2" Grid.Column="4" Name="txtTelefoneDois" Style="{StaticResource TextBoxDois}" />

<Label Grid.Row="2" Grid.Column="6" Content="Cliente desde:"  Style="{StaticResource LabelDois}" />
<TextBox Grid.Row="2" Grid.Column="6" Name="txtClienteDesde" Style="{StaticResource TextBoxDois}" />

<Label Grid.Row="3" Content="Email:"  Style="{StaticResource LabelQuatro}" />
<TextBox Grid.Row="3" Name="txtEmail" Style="{StaticResource TextBoxQuatro}" />

<Label Grid.Row="3" Grid.Column="4" Content="Contato:"  Style="{StaticResource LabelQuatro}" />
<TextBox Grid.Row="3" Grid.Column="4" Name="txtContato" Style="{StaticResource TextBoxQuatro}" />

<Label Grid.Row="4"  Content="Observacao:"  Style="{StaticResource LabelOito}" />
<TextBox Grid.Row="4" Grid.RowSpan="4" Name="txtObservacao"  Style="{StaticResource TextBoxOito}" AcceptsReturn="True" AutoWordSelection="True" VerticalScrollBarVisibility="Auto" />
</Grid>



Como vocês podem ver, eu apenas adiciono aos controles a linha e o tamanho dele, um, dois, tres, etc. O código fica muito mais limpo, sem posições, ancoras, etc. Este exemplo é redimensionavel conforme a janela.

Nenhum comentário: