Example of advanced styling WPF ItemsControl - MIHOW - Najlepiej sprawdzają się rozwiązania, które są stworzone od podstaw na potrzeby Twoich procesów. : MIHOW – Najlepiej sprawdzają się rozwiązania, które są stworzone od podstaw na potrzeby Twoich procesów.

The gif shows the process of dropping the file in the indicated area. The process of dropping the file is additionally indicated by a change in the color of the background elements. After the file is dropped, it is analyzed and its content is displayed nested in the ItemsControl control.

During the file analysis, the proprietary Spinner control is displayed, consisting of vector graphics and Storyboard animation.

Please pay attention to the stylized ContextMenu while choosing the option of selecting the contents of the analyzed file.

<!-- Context Menu Item Style -->
    <Style BasedOn="{StaticResource {x:Type MenuItem}}" TargetType="{x:Type MenuItem}" x:Key="PopupMenuItem">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Border x:Name="Border" Background="{StaticResource DimmedWhite}" BorderBrush="Transparent" BorderThickness="1" Padding="2">
                        <ContentPresenter ContentSource="Header"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource BlueFocusedOpacity}"/>
                            <Setter TargetName="Border" Property="BorderThickness" Value="1"/>
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource Blue}"/>
                            <Setter TargetName="Border" Property="CornerRadius" Value="4"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Transparent"></Setter>
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="Foreground" Value="{StaticResource Gray}"></Setter>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="Margin" Value="3"></Setter>
    </Style>
    
    <!-- Context Menu Style -->
    <Style x:Key="ContextMenuStyle" TargetType="{x:Type ContextMenu}">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Grid.IsSharedSizeScope" Value="true" />
        <Setter Property="HasDropShadow" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContextMenu}">
                    <Border x:Name="Border" Background="{StaticResource DimmedWhite}" BorderThickness="1" BorderBrush="{StaticResource Gray}">
                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasDropShadow" Value="true">
                            <Setter TargetName="Border" Property="Padding" Value="0,3,0,3" />
                            <Setter TargetName="Border" Property="CornerRadius" Value="4" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The whole thing is completed with a soft shadow around the ItemsControl control.

<UserControl.Effect>
        <DropShadowEffect  BlurRadius="12" Color="#00000029" />
</UserControl.Effect>