Seções iMasters
Desenvolvimento

Como fazer o design de um Custom Control ao editar o Part Template?

Texto original disponível em http://www.kunal-chowdhury.com/2011/04/how-to-design-custom-control-by-editing.html

?

Este artigo é uma continuação do anterior, “Como criar um Custom control no Silverlight?“.

Nesta parte, iremos discutir sobre o template e modificaremos nosso template
básico para termos uma melhor aparência de acordo com a nossa necessidade. Também aprenderemos sobre template Part e como modificar um template existente.

Leia mais para aprender em profundidade sobre o
Custom Control no Silverlight. Isso te ajudará não somente com o Silverlight,
mas também com o desenvolvimento de WPF e Windows Phone 7. No final, não se
esqueça de enviar seu feedback.

Como mencionado, esta é uma continuação do artigo anterior, “Como criar um Custom control no Silverlight?“. Agora aprenderemos
sobre Template Parts. Espero que isso clareie a ideia básica por trás dos
custom controls. Não é tão difícil se você entendê-los bem.

Então, vamos começar. Espero que tenha o exemplo
anterior intacto com você.

Modificando o template

Abra
a página Generic.xaml. Como mostrado mais cedo, você tem o seguinte estilo em
seu arquivo. Como marcado abaixo, você tem o ControlTemplate e, dentro dele, você tem um border control. Iremos agora modificar esse template para termos uma
melhor visualização do nosso controle com um título de cabeçalho e uma área de
conteúdo.

Vamos fazer o design do nosso control template. Você
pode fazer o design da maneira que você quiser, mas, por enquanto, siga o meu
código. Dentro do border control, vamos adicionar um painel grid e dividi-lo em
duas linhas. A primeira linha terá uma altura fixa, e a segunda terá uma
altura variável.

Agora adicione um border control na primeira linha e
a nomeie. Não se esqueça de usar os nomes corretos. Normalmente, um control
template
deve definir seu elemento filho pré-definido com “PART_”.
Nesse cenário, estamos adicionando um painel de cabeçalho, e portanto vamos
nomeá-lo como “PART_HeaderPanel”. Escolha uma cor para o background (coloque-o
dentro do código por enquanto, em outro artigo implementaremos as propriedades
customizadas, e então o mudaremos) e adicione um TextBlock com um foreground branco, como o elemento filho do painel do cabeçalho. Dê um texto a ele também.

Na segunda linha, adicionaremos um ContentPresenter,
o que vai segurar qualquer elemento filho. Por enquanto, não iremos atribuir a
ele nenhuma propriedade. Portanto, veremos uma parte vazia na UI. Iremos
adicioná-lo do nível do controle, uma vez que implementarmos as propriedades,
no próximo artigo.

Aqui está nosso Control Template, que você pode
usar como referência:

<Style TargetType="local:MyControl">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="local:MyControl">

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="25"/>

<RowDefinition MinHeight="100" Height="*"/>

</Grid.RowDefinitions>

<Border x:Name="PART_HeaderPanel"

Background="Blue"

Grid.Row="0">

<TextBlock x:Name="PART_HeaderText"

Text="Caption"

Foreground="White"

VerticalAlignment="Center"/>

</Border>

<ContentPresenter x:Name="PART_Content" Grid.Row="1"/>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Mais uma vez, nós
estamos utilizando texto e cores dentro do código, sem modularidade, e os implementaremos
a partir do template de ligação mais tarde. Garanta que você tenha nomeado seus
controles importantes corretamente. Estamos usando Part_HeaderPanel,
PART_HeaderText e PART_Content. Provavelmente iremos precisar deles mais tarde
no código atrás do arquivo, por exemplo, no arquivo de classe do controle.

Tenha certeza de que você tem o TargetType mencionado
corretamente para o Estilo e o ControlTemplate. Não mexa com isso por enquanto.

Vamos executar nosso aplicativo agora e veremos abaixo
a UI na janela do browser. O border control se tornou um controle ChildWindow.
Este é nosso custom control (até agora):

A área azul é nosso painel do cabeçalho, que tem um
título, e a parte amarela é nossa área de conteúdo, na qual podemos adicionar controles
filhos nos próximos artigos.

E agora?

Espero que os artigos estejam te ajudando a
compreender a criação de Custom Control no Silverlight. Ah sim, não se esqueça
que isso é aplicável para ambos WPF e Windows Phone 7. Aqui discutiremos o
nível básico de implementação do control template. Há mais por vir. Nos
próximos artigos, iremos discutir tudo com mais profundidade.

?

Texto original disponível em http://www.kunal-chowdhury.com/2011/04/how-to-design-custom-control-by-editing.html

Mensagem do anunciante:

Torne-se um Parceiro de Software Intel®. Filie-se ao Intel® Developer Zone. Intel®Developer Zone

Qual a sua opinião?