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....

 

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

 

 

Exibições: 294

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de Carlos Mattos (MVP) em 12 maio 2011 às 9:50

João Paulo, este é um recurso do produto JustCode da Telerik. O JustCode acrescenta uma série de melhorias para edição de código no Visual Studio. Visite este link para ter mais informações sobre este excelente produto da Telerik:  http://www.telerik.com/products/justcode/justcode-makes-visual-stud....

 

Forte abraço!

Comentário de Ramon Durães em 12 maio 2011 às 8:31
#EBA

© 2020   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço