modernkeepass/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml

<UserControl x:Name="UserControl"
    x:Class="ModernKeePass.Views.UserControls.HamburgerMenuUserControl"
    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:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:converters="using:ModernKeePass.Converters"
    xmlns:actions="using:ModernKeePass.Actions"
    xmlns:controls="using:ModernKeePass.Controls"
    mc:Ignorable="d">
    <UserControl.Resources>
        <converters:IconToSymbolConverter x:Key="IconToSymbolConverter"/>
    </UserControl.Resources>
    <Grid HorizontalAlignment="Left">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisibilityStates">
                <VisualState x:Name="Hidden">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Collapsed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MenuWidth}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Expanded">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpandedMenuSize}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="{StaticResource MenuHeightGridLength}" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <ToggleButton Style="{StaticResource HamburgerToggleButton}" IsChecked="{Binding IsOpen, ElementName=UserControl}" Unchecked="ToggleButton_OnUnchecked">
                <interactivity:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="Checked">
                        <core:GoToStateAction StateName="Expanded" />
                    </core:EventTriggerBehavior>
                </interactivity:Interaction.Behaviors>
            </ToggleButton>
            <TextBlock 
                x:Name="HeaderTextBlock" 
                Text="{Binding HeaderLabel, ElementName=UserControl}" 
                FontWeight="Bold"
                FontSize="18" 
                TextWrapping="NoWrap" 
                VerticalAlignment="Center" 
                Margin="30,0,20,0" 
                HorizontalAlignment="Center" />
        </StackPanel>
        <ListView 
            x:Name="ListView"
            Grid.Row="1"
            ItemsSource="{Binding ItemsSource, ElementName=UserControl}"
            SelectionChanged="Selector_OnSelectionChanged"
            SelectedItem="{Binding SelectedItem, ElementName=UserControl, Mode=TwoWay}"
            SelectedIndex="{Binding SelectedIndex, ElementName=UserControl, Mode=TwoWay}"
            IsSwipeEnabled="false"
            IsSynchronizedWithCurrentItem="False"
            Background="{ThemeResource AppBarBackgroundThemeBrush}"
            ItemContainerStyle="{StaticResource ListViewLeftIndicatorItemExpanded}">
            <ListView.ItemTemplate>
                <DataTemplate x:Name="IsNormal">
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
                            </ToolTipService.ToolTip>
                        </SymbolIcon>
                        <TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Visibility="{Binding IsButtonVisible, ElementName=UserControl}">
                        <Button x:Name="NewGroupButton"
                            Padding="0" Margin="0" 
                            Height="{StaticResource MenuWidth}" 
                            Visibility="{Binding IsButtonVisible, ElementName=UserControl}" 
                            Style="{StaticResource NoBorderButtonStyle}" 
                            Background="Transparent" 
                            BorderThickness="0" 
                            Width="{StaticResource ExpandedMenuSize}" 
                            HorizontalContentAlignment="Left">
                            <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
                                <SymbolIcon Symbol="Add">
                                    <ToolTipService.ToolTip>
                                        <ToolTip Content="{Binding ButtonLabel, ElementName=UserControl}" />
                                    </ToolTipService.ToolTip>
                                </SymbolIcon>
                                <TextBlock Text="{Binding ButtonLabel, ElementName=UserControl}" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
                            </StackPanel>
                            <interactivity:Interaction.Behaviors>
                                <core:EventTriggerBehavior EventName="Click">
                                    <core:ChangePropertyAction TargetObject="{Binding ElementName=NewGroupTextBox}" PropertyName="Visibility" Value="Visible" />
                                    <core:ChangePropertyAction TargetObject="{Binding ElementName=NewGroupButton}" PropertyName="Visibility" Value="Collapsed" />
                                    <actions:SetupFocusAction TargetObject="{Binding ElementName=NewGroupTextBox}" />
                                </core:EventTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </Button>
                        <controls:TextBoxWithButton 
                            x:Uid="NewGroupTextBox" 
                            x:Name="NewGroupTextBox" 
                            Margin="0,5,0,5" 
                            Visibility="Collapsed"
                            Width="280"
                            HorizontalAlignment="Center"
                            ButtonCommand="{Binding ActionButtonCommand, ElementName=UserControl}" 
                            ButtonCommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Text}"
                            Style="{StaticResource TextBoxWithButtonStyle}"
                            KeyDown="NewGroupTextBox_OnKeyDown"
                            ButtonSymbol="&#xE109;">
                            <interactivity:Interaction.Behaviors>
                                <core:EventTriggerBehavior EventName="LostFocus">
                                    <core:ChangePropertyAction TargetObject="{Binding ElementName=NewGroupButton}" PropertyName="Visibility" Value="Visible" />
                                    <core:ChangePropertyAction TargetObject="{Binding ElementName=NewGroupTextBox}" PropertyName="Visibility" Value="Collapsed" />
                                    <core:ChangePropertyAction TargetObject="{Binding ElementName=NewGroupTextBox}" PropertyName="Text" Value="" />
                                </core:EventTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </controls:TextBoxWithButton>
                        <Border BorderBrush="DarkGray" BorderThickness="0,0,0,1" />
                    </StackPanel>
                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.FooterTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <Border BorderBrush="DarkGray" BorderThickness="0,0,0,1" />
                        <Button Padding="0" Margin="0" 
                                Height="{StaticResource MenuWidth}" 
                                Style="{StaticResource NoBorderButtonStyle}" 
                                Background="Transparent" 
                                BorderThickness="0" 
                                Width="{StaticResource ExpandedMenuSize}" 
                                HorizontalContentAlignment="Left">
                            <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
                                <SymbolIcon Symbol="Home">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="HamburgerMenuHomeTooltip" />
                                    </ToolTipService.ToolTip>
                                </SymbolIcon>
                                <TextBlock x:Uid="HamburgerMenuHomeLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
                            </StackPanel>
                            <interactivity:Interaction.Behaviors>
                                <core:EventTriggerBehavior EventName="Click">
                                    <core:NavigateToPageAction TargetPage="ModernKeePass.Views.MainPage" />
                                </core:EventTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </Button>
                        <Button 
                            Padding="0" Margin="0" 
                            Height="{StaticResource MenuWidth}" 
                            Style="{StaticResource NoBorderButtonStyle}" 
                            Background="Transparent" 
                            BorderThickness="0" 
                            Width="{StaticResource ExpandedMenuSize}" 
                            HorizontalContentAlignment="Left">
                            <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
                                <SymbolIcon Symbol="Setting">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="HamburgerMenuSettingsTooltip" />
                                    </ToolTipService.ToolTip>
                                </SymbolIcon>
                                <TextBlock x:Uid="HamburgerMenuSettingsLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
                            </StackPanel>
                            <interactivity:Interaction.Behaviors>
                                <core:EventTriggerBehavior EventName="Click">
                                    <core:NavigateToPageAction TargetPage="ModernKeePass.Views.SettingsPage" />
                                </core:EventTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </ListView.FooterTemplate>
        </ListView>
    </Grid>
</UserControl>