Why is my drop shadow obscured by other items? - wpf

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

Answer 1

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: