Customizando aplicações WPF / Silverlight
Introdução
No dia-a-dia no desenvolvimento de aplicações tanto Windows quanto Web, nos deparamos com a necessidade cada vez maior de contruir interfaces rícas e usáveis para nossos usuários.
O HTML tem um parceiro poderoso, o famoso CSS, que permite customizar de forma simples e fácil toda a aplicação, criando classes para os objetos. Porém, o mesmo não ocorria no ambiente Windows (Windows Forms), onde não havia um lugar onde pudessemos criar um estilo para todos os botões da nossa aplicação e assim por diante.
Com a chegada do WPF/XAML isso mudou. Agora temos recursos tanto no WPF quanto no Silverlight para customizar nossas aplicações de forma simples e fácil, como faziamos anteriormente no HTML/CSS.
Recursos de customização
Tanto para WPF quanto Silverlight, os recursos de customização se dividem em duas partes:
- Customização por Página/Form - É a customização feita dentro de uma página (User Control)/form. Esta customização fica visível apenas aos controles dessa página. Como exemplo podemos tomar o arquivo MainPage.xaml, que é o arquivo incial gerado quando criamos uma aplicação WPF/Silverlight. Se aplicarmos o recurso de customização nesta página, o mesmo só terá efeito sob os controles desta página. Outras páginas criadas não assumirão os estilos definidos aqui.
- Customização por Aplicação - É a customização feita no arquivo App.xaml, que será refetida para TODAS as páginas (User Controls) e forms criados no WPF/Silverlight.
As necessidades variam muito, e esta flexibildade é importante. Supondo que temos um controle que aparece várias vezes, porém em uma única página e sabemos que o mesmo não será reutilizado, podemos simplesmente criar sua customização na própria página.
Por outro lado, podemos tomar como base o controle Button, que é utilizado na maioria das páginas. Neste caso é interessante que todos os buttons da applicação tenha o mesmo estilo, ou sejam, sigam o mesmo padrão, e neste caso, o ideal é criar seus recursos de customização numa área global (App.xaml).
Utilizando os recursos de Cutomização do XAML
A Figura 1 exemplificam a aplicação de estilos globais, que serão aplicados para toda a aplicação (Todas as Páginas/Forms).
Figura 1 - Exemplo de customização de uma aplicação (Arquivo App.xaml).
Note que temos uma tag Resources, que faz parte da tag Application. Sendo assim, temos a tag Application.Resources.
Dentro do Application.Resources temos a tag Style, que como o nome diz, define um estilo. Neste caso, como o objetivo é customizar todos os controles do tipo Button, na propriedade TargetName, declarei o valor Button.
Por fim, temos os Setters, que tem a função de encontrar a propriedade do controle e substituir o valor informado a ele. Os Setters tem duas propriedades básicas, que são:
- Property - Representa a propriedade a ser alterada.
- Value - Valor a ser aplicado nesta propriedade.
Como exemplo podemos tomar o último Setter, cuja propriedade Property é Height e a propriedade Value é 50. Neste caso, estamos alterando a altura (Height) do controle para 50 pixels.
Por fim, podemos notar que um Setter pode ter um valor composto para a propriedade Value, como acontece já no primeiro Setter criado, cujo a propriedade Property é Background. Neste caso, como a intenção é criar um Brush customizado (Começa branco e termina preto -- Efeito degradê), temos que utilizar a propriedade Value de forma que permita-nos adicionar mais de uma tag dentro dela.
Por outro lado, a Figura 2 exemplifica como podemos proceder para customizar recursos apenas de uma página/form.
Figura 2 - Exemplo de customização de uma página (Arquivo MainPage.xaml).
Podemos notar que o efeito é o mesmo, apenas trocamos a tag inicial Application pela tag raiz da página, que é UserControl.
Criando estilos
Até o momento, vimos que podemos customizar uma família de controles, como Buttons, Labels e etc. Mas e quando queremos que apenas certos buttons de uma página assumam este estilo?
Quando criamos um novo estilo dentro da área de Resources da página/aplicação, além da propriedade TargetType, temos a propriedade x:Key, que define um nome chave para utilizar-mos este estilo apenas quando desejado.
Pode-se notar que logo após incluir a tag x:Key, os buttons da página perderão a referência ao estilo. Isso se deve pelo fato de agora este estilo ter uma chave, e a mesma ser necessária na tag Style do controle.
A Figura 3 demonstra a criação e atribuição de um estilo a um controle Button.
Figura 3 - Aplicando um estilo à um controle.
Podemos notar que adicionamos um conjunto de propriedades (Vários Setters) para criar um estilo e aplicá-lo ao controle.
Porém temos uma outra situação. Vamos supor que eu queira customizar apenas o fundo dos buttons (Background). Neste caso, poderia simplesmente criar um Brush e adicionar uma chave a ele (x:Key), e no controle Button, na propriedade Background, referenciar este estilo.
A Figura 4 demonstra esta passagem.
Figura 4 - Aplicando um estilo à uma propriedade de um controle.
Recursos estáticos (Static) e dinâmicos (Dynamic)
Um recurso pode ser definido como estático (StaticResource) ou dinâmico (DynamicResource). Basicamente o StaticResource processa uma chave procurando um valor para aquela chave em todos os recursos da aplicação. Isto acontece durante o carregamento da página.
Por outro lado, o DynamicResource processa a chave criando uma expressão, que continua sem ser validada até que a aplicação esteja rodando.
Aqui estão algumas recomendações que retirei do MSDN (Vide sessão referências) que devem ser consideradas ao escolher entre recursos estáticos e dinâmicos.
- The overall design of how you create the resources for your application (per page, in the application, in loose XAML, in a resource only assembly).
O design geral de como você cria os recursos para sua aplicaçãp (Por página, na aplicação, perdido no XAML, num recurso somente no assembly).
- The application functionality: is updating resources in real time part of your application requirements?
Funcionalidade da aplicação: ter os recursos atualizados em tempo de execução fazem parte dos requerimentos da sua aplicação?
Conclusão
Os recursos para customização de aplicações WPF são inúmeros e nos fornecem grande felixibilidade para formatar os mais diferentes tipos de estilos que precisamos. Além disso, ainda podemos recorrer a ferramentas como Expression Studio para auxiliar a criação de estilos.
Referências
MSDN - Resources Overview
http://msdn.microsoft.com/en-us/library/ms750613.aspx