Como criar um Custom control no Silverlight?

Texto original disponível em http://www.kunal-chowdhury.com/2011/04/how-to-create-custom-control-in.html#disqus_thread

Eu tenho trabalhado no Silverlight há três anos e,
durante o período inicial, eu tinha medo de criar um Custom Control (controle
customizado). Eu tinha mais confiança para criar UserControls (controles de
usuários) durante o primeiro ano e meio do meu trabalho. Mas quando eu
comecei a trabalhar com Custom controls, descobri seu poder e o medo sumiu dos
meus olhos.

Há mais ou menos doi anos, tenho trabalhado nele toda
vez que estou explorando coisas super legais. Apesar de o Silverlight já ter sido lançado há um bom tempo, ainda vejo o mesmo medo em
outras pessoas e, portanto, decidi escrever uma sobre ele (explicando
todos os detalhes), o que será benéfico para os iniciantes.

Neste artigo, discutiremos “como
criar um Custom Control no Silverlight”. Isso é bastante básico, e será de
grande ajuda para os iniciantes. Não hesite em deixar seu comentário no final.

Criando um projeto de aplicação Silverlight

Primeiramente, precisamos criar um projeto
Silverlight. Penso que você já saiba o que é isso. Para sua referência, crie um
novo projeto. No painel esquerdo, selecione Silverlight e escolha
“Silverlight Application” no painel direito. Dê um nome para seu
aplicativo e solução. Clique em ok para continuar.

Na próxima tela,
apenas clique em “OK”. Você pode escolher a versão do Silverlight nesta
tela.

Criando um Custom Control

Uma vez que seu
projeto está pronto, é hora de criar um Custom Control. Neste artigo, vamos
apenas criar um controle padrão sem nenhuma customização adicional.

Para fazer isso,
clique no seu projeto Silverlight no menu e selecione “Add” e, no
segundo nível do menu, clique “New Item”. Isso abrirá a caixa de
diálogo “Add New Item”.

Como mostra o screen shot abaixo, selecione
“Silverlight Templated Control” e dê um nome para o controle.
Lembre-se de que “Silverlight Templated Control” é o template para o
Custom Silverlight Control.

Clique no botão “Add” para adicionar o Custom Control ao seu
projeto. Uma vez que a criação do controle está pronta, você irá notar duas
coisas no Solution Explorer. Expanda o Solution Explorer e lá você
encontrará o seguinte:

Uma
pasta “Themes” contendo um arquivo chamado
“Generic.xaml”. Esse é o arquivo fonte padrão para todos os
estilos dos seus controles.
Um
arquivo “MyControl.cs”, que nada mais é do que a classe do seu
Custom Control. O nome da classe é o nome do controle.

Note que, se você criar múltiplos controles, o IDE
irá criar múltiplas classes de arquivos para você com o nome do controle. Mas o
arquivo fonte será o mesmo. Todos os estilos e templates do seu controle irão
para o mesmo arquivo.

O screenshot
acima te dará uma melhor visibilidade dos arquivos que foram criados no seu
aplicativo demo.

Sobre a Classe

Aqui
discutiremos sobre a classe do Custom Control. Por enquanto, saiba apenas que todo
controle, por padrão, deriva de uma classe de base chamada
“Control”. Você pode trocar a classe de base para outro
controle dependendo da sua requisição.

Dê uma olhada no código básico que foi gerado para
você pelo IDE:

using System.Windows.Controls;

namespace CustomControlDemo
{
  public class MyControl : Control
  {
      public MyControl()
      {
          this.DefaultStyleKey = typeof(MyControl);
      }
  }
}

Você verá o código acima no construtor. Ele pega o
estilo do controle do aquivo fonte e o configura como o estilo padrão do
controle.

Template básico

Você encontrará o template básico do Custom Control
no arquivo Generic.xaml. Abra o arquivo e você encontrará o estilo abaixo
dentro do ResourceDictionary:

<Style TargetType="local:MyControl">
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="local:MyControl">
              <Border Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}">
              </Border>
          </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

A primeira linha
descreve o TargetType do estilo. A segunda linha declara o template do
controle. A terceira linha configura o valor do template. O filho do valor é
seu ControlTemplate. Você pode fazer o design do seu control template aqui.

Uma coisa que eu gostaria de dizer é que este é o
template padrão para qualquer controle. Você pode adicionar mais valores de
estilo antes de começar a declaração do template.

Adicionando o Custom Control na página principal

Vamos adicionar o Custom Control que criamos na nossa
página principal. Para fazer isso, você precisa adicionar o XMLNS namespace no
XAML. No nosso caso, é o nome do projeto. Uma vez que você declarou o
namespace, você será capaz de acessar o controle facilmente.

<UserControl x:Class="CustomControlDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:CustomControlDemo="clr-namespace:CustomControlDemo" mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400">

  <Grid x:Name="LayoutRoot" Background="White">
      <CustomControlDemo:MyControl
          Width="200"
          Height="200"
          Background="Yellow"
          BorderBrush="Red"
          BorderThickness="1"/>
  </Grid>
</UserControl>

O código acima irá explicar tudo para você. Ali,
inserimos nosso custom control chamado “MyControl” com uma declaração
própria de altura e largura. Se você não especificar a altura e a largura, ele
irá pegar toda a tela da aplicação (apenas para nosso exemplo).

Se você rodar a aplicação, você não verá nada além de
tela vazia. Isso acontece porque o controle tem um background transparente como
padrão. Por isso, adicionamos uma cor de background, um brush e espessura para a
borda para controlar o código acima.

Uma vez que você
rodar a aplicação agora, você verá o UI acima no seu browser. O retângulo é o Custom Control que criamos neste exemplo. Se você modificar o template do
controle, ele irá modificar o UI aqui automaticamente.

E agora?

Esta foi uma discussão básica
sobre Custom Control no Silverlight. Deixe seu feedback aqui, se você achou esse artigo
interessante.

Me
encontre no Twitter @kunal2383. Muito obrigado por ler meus
artigos/tutoriais. Feliz codificação.