WPF – Como Aplicar DropShadowEffect num ListBoxItem

Como todos sabem, o WPF oferece diversos recursos para aprimorarmos a interface das nossas aplicações. Todos os controles do tipo Lista podem ser customizados para exibir os dados desejados. Um efeito muito comum utilizado nestes controles é o DropShadowEffect que aplica uma “sombra” sobre o item selecionado na lista. A cor e a profundidade desta sombra são definidas através dos parâmetros Color e ShadowDepth respectivamente.



Construindo o exemplo


Para ilustrar esse recurso do WPF, vamos construir uma lista de amigos. Os itens da lista exibirão os nomes e imagens. O efeito DropShadowBitmapEffect será aplicado no evento MouseOver. Veja a aplicação de exemplo em tempo de execução.




Figura 1: ListBoxItem com DropShadowEffect aplicado

Para construir a interface apresentada na Figura 1, abra o Visual Studio, crie um novo projeto baseado no Template WPF Application. Na Janela MainWindow.xaml altere o código XAML de acordo com os quadros a seguir.

O primeiro passo é criarmos a seção <Grid.Resources>onde depositaremos o DataSource que será utilizado para alimentar o ListBox e o ListItemContainerStyle que contém as definições para aplicação do efeito visual nos itens da lista.

O primeiro grupo de código XAML que adicionaremos na seção Grid.Resources utiliza o XmlDataSource para criar uma lista de amigos contendo Nome e Imagem de cada item.


Figura 2: Código XAML para criar o XmlDataSource


O segundo grupo de código XAML na seção Grid.Resources cria o ControlTemplate para o ListBoxItem. Observe que o Template é definido dentro do Tag <Style>.  Este código define como os registros serão apresentados e utiliza um Trigger associado à propriedade IsMouseOver para aplicar o efeito DropShadowBitmapEffect. Confira o código na Figura 3.


 


Figura 3: Definindo o estilo para o controle ListBox


 Finalmente, vamos ao código necessário para implementar nosso controle ListBox. Observe que a propriedade ItemSource é alimentada através do StaticResource e a propriedade ItemContainerStyle estabelece o vínculo com o estilo RedDropShadowEffect definido na seção Grid.Resources. Confira o código na Figura 4.




Figura 4: O código do controle ListBox


O mesmo estilo pode ser melhorado acrescentando outro Trigger associado à propriedade IsSelected, definindo outra cor para o efeito visual. Este é apenas um exemplo dos recursos gráficos que estão disponíveis no WPF.


 


Aprofunde seus conhecimentos sobre este tema visitando a comunidade WPF.


 


Faça download deste arquivo no formato PDF e também do código-fonte deste exemplo.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>