Introdução
Constantemente no desenvolvimento de nossas aplicações
necessitamos criar controles reutilizáveis, se você trabalha com ASP.NET com
certeza já usou(ou ainda usa) muito User Control, no Silverlight essa
necessidade também existe e o recurso também. Neste artigo abordaremos como
criar e utilizar o User Controls, quais situações se aplica e os benefícios
dessa prática.
Nesse artigo utilizaremos Silverlight 3, Visual Studio 2008
e Expression Blend 3.
Entendendo o User Control
Antes de iniciarmos a construção do nosso User Control
gostaria de compara-lo com o MovieClip do Flash. Você possui um determinado
“objeto” e cria-se instâncias dele dentro de sua aplicação, portanto ao alterar
o “objeto” original todas suas instâncias são afetadas, entretanto, alterações feitas
as instâncias se aplicam apenas a elas mesmas. O poder de customização de seu
User Control após ser instanciado é enorme, já que se pode criar propriedades
para alteração de valores nativos.
Criando e utilizando o User Control
Vamos logo então a criação do nosso User Control. Crie um
novo projeto do tipo Silverlight Application:
O Visual Studio vai perguntar se você quer criar junto um
projeto website para exibir sua aplicação Silverlight, caso queira confirme.
Após a criação do projeto vamos adicionar um novo item ao
projeto Silverlight, do tipo Silverlight User Control, nomeie como “Topo.xaml”
conforme a imagem abaixo:
O XAML gerado por um novo UserControl é idêntico ao criado
pelo “MainPage.xaml” quando iniciamos um novo projeto, portanto a criação é tão
livre quanto no MainPage, fique a vontade de criar StoryBoards, States,
eventos, etc., mas para agilizar o artigo e o entendimento do funcionamento do
User Control, copie e cole o código abaixo dentro da Grid “LayoutRoot”:
|
<UserControl x:Class="UserControlArtigo.Topo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="550"
Height="70">
<Grid x:Name="LayoutRoot"
Background="White">
<Border
Height="39" Margin="8,17,8,0"
VerticalAlignment="Top"
BorderBrush="Black" BorderThickness="1"
Background="#FFDADADA">
<TextBlock Text="Topo
User Control" TextWrapping="Wrap"
FontSize="29.333" FontWeight="Bold"
FontFamily="Tahoma" Margin="8,0,-8,0"/>
</Border>
</Grid>
</UserControl>
|
Esse é todo o código do meu User Control, em negrito está o
que adicionei e o que alterei (Width e Height do meu User Control).
Vamos agora voltar ao “MainPage.xaml” e adicionar o nosso
User Control, para utilizarmos precisamos fazer uma referência a nossa própria
aplicação no XAML do MainPage, essa referência é feita através da propriedade
xmlns, essa propriedade adiciona ao XAML um determinado namespace, se você
adicionar após o xmlns dois pontos “:” e um valor qualquer, “uc” por exemplo,
estará nomeando a referência a esse WebService, vejamos como ficará o XAML da
nossa MainPage após a referência:
|
<UserControl x:Class="UserControlArtigo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uc="clr-namespace:UserControlArtigo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot"
Width="640" Height="480"
Background="White">
</Grid>
</UserControl>
|
Em negrito a referência ao namespace do nosso projeto, para
efetivamente adicionar o User Control adicione o seguinte código dentro da Grid
“LayoutRoot”:
|
<uc:Topo x:Name="ucTopo"></uc:Topo>
|
Como você pode ver nosso User Control possui a propriedade
x:Name, portanto pode ser facilmente acessado e manipulado no code-behind, além
disso ele também possui as propriedades Width, Height, Margin, etc., podendo
ser manipulado no XAML também.
Carregando User Controls dinamicamente
Um bom exemplo de uso de User Controls é criar “containers”
para informações dinâmicas, por exemplo:
Para adicionar um User Control dinamicamente basta
instanciar um objeto do tipo do seu User Control (no nosso caso “Topo”) e
depois adicionar o objeto a algum container (Grid, StackPanel, etc.), veja um
exemplo abaixo:
|
Topo objTopo = new Topo();
objTopo.Margin = new
Thickness(0, 100, 0, 0);
LayoutRoot.Children.Add(objTopo);
|
No exemplo acima instancio um objeto e manipulo o
posicionamento dele no Grid “LayoutRoot”.
Outro modo de carregar um User Control é carregando
dinamicamente um Assembly e obtendo o User Control, recomendo a leitura do
artigo do Mike
Taulty.