Przykład zaawansowanego stylowania kontrolki WPF ItemsControl

Na gifie widać proces upuszczania pliku we wskazanym obszarze. Proces upuszczenia pliku jest dodatkowo indykowany zmianą koloru elementów tła. Po upuszczeniu pliku jest on analizowany i jego zawartość pokazywana jest w sposób zagnieżdżony na kontrolce ItemsControl.

W trakcie analizy pliku wyświetlana jest autorska kontrolka Spinner, składająca się z grafiki wektorowej oraz animacji Storyboard.

Proszę zwrócić uwagę na stylizowane ContextMenu podczas wybierana opcji zaznaczania zawartości analizowanego pliku.

<!-- 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>

Całości dopełnia delikatny cień wokół kontrolki ItemsControl

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