Criando meu controle – Parte 1

11 06 2010

Vou mostrar como criar um controle complexo, mas vai ser aos poucos assim fica mais fácil de se entender.  Esse controle vai ser um botão e a medida que eu for desenvolvendo vou implementando e deixando-o completo, mas a principio vou apenas herdar o meu botão de Button.

using System.Windows.Controls;

namespace Lib.Controls
{
    public class MyButton : Button
    {
        public MyButton()
        {
        }
    }
}

Por enquanto e só isso. Temos um botão que pode ser alterado e usado de muitas formas.

Algumas observações, a classe Button herda de ButtonBase que herda de ContentControl então para o próximo post vou alterar a herança do meu botão para ContentControl pra vermos como fica e o que precisaremos incrementar pra que continue com as mesmas características do Button original do Framework.

Para deixar mais claro, a idéia e ir regredindo na heranca do Button e ir implementando pra entendermos o que foi preciso fazer pra que termos o Button que esta no Framework do Silverlight.

Aqui esta o código para download e  ate a próxima.





Estudando a Herança dos Controles

11 06 2010

Nesse post eu vou expor parte das heranças de alguns controles.

Código para download

Veja essa imagem ela explica tudo, mas vou comentar logo após.

Esse diagrama foi montado de acordo com os controles do Framework Silverlight 4 e mostra as classes bases de todos os controles que tempos.

DependencyObject pai de todas os controles, isso significa que podemos fazer um cast em qualquer controle com ela.

Seguindo a Herança temos UIElement onde começamos a ter as propriedades dos controles. Boa parte das propriedades que temos nos controles foram implantadas na classe UIElement mas ainda não temos um design, dessa forma se criarmos um controle que herde de UIElement ele não aparecera na tela pois ainda não interpreta o layout.

Seguindo a herança temos agora FrameworkElement uma implementação de UIElement com mais propriedades mas ainda não podemos criar um controle com visual ele também não interpreta o layout.

Em seguida temos Control, essa sim interpreta o layout, podemos usar a propriedade Template pra construirmos o visual do controle.

A partir de Control as classes tem uma interação de layout. E as duas classes mais usadas são ContetControl e ItemsControl.

E qual a diferença de ContentControl e ItemsControl?

ContentControl recebe apenas um conteúdo e ItemsControl recebe mais de um conteúdo. Ficou confuso? Cria um ContentControl no xaml e tenta colocar 2 Grids dentro um abaixo do outro… vai causar uma exception pois como eu disse o ContentControl so aceita um conteúdo, no caso apenas um Grid. Agora tente colocar um ItemsControl com 2 Grids dentro… funciona perfeitamente.

Quando criamos um controle e vamos montar o design dele, usamos o Style pra isso, simplificando… editamos o Template dentro do Style e para que nosso controle tenha um Conteudo precisamos usar um recipiente. No caso de usemos um ContentControl temos que usar no Tempate um ContentPresenter como recipiente, e caso usemos um ItemsControl tempos que adicionar um ItemsPresenter no Template. Essa parte sera detalhada em outro post, quando montar o outro post coloco o link aqui.

Então essa e a base de todos os controles que temos no Framework Silverlight 4.

Para matar a curiosidade de alguns uma visão da herança de alguns dos principais controles.

Código para download





Como Adicionar um ícone para meu controle Silverlight personalizado

8 06 2010

Para quem já montou seu controle personalizado e gostaria de adicionar um ícone para ser exibido no Blend e no Visual Studio em tempo de design, este post mostra de uma maneira simples como fazer.

Download do Codigo Fonte

Criei um projeto Silverlight Application chamado CustomControl e consecutivamente um Web chamado CustomControl.Web e uma Class Library chamada Lib.

Dentro da Lib adicionei uma pasta chamada Controls e dentro dela uma class chamada MyControl.cs e nela fiz uma implementação de Button.

public class MyControl : Button
{
    public MyControl()
        : base()
    {

    }
}

Agora vou criar uma imagem no Paint e salva-la como MyControl.Ico.png

Depois adiciono a imagem dentro da pasta controls

E na propriedades BuildAction da imagem seleciono Embedded Resource.

É só compilar e pronto.
Abri o projeto no Blend e adicionei o controle em MainPage e olhe o resultado.

E pra exibir no Visual Studio tem que criar uma nova aba na Toolbox e adicionar o controle.

Criei uma aba chamada MyControl e nela adicionei o MyControl que criei.

Bem simples não!

A teoria é que temos que adicionar uma imagem com o nome no formato {NomeDoControle}.Ico.{ExtensãoDaImagem}, não necessariamente na mesma pasta do controle, mas de preferência.

E que quando o projeto é compilado o nome do resource (a Imagem) ficara Lib.Controls.MyControl.Ico.png que tem o formato {NameSpacePadrão}.{NomeDaPasta}.{NomeDoControle}.Ico.{ExtensãoDaImagem} (obs: Caso haja mais de uma pasta, uma dentro da outra obviamente, deve-se repetir .{NomeDaPasta} para cada pasta).

Dessa forma caso você queira deixar a imagem na raiz do projeto você teria que renomea-la para {NomeDaPasta}.{NomeDoControle}.Ico.{ExtensãoDaImagem} de modo que quando compilado o resouce (a Imagem) tenha o mesmo formato de antes {NameSpacePadrão}.{NomeDaPasta}.{NomeDoControle}.Ico.{ExtensãoDaImagem}.

A imagem deve estar em um dos formatos a seguir : {XAML | BMP| PNG | GIF | JPG | JPEG}

Download do Codigo Fonte