Shadow under hovered ListBoxItem (and not under it's text)

Question

I need shadow under ListBoxItem on MouseOver. Bottom code works but the whole listbox including the TextBlock's letters have a shadow:

<ListBox  ItemContainerStyle="{StaticResource Style1}"

And the item Style:

<Style x:Key="Style1" TargetType="{x:Type ListBoxItem}">             
    <Style.Triggers>                    
        <Trigger Property="IsMouseOver" Value="True" >
            <Setter Property = "Effect"  >
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="10" Direction="0" Opacity="1" BlurRadius="5" Color="Black"/>
                </Setter.Value>
            </Setter>
        </Trigger>

Simplified DataTemplate:

<DataTemplate x:Key="TemplateSimple" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Title}" Grid.Column="0"/>
        <TextBlock Text="{Binding FirstName}" Grid.Column="1"/>
        <TextBlock Text="{Binding LastName}" Grid.Column="2"/>

Example is simplified.

I also tried adding to the DataTemplate:

<Rectangle Grid.Column="0" Fill="GreenYellow" Grid.ColumnSpan="3">

and assigning the shadow to it, but it would react only if TextBlocks are empty. Other ideas are appreciated.

EDIT: As you can see it is not really a shadow but a blurry text. If it was a shadow, it would change much on changing shadow length:

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 10:32

See this post, How do I apply an effect to a Border but not to its contents in WPF?, which has some documentation on this "feature".

The easiest workaround in your case might be to give the Grid in your DataTemplate a background color:

<DataTemplate x:Key="TemplateSimple" >
    <Grid Background="White" > ...

EDIT:

A more thorough approach would be to apply the DropShadowEffect to an element that lies beneath the text, but doesn't contain the text. For example, add a rectangle to your DataTemplate:

<DataTemplate x:Key="TemplateSimple" >
    <Grid Margin="2" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Rectangle Style="{StaticResource RectStyle1}" 
                   Fill="Lime" Grid.ColumnSpan="3" />

        <TextBlock Text="{Binding Title}" Grid.Column="0" />
        <TextBlock Text="{Binding FirstName}" Grid.Column="1" />
        <TextBlock Text="{Binding LastName}" Grid.Column="2" />
    </Grid>
</DataTemplate>

..and instead of having the DropShadowEffect in Style1, put it in RectStyle1, but still triggered by IsMouseOver on the parent ListBoxItem:

<Style x:Key="RectStyle1" TargetType="Rectangle" >
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem},
                                       Path=IsMouseOver, 
                                       Mode=OneWay}" 
                     Value="True" >
            <Setter Property="Effect" >
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="10" Direction="0" 
                                      Opacity="1" BlurRadius="5" 
                                      Color="Black" />
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

That did not work. All child elements of ListBoxItem still have shadow. — David Daks, May 30 '13 at 20:59
Strange.. Could you post more of your xaml code (a complete page - not bits and pieces)? — Sphinxxx, May 30 '13 at 21:13
I built a simple sln and it does seem to work but as much as I butcher my big project I can not find what is causing this... must be something global affecting this — David Daks, May 31 '13 at 15:03
I have also place in the code where I do the same effect in code and I still have text shadow but that part is not causing it on global level because I even after deletion it is happening. Any ideas which setting would cause this on global level? — David Daks, May 31 '13 at 15:17
I set .Net to 4.5 and I have just tried all of those in differnet combinations without success. If I would put border with shadow under the grid, would there be a way to trigger its visibility onMouseOver the grid (since it does not react when it is under the texblocks) — David Daks, May 31 '13 at 22:18
Yes, I believe there is. I have updated my answer with an example. — Sphinxxx, Jun 01 '13 at 00:58
It works great! Thanks! I am again amazed how some things can be solved in wpf. Cheers! — David Daks, Jun 01 '13 at 21:47

Shadow under hovered ListBoxItem (and not under it's text)

1 Answers1