<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:local="clr-namespace:ModernWpf.Controls">

    <Thickness x:Key="AppBarSeparatorMargin">2,8,2,8</Thickness>
    <Thickness x:Key="AppBarOverflowSeparatorMargin">0,4,0,4</Thickness>
    <sys:Double x:Key="AppBarSeparatorWidth">1</sys:Double>
    <sys:Double x:Key="AppBarOverflowSeparatorHeight">1</sys:Double>
    <sys:Double x:Key="AppBarSeparatorCornerRadius">0.5</sys:Double>

    <Style TargetType="local:AppBarSeparator">
        <Setter Property="Foreground" Value="{DynamicResource AppBarSeparatorForeground}" />
        <Setter Property="Padding" Value="{StaticResource AppBarSeparatorMargin}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:AppBarSeparator">
                    <Grid x:Name="RootGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ApplicationViewStates">
                                <ui:VisualStateGroupListener.Listener>
                                    <ui:VisualStateGroupListener x:Name="ApplicationViewStatesListener" />
                                </ui:VisualStateGroupListener.Listener>
                                <!-- FullSize is used when we are in landscape or filled mode -->
                                <VisualState x:Name="FullSize" />
                                <!-- Compact is used when we are in portrait or snapped mode -->
                                <VisualState x:Name="Compact" />
                                <VisualState x:Name="Overflow" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Rectangle x:Name="SeparatorRectangle"
                            RadiusX="{StaticResource AppBarSeparatorCornerRadius}"
                            RadiusY="{StaticResource AppBarSeparatorCornerRadius}"
                            Width="{StaticResource AppBarSeparatorWidth}"
                            VerticalAlignment="Stretch"
                            Fill="{TemplateBinding Foreground}"
                            Margin="{TemplateBinding Padding}"/>
                    </Grid>
                    
                    <ControlTemplate.Triggers>
                        <!-- Compact -->
                        <Trigger SourceName="ApplicationViewStatesListener" Property="CurrentStateName" Value="Compact">
                            <Setter TargetName="RootGrid" Property="Height" Value="{DynamicResource AppBarThemeCompactHeight}" />
                            <Setter TargetName="RootGrid" Property="VerticalAlignment" Value="Top" />
                        </Trigger>
                        <!-- Overflow -->
                        <Trigger SourceName="ApplicationViewStatesListener" Property="CurrentStateName" Value="Overflow">
                            <Setter TargetName="SeparatorRectangle" Property="Width" Value="NaN" />
                            <Setter TargetName="SeparatorRectangle" Property="HorizontalAlignment" Value="Stretch" />
                            <Setter TargetName="SeparatorRectangle" Property="Height" Value="{StaticResource AppBarOverflowSeparatorHeight}" />
                            <Setter TargetName="SeparatorRectangle" Property="Margin" Value="{StaticResource AppBarOverflowSeparatorMargin}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>