Wino-Mail/Wino.Mail/Styles/ItemContainerStyles.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
    xmlns:winoControls="using:Wino.Controls">


    <!--  Mail List Header Item Style  -->
    <Style x:Key="MailListHeaderStyle" TargetType="ListViewHeaderItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Margin" Value="0,0,0,0" />
        <Setter Property="MinHeight" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewHeaderItem">
                    <Grid
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter
                            x:Name="ContentPresenter"
                            Margin="0"
                            Padding="0"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Foreground="{TemplateBinding Foreground}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--  Clickable account navigation view item style  -->
    <!--  This introduces custom selector pipe for multi selection in NavigationView in shell.  -->

    <Style x:Key="SingleAccountNavigationViewItemTemplate" TargetType="winoControls:AccountNavigationItem">
        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
        <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Margin" Value="{ThemeResource NavigationViewItemMargin}" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="TabNavigation" Value="Once" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="winoControls:AccountNavigationItem">
                    <Grid x:Name="NVIRootGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <primitives:NavigationViewItemPresenter
                            x:Name="NavigationViewItemPresenter"
                            Padding="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Control.IsTemplateFocusTarget="True"
                            CornerRadius="4"
                            Foreground="{TemplateBinding Foreground}"
                            Icon="{TemplateBinding Icon}"
                            InfoBadge="{TemplateBinding InfoBadge}"
                            IsTabStop="false"
                            UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Rectangle
                                    x:Name="CustomSelectionIndicator"
                                    Width="3"
                                    Margin="-44,12,0,12"
                                    HorizontalAlignment="Left"
                                    Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                                    Opacity="1"
                                    RadiusX="2"
                                    RadiusY="2"
                                    Scale="0,0,0"
                                    Visibility="Collapsed">
                                    <Rectangle.ScaleTransition>
                                        <Vector3Transition />
                                    </Rectangle.ScaleTransition>
                                </Rectangle>
                                <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" />
                            </Grid>
                        </primitives:NavigationViewItemPresenter>

                        <muxc:ItemsRepeater
                            x:Name="NavigationViewItemMenuItemsHost"
                            Grid.Row="1"
                            x:Load="False"
                            Visibility="Collapsed">
                            <muxc:ItemsRepeater.Layout>
                                <muxc:StackLayout Orientation="Vertical" Spacing="0" />
                            </muxc:ItemsRepeater.Layout>
                        </muxc:ItemsRepeater>


                        <!--  Custom selecotr pipe.  -->


                        <FlyoutBase.AttachedFlyout>
                            <Flyout x:Name="ChildrenFlyout" Placement="RightEdgeAlignedTop">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <Setter Property="Padding" Value="{ThemeResource NavigationViewItemChildrenMenuFlyoutPadding}" />
                                        <!--  Set negative top margin to make the flyout align exactly with the button  -->
                                        <Setter Property="Margin" Value="0,-4,0,0" />
                                        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
                                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
                                        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
                                        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
                                        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
                                        <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="FlyoutPresenter">
                                                    <ScrollViewer
                                                        x:Name="ScrollViewer"
                                                        AutomationProperties.AccessibilityView="Raw"
                                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                                        <ContentPresenter
                                                            x:Name="ContentPresenter"
                                                            Padding="{TemplateBinding Padding}"
                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                            Background="{TemplateBinding Background}"
                                                            BorderBrush="{TemplateBinding BorderBrush}"
                                                            BorderThickness="{TemplateBinding BorderThickness}"
                                                            Content="{TemplateBinding Content}"
                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                                            CornerRadius="{TemplateBinding CornerRadius}" />
                                                    </ScrollViewer>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <Grid x:Name="FlyoutRootGrid">
                                    <Grid x:Name="FlyoutContentGrid" />
                                </Grid>
                            </Flyout>
                        </FlyoutBase.AttachedFlyout>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ItemOnNavigationViewListPositionStates">
                                <VisualState x:Name="OnLeftNavigation">
                                    <VisualState.Setters>
                                        <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnLeftPane}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OnTopNavigationPrimary">
                                    <VisualState.Setters>
                                        <Setter Target="NavigationViewItemPresenter.Margin" Value="{ThemeResource TopNavigationViewItemMargin}" />
                                        <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPane}" />
                                        <Setter Target="ChildrenFlyout.Placement" Value="BottomEdgeAlignedLeft" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="OnTopNavigationOverflow">
                                    <VisualState.Setters>
                                        <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPaneOverflow}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>