1

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:

enter image description here

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>
J4N
  • 19,480
  • 39
  • 187
  • 340
  • is this an Itemscontol with your usercontrol as itemtemplate? Or Listbox/Stackpanel? – dba Nov 23 '21 at 15:54
  • @dba I added the actual ItemControl for you to see – J4N Nov 23 '21 at 19:20
  • that means, all your elements are on same Z-level, therefore the shadow/blur happens "behind" them. Maybe you could try to set the ZOrder of the highlighted element in the datatrigger to a certain level (e.g. 100). Not tested, just a guess... – dba Nov 24 '21 at 10:36
  • @dba I tried but it had no effect. I suspect this has an effect only inside the current control. – J4N Nov 24 '21 at 14:28
  • can this [SO-Anwer](https://stackoverflow.com/a/19138427/2408978) help you? – dba Nov 24 '21 at 15:20

0 Answers0