Criando e utilizando User Controls no Silverlight

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.

por Edjan Santos

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.