modernkeepass/ModernKeePass/Pages/MainPage.xaml

<basePages:LayoutAwarePageBase
    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:viewModels="using:ModernKeePass.ViewModels" 
    xmlns:controls="using:ModernKeePass.Controls" 
    xmlns:basePages="using:ModernKeePass.Pages.BasePages"
    x:Class="ModernKeePass.Pages.MainPage"
    x:Name="PageRoot"
    mc:Ignorable="d">
    <Page.Resources>
        <CollectionViewSource 
            x:Name="MenuItemsSource" 
            Source="{Binding MainMenuItems}" 
            IsSourceGrouped="True" />
    </Page.Resources>

    <Page.Background>
        <StaticResource ResourceKey="ApplicationPageBackgroundThemeBrush"/>
    </Page.Background>
    <Page.DataContext>
        <viewModels:MainVm />
    </Page.DataContext>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="PrimaryColumn" Width="350" />
            <ColumnDefinition x:Name="SecondaryColumn" Width="*" />
        </Grid.ColumnDefinitions>

        <!-- Back button and page title -->
        <Grid x:Name="TitlePanel" Background="{ThemeResource AppBarBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="BackButton" Margin="39,20,0,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
                    Style="{StaticResource NavigationBackButtonNormalStyle}"
                    Visibility="Collapsed"
                    VerticalAlignment="Top"
                    AutomationProperties.Name="Back"
                    AutomationProperties.AutomationId="BackButton"
                    AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="TitleTextBox" Text="{Binding Name}" Grid.Column="1" FontSize="24" Margin="20" />
        </Grid>
        <controls:ListViewWithDisable 
            Grid.Column="0"
            Grid.Row="1"
            x:Name="MenuListView"
            SelectionChanged="MenuListView_SelectionChanged" 
            Background="{ThemeResource AppBarBackgroundThemeBrush}"
            ItemsSource="{Binding Source={StaticResource MenuItemsSource}}"
            SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
            IsSynchronizedWithCurrentItem="False">
            <controls:ListViewWithDisable.ItemTemplate>
                <DataTemplate >
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Symbol="{Binding SymbolIcon}" />
                        <TextBlock Text="{Binding Title}" Margin="10,5,0,0" />
                    </StackPanel>
                </DataTemplate>
            </controls:ListViewWithDisable.ItemTemplate>
            <controls:ListViewWithDisable.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="20,5,0,0" />
                    <Setter Property="Margin" Value="0" />
                </Style>
            </controls:ListViewWithDisable.ItemContainerStyle>
            <controls:ListViewWithDisable.GroupStyle>
                <GroupStyle HidesIfEmpty="True">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Background="DarkGray" Margin="20,0,0,0">
                                <Border Height="1" Width="300" HorizontalAlignment="Stretch"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </controls:ListViewWithDisable.GroupStyle>
        </controls:ListViewWithDisable>
        <Frame x:Name="MenuFrame" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Width="auto" Margin="30,60,0,0" />

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ViewStates">
                <VisualState x:Name="PrimaryView" />
                <VisualState x:Name="SinglePane">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuFrame" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuListView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,60"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <!--
                    When an item is selected and only one pane is shown the details display requires more extensive changes:
                     * Hide the master list and the column it was in
                     * Move item details down a row to make room for the title
                     * Move the title directly above the details
                     * Adjust padding for details
                 -->
                <VisualState x:Name="SinglePane_Detail">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuFrame" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuFrame" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleTextBox" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuFrame" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="10,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</basePages:LayoutAwarePageBase>