WPF - Criando um UserControl

Neste tutorial eu vou mostrar como criar um UserControl em uma aplicação WPF.

Um UserControl é um controle criado a partir dos controles já existentes agregando esses controles em um controle único com o objetivo de otimizar o seu código. Ele é indicado quando você percebe que existe uma repetição em uma estrutura da qual participam controles de forma que se você criar um controle composto com esses controles a manipulação dos dados será facilitada.

Obs: Não confunda um User Control com um Custom Control da WPF. Um Custom Control é um controle derivado de outro controle e é usado quando você cria um controle a partir de outro existente para incluir uma funcionalidade que o controle existente não possui.

Para mostrar como usar esse recurso eu vou criar um cenário onde temos que exibir em uma janela de uma aplicação WPF, em controles TextBlock, os dados de clientes como nome, endereço e telefone sendo que essa estrutura será repetida em outras janelas.

Dessa forma eu vou criar um UserControl agregando alguns controles TextBlock para montar essa estrutura de dados em um único controle para poder usá-lo em uma aplicação WPF para exibição de dados.

Criando a aplicação WPF e o User Control

Abra o Visual Basic 2010 Express Edition e crie uma nova aplicação do tipo WPF Application com o nome Wpf_UserControl;

No menu Project clique em Add New Item e a seguir selecione o template User Control (WPF) e informe o nome AlunoControl.xaml:

Observe que existe o modelo Custom Control (WPF) que é diferente de User Control (WPF).

Será criado o arquivo AlunoControl.xaml e aberta a janela exibindo o UserControl conforme mostrada a seguir:

Vamos remover a definição de Height e Width do UserControl e definir o controle com o seguinte leiaute:

O código XAML usado para obter o leiaute acima é mostrado abaixo:

<UserControl x:Class="AlunoControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d">
    <Grid Height="156" Width="291">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Text="Id" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
        <TextBlock Text="Nome" Grid.Row="1" Margin="5" VerticalAlignment="Center"/>
        <TextBlock Text="Idade" Grid.Row="2"  Margin="5" VerticalAlignment="Center"/>
        <TextBlock Text="Email" Grid.Row="3"  Margin="5" VerticalAlignment="Center"/>
        <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding Id,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding Nome,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
        <TextBox Grid.Row="2" Grid.Column="1" Margin="5" Text="{Binding Idade,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
        <TextBox Grid.Row="3" Grid.Column="1" Margin="5" Text="{Binding Email,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
   </Grid>
</UserControl>


O código é muito simples, definimos um Grid com 4 linhas e duas colunas onde incluímos 4 controles TextBlock. As definições de DataBinding também são necessárias para que os dados sejam vinculados aos controles.

Pronto com isso já temos o nosso UserControl definido e pronto para ser usado.

Usando o UserControl em nossa aplicação

Vamos agora usar o UserControl AlunoControl que criamos acima em nossa aplicação.

Abra o arquivo MainWindow.xaml e no código XAML vamos incluir as seguintes declarações:

  1. xmlns:local="clr-namespace:Wpf_UserControl"
  2. <local:AlunoControl></local:AlunoControl>

Conforme mostra a figura abaixo vemos o resultado da inclusão das duas linhas de código XAML acima:


Incluindo um User Control na ToolBox

Você pode incluir o UserControl na ToolBox de forma que ele fique sempre disponível.

Para fazer isso siga os seguintes passos:

1. Clique com o botão direito do mouse sobre a janela Toolbox;

2. A seguir selecione a opção Choose Items... no menu de contexto;


3. Em seguida , na janela Choose ToolBox Items, selecione a aba WPF Components e clique no botão Browse.


4. Localize o projeto onde esta localizado o UserControl que você deseja incluir;

5. Clique no botão OK;

Pronto o seu User Control irá estar incorporado a ToolBox.

Veja neste artigo como realizar a vinculação de dados em User Controls: WPF - Como vincular itens a um UserControl

"Em verdade , em verdade vos digo que vem a hora, e agora é, em que os mortos ouvirão a voz do Filho de Deus, e os que a ouvirem viverão."(João-5:25)

Referências:

José Carlos Macoratti