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.