Why is my drop shadow obscured by other items?

Question

I have an ItemsControl with a data template, and when the user mouses over certain parts of an Item, I want a drop shadow to appear. However, the drop shadow is being cut off by the subsequent item in the ItemsControl.

XAML:

<Window x:Class="DropShadowTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:po        ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
    Title="MainWindow" 
    Height="350" Width="525" 
    Loaded="Window_Loaded" 
    UseLayoutRounding="True" 
    SnapsToDevicePixels="True">
<Window.Resources>
    <DropShadowEffect   po:Freeze="true"    x:Key="BuyOrderFlagShadow"  Color="#FF000000" Direction="0" ShadowDepth="0" BlurRadius="15" RenderingBias ="Quality"    Opacity =".65"/>
</Window.Resources>
<Grid>
    <ItemsControl Name="itemsControl" Margin="25">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid Name="borderLeft" Grid.Column="0" Background="LightGray" >
                        <Border BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding Name}" Margin="5"/>                           
                        </Border>
                    </Grid>
                    <Grid Name="borderCenter" Grid.Column="1" Background="LightGray" >
                        <Border BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding City}" Margin="5"/>
                        </Border>
                    </Grid>
                    <Grid Name="borderRight" Grid.Column="2" Background="LightGray" >
                        <Border BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding State}" Margin="5"/>
                        </Border>
                    </Grid>
                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="IsMouseOver" SourceName="borderLeft" Value="true">
                        <Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderLeft"/>
                        <Setter Property="ZIndex" Value="1000" TargetName="borderLeft"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" SourceName="borderRight" Value="true">
                        <Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderRight"/>
                        <Setter Property="ZIndex" Value="1000" TargetName="borderRight"/>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
</Window>

And here's what's happening when I mouse over an item: enter image description here

I added the ZIndex property to the Triggers in an attempt to fix the issue. Prior to doing that, the drop shadow only appeared on the left and top sides of the grid. Any help is appreciated.

The reason to your problem is that the ZIndex property is with regard to the panel the control is in. which is the Grid of that certain item. But it doesn't have any effect regarding controls outsode it's that Grid. — Programmer, Oct 02 '13 at 06:53

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

Thanks to user2760623, I investigated the ZIndex for the entire item. Using this question, I came up with the following solution using a ItemContainerStyle:

<Window x:Class="DropShadowTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:po        ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
        Title="MainWindow" 
        Height="350" Width="525" 
        Loaded="Window_Loaded" 
        UseLayoutRounding="True" 
        SnapsToDevicePixels="True">
    <Window.Resources>
        <DropShadowEffect   po:Freeze="true"    x:Key="BuyOrderFlagShadow"  Color="#FF000000" Direction="0" ShadowDepth="0" BlurRadius="15" RenderingBias ="Quality"    Opacity =".65"/>
    </Window.Resources>
    <Grid>
        <ItemsControl Name="itemsControl" Margin="25">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Border Name="borderLeft"       Panel.ZIndex="-1"   Grid.Column="0" Background="LightGray" BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding Name}" Margin="5"/>
                        </Border>
                        <Border Name="borderCenter"     Panel.ZIndex="-1"   Grid.Column="1" Background="LightGray" BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding City}" Margin="5"/>
                        </Border>
                        <Border Name="borderRight"      Panel.ZIndex="-1"   Grid.Column="2" Background="LightGray" BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding State}" Margin="5"/>
                        </Border>
                    </Grid>
                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" SourceName="borderLeft" Value="true">
                            <Setter Property="Effect"       Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderLeft"/>
                            <Setter Property="Panel.ZIndex" Value="100" TargetName="borderLeft"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" SourceName="borderRight" Value="true">
                            <Setter Property="Effect"       Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderRight"/>
                            <Setter Property="Panel.ZIndex" Value="100" TargetName="borderRight"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="{x:Type ContentPresenter}">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Panel.ZIndex" Value="100"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>
</Window>

Now I get the behavior I expected: enter image description here

Why is my drop shadow obscured by other items?

1 Answers1

Linked