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