modernkeepass/ModernKeePass/Views/UserControls/BreadcrumbUserControl.xaml

<UserControl
    x:Class="ModernKeePass.Views.UserControls.BreadcrumbUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="using:ModernKeePass.Converters"
    xmlns:templateSelectors="using:ModernKeePass.TemplateSelectors"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    mc:Ignorable="d">
    <Grid x:Name="StackPanel" DataContext="{Binding Source={StaticResource Locator}, Path=Breadcrumb}">
        <Grid.Resources>
            <converters:IconToSymbolConverter x:Key="IconToSymbolConverter"/>
            <DataTemplate x:Key="FirstItemTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="10,5,10,0" Text="{Binding Name}" FontStyle="Italic" HorizontalAlignment="Center" />
                    <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=33}" Margin="0,3,0,0" />
                </StackPanel>
            </DataTemplate>
            <DataTemplate x:Key="OtherItemTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="10,5,10,0" Text="&lt;" HorizontalAlignment="Center" />
                    <TextBlock Margin="10,5,10,0" Text="{Binding Name}" FontStyle="Italic" HorizontalAlignment="Center" />
                    <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=33}" Margin="0,3,0,0" />
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button
            Command="{Binding GoBackCommand}"
            Height="{StaticResource MenuHeight}"
            Width="{StaticResource MenuWidth}"
            AutomationProperties.Name="Back"
            AutomationProperties.AutomationId="BackButton"
            AutomationProperties.ItemType="Navigation Button"
            Style="{StaticResource NoBorderButtonStyle}">
            <SymbolIcon Symbol="Back" />
        </Button>
        <Button
            Grid.Column="1"
            Height="{StaticResource MenuHeight}"
            Command="{Binding GoUpCommand}"
            Style="{StaticResource NoBorderButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Symbol="Up" />
                <SymbolIcon x:Name="UpButtonIcon" Symbol="{Binding ParentGroupIcon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=33}" Margin="16,0,0,0" />
                <TextBlock x:Name="UpButtonText" Margin="10,2,0,0" Text="{Binding ParentGroupName}" FontStyle="Italic" FontWeight="Normal" HorizontalAlignment="Center" />
            </StackPanel>
            <ToolTipService.ToolTip>
                <ToolTip Content="{Binding ParentGroupName}" />
            </ToolTipService.ToolTip>
        </Button>
        <ListView x:Name="ListView" Grid.Column="2" ItemsSource="{Binding BreadcrumbItems}" HorizontalAlignment="Right">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel FlowDirection="RightToLeft" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplateSelector>
                <templateSelectors:FirstItemDataTemplateSelector FirstItem="{StaticResource FirstItemTemplate}" OtherItem="{StaticResource OtherItemTemplate}" />
            </ListView.ItemTemplateSelector>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="Height" Value="{StaticResource MenuHeight}" />
                </Style>
            </ListView.ItemContainerStyle>
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="SelectionChanged">
                    <core:InvokeCommandAction Command="{Binding GoToCommand}" CommandParameter="{Binding SelectedIndex, ElementName=ListView}" />
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
        </ListView>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="PageLayout">
                <VisualState x:Name="Small">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButtonIcon" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButtonText" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Medium">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButtonIcon" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButtonText" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Large">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButtonIcon" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButtonText" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>