I'm trying to put some dropshadow to highlight an item in a list. This list is an item control, and each item is in a ContentControl with a ContentTemplateSelector that loads the correct UserControl.
In the UserControl that gets loaded, I've the following code:
<UserControl .....>
<Border Margin="3 1 3 1">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsHighlighted}" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="White" BlurRadius="10" ShadowDepth="0" Direction="270" ></DropShadowEffect>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<!-- .... -->
</Border
</UserControl>
The white dropshadow gets displayed:
But the component on the bottom and right of this one are above the shadow while component on the top/left are exactly how I want Is there a way to override this behavior?
Also, ideally, I would have "no direction", with the same shadow on all direction.
What am I missing?
EDIT I tried to add a Blur Effect on a child element of my Border. It resolve the "Direction" issue, but I still get the issue that controls on the bottom/right are above the shadow.
Edit2
As requested, here is how the ItemControl is used:
<ItemsControl ItemsSource="{Binding ChildsVm}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource ConventionBasedDataTemplateSelector}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>