Hamburger button menu is now a User Control

WIP History in Entry page

ModernKeePass/ModernKeePass.App.csproj

@@ -123,6 +123,7 @@
     <Compile Include="Interfaces\IResourceService.cs" />
     <Compile Include="Services\SingletonServiceBase.cs" />
     <Compile Include="TemplateSelectors\SelectableDataTemplateSelector.cs" />
+    <Compile Include="ViewModels\HistoryVm.cs" />
     <Compile Include="ViewModels\Items\SettingsSaveVm.cs" />
     <Compile Include="Views\MainPageFrames\DonatePage.xaml.cs">
       <DependentUpon>DonatePage.xaml</DependentUpon>
@@ -229,6 +230,9 @@
     <Compile Include="ViewModels\RecentVm.cs" />
     <Compile Include="ViewModels\SaveVm.cs" />
     <Compile Include="ViewModels\Items\SettingsDatabaseVm.cs" />
+    <Compile Include="Views\UserControls\HamburgerMenuUserControl.xaml.cs">
+      <DependentUpon>HamburgerMenuUserControl.xaml</DependentUpon>
+    </Compile>
   </ItemGroup>
   <ItemGroup>
     <AppxManifest Include="Package.appxmanifest">
@@ -352,6 +356,10 @@
       <Generator>MSBuild:Compile</Generator>
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Page>
+    <Page Include="Views\UserControls\HamburgerMenuUserControl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
   </ItemGroup>
   <ItemGroup>
     <Reference Include="BouncyCastle.Crypto, Version=1.8.2.0, Culture=neutral, PublicKeyToken=0e99375e54769942, processorArchitecture=MSIL">

ModernKeePass/Strings/en-US/Resources.resw

@@ -213,21 +213,9 @@
   <data name="GroupFilter.PlaceholderText" xml:space="preserve">
     <value>Filter...</value>
   </data>
-  <data name="GroupNewItemTextBox.Text" xml:space="preserve">
-    <value>New group</value>
-  </data>
-  <data name="GroupNewItemTooltip.Content" xml:space="preserve">
-    <value>New group</value>
-  </data>
   <data name="GroupSearch.PlaceholderText" xml:space="preserve">
     <value>Search...</value>
   </data>
-  <data name="GroupsHeaderTextBlock.Text" xml:space="preserve">
-    <value>Groups</value>
-  </data>
-  <data name="GroupsHeaderToolTip.Content" xml:space="preserve">
-    <value>Groups</value>
-  </data>
   <data name="GroupTitle.PlaceholderText" xml:space="preserve">
     <value>New group name...</value>
   </data>
@@ -390,4 +378,13 @@
   <data name="WelcomeOpen.Text" xml:space="preserve">
     <value>Have an existing password database? Open it here.</value>
   </data>
+  <data name="GroupsLeftListView.ButtonLabel" xml:space="preserve">
+    <value>New group</value>
+  </data>
+  <data name="GroupsLeftListView.HeaderLabel" xml:space="preserve">
+    <value>Groups</value>
+  </data>
+  <data name="HistoryLeftListView.HeaderLabel" xml:space="preserve">
+    <value>History</value>
+  </data>
 </root>

ModernKeePass/Strings/fr-FR/Resources.resw

@@ -213,21 +213,9 @@
   <data name="GroupFilter.PlaceholderText" xml:space="preserve">
     <value>Filtrer...</value>
   </data>
-  <data name="GroupNewItemTextBox.Text" xml:space="preserve">
-    <value>Nouveau groupe</value>
-  </data>
-  <data name="GroupNewItemTooltip.Content" xml:space="preserve">
-    <value>Nouveau groupe</value>
-  </data>
   <data name="GroupSearch.PlaceholderText" xml:space="preserve">
     <value>Rechercher...</value>
   </data>
-  <data name="GroupsHeaderTextBlock.Text" xml:space="preserve">
-    <value>Groupes</value>
-  </data>
-  <data name="GroupsHeaderToolTip.Content" xml:space="preserve">
-    <value>Groupes</value>
-  </data>
   <data name="GroupTitle.PlaceholderText" xml:space="preserve">
     <value>Nom du nouveau groupe...</value>
   </data>
@@ -390,4 +378,13 @@
   <data name="WelcomeOpen.Text" xml:space="preserve">
     <value>Pour ouvrir une base de données existante, c'est ici.</value>
   </data>
+  <data name="GroupsLeftListView.ButtonLabel" xml:space="preserve">
+    <value>Nouveau groupe</value>
+  </data>
+  <data name="GroupsLeftListView.HeaderLabel" xml:space="preserve">
+    <value>Groupes</value>
+  </data>
+  <data name="HistoryLeftListView.HeaderLabel" xml:space="preserve">
+    <value>Historique</value>
+  </data>
 </root>

ModernKeePass/ViewModels/EntryVm.cs

@@ -31,6 +31,8 @@ namespace ModernKeePass.ViewModels
         public string CustomChars { get; set; } = string.Empty;
         public PwUuid IdUuid => _pwEntry?.Uuid;
         public string Id => _pwEntry?.Uuid.ToHexString();
+        public bool IsRecycleOnDelete => _database.RecycleBinEnabled && !ParentGroup.IsSelected;
+        public IEnumerable<IPwEntity> BreadCrumb => new List<IPwEntity>(ParentGroup.BreadCrumb) {ParentGroup};
 
         public double PasswordLength
         {
@@ -117,9 +119,7 @@ namespace ModernKeePass.ViewModels
                 NotifyPropertyChanged("IsVisible");
             }
         }
-
-        public bool IsRecycleOnDelete => _database.RecycleBinEnabled && !ParentGroup.IsSelected;
-
+        
         public bool IsRevealPassword
         {
             get { return _isRevealPassword; }
@@ -139,7 +139,16 @@ namespace ModernKeePass.ViewModels
             }
         }
 
-        public IEnumerable<IPwEntity> BreadCrumb => new List<IPwEntity>(ParentGroup.BreadCrumb) {ParentGroup};
+        public IEnumerable<IPwEntity> History
+        {
+            get
+            {
+                foreach (var historyEntry in _pwEntry.History)
+                {
+                    yield return new EntryVm(historyEntry, ParentGroup);
+                }
+            }
+        }
 
         public event PropertyChangedEventHandler PropertyChanged;
 

ModernKeePass/ViewModels/HistoryVm.cs

@@ -0,0 +1,19 @@
+using System.Collections.Generic;
+using ModernKeePass.Interfaces;
+
+namespace ModernKeePass.ViewModels
+{
+    public class HistoryVm: IHasSelectableObject
+    {
+        public IEnumerable<IPwEntity> History { get; }
+
+        public HistoryVm() { }
+
+        public HistoryVm(IEnumerable<IPwEntity> history)
+        {
+            History = history;
+        }
+
+        public ISelectableModel SelectedItem { get; set; }
+    }
+}

ModernKeePass/Views/EntryDetailPage.xaml

@@ -373,9 +373,9 @@
             </Setter>
         </Style>
     </Page.Resources>
-    <Page.DataContext>
+    <!--<Page.DataContext>
         <viewModels:EntryVm />
-    </Page.DataContext>
+    </Page.DataContext>-->
     <Page.BottomAppBar>
         <CommandBar x:Name="CommandBar" VerticalAlignment="Center">
             <CommandBar.SecondaryCommands>
@@ -429,63 +429,68 @@
             <RowDefinition Height="50"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
-
-        <StackPanel Grid.Row="1" Margin="20,0,0,0" >
-            <StackPanel.Resources>
-                <Style TargetType="TextBlock">
-                    <Setter Property="Margin" Value="0,20,0,0"/>
-                </Style>
-                <Style TargetType="CheckBox">
-                    <Setter Property="Margin" Value="0,20,0,0"/>
-                </Style>
-            </StackPanel.Resources>
-            <TextBlock x:Uid="EntryLogin" TextWrapping="Wrap" FontSize="18"/>
-            <local:TextBoxWithButton HorizontalAlignment="Left" Text="{Binding UserName, Mode=TwoWay}" Width="350" Height="32" Style="{StaticResource TextBoxWithButtonStyle}" ButtonSymbol="&#xE16F;" ButtonTooltip="Copy">
-                <interactivity:Interaction.Behaviors>
-                    <core:EventTriggerBehavior EventName="ButtonClick">
-                        <actions:ClipboardAction Text="{Binding UserName}" />
-                    </core:EventTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-            </local:TextBoxWithButton>
-            <TextBlock x:Uid="EntryPassword" TextWrapping="Wrap" FontSize="18"/>
-            <PasswordBox HorizontalAlignment="Left" Password="{Binding Password, Mode=TwoWay}" Width="350" Height="32" IsPasswordRevealButtonEnabled="True" Visibility="{Binding IsRevealPassword, Converter={StaticResource InverseBooleanToVisibilityConverter}}" Style="{StaticResource PasswordBoxWithButtonStyle}" />
-            <local:TextBoxWithButton HorizontalAlignment="Left" Text="{Binding Password, Mode=TwoWay}" Width="350" Height="32" Visibility="{Binding IsRevealPassword, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource TextBoxWithButtonStyle}" ButtonSymbol="&#xE16F;" ButtonTooltip="Copy">
-                <interactivity:Interaction.Behaviors>
-                    <core:EventTriggerBehavior EventName="ButtonClick">
-                        <actions:ClipboardAction Text="{Binding Password}" />
-                    </core:EventTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-            </local:TextBoxWithButton>
-            <ProgressBar Value="{Binding PasswordComplexityIndicator, ConverterParameter=0\,128, Converter={StaticResource ProgressBarLegalValuesConverter}}" Maximum="128" Width="350" HorizontalAlignment="Left" Foreground="{Binding PasswordComplexityIndicator, ConverterParameter=128, Converter={StaticResource DoubleToForegroungBrushComplexityConverter}}" />
-            <CheckBox x:Uid="EntryShowPassword" HorizontalAlignment="Left" Margin="-3,0,0,0" IsChecked="{Binding IsRevealPassword, Mode=TwoWay}" IsEnabled="{Binding IsRevealPasswordEnabled}" />
-            <TextBlock TextWrapping="Wrap" Text="URL" FontSize="18"/>
-            <local:TextBoxWithButton HorizontalAlignment="Left" Text="{Binding Url, Mode=TwoWay}" Height="32" Width="350" MaxLength="256" Style="{StaticResource TextBoxWithButtonStyle}" ButtonSymbol="&#xE111;" ButtonTooltip="Navigate to URL">
-                <interactivity:Interaction.Behaviors>
-                    <core:EventTriggerBehavior EventName="ButtonClick">
-                        <actions:NavigateToUrlAction Url="{Binding Url}" />
-                    </core:EventTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-            </local:TextBoxWithButton>
-            <TextBlock x:Uid="EntryNotes" TextWrapping="Wrap" FontSize="18" />
-            <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Notes, Mode=TwoWay}" Width="350" Height="200" AcceptsReturn="True" IsSpellCheckEnabled="True" />
-            <CheckBox  x:Uid="EntryExpirationDate" FontSize="18" IsChecked="{Binding HasExpirationDate, Mode=TwoWay}" />
-            <Grid>
+            <Grid Grid.Row="1">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="50" x:Name="LeftListViewColumn" />
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
-                <SymbolIcon Grid.Column="0" Symbol="Important" Foreground="DarkRed" Visibility="{Binding HasExpired, Converter={StaticResource BooleanToVisibilityConverter}}">
-                    <ToolTipService.ToolTip>
-                        <ToolTip x:Uid="EntryExpirationTooltip" />
-                    </ToolTipService.ToolTip>
-                </SymbolIcon>
-                <StackPanel Grid.Column="1" x:Name="ExpirationDatePanel" Orientation="Horizontal" Visibility="{Binding HasExpirationDate, Converter={StaticResource BooleanToVisibilityConverter}}">
-                    <DatePicker Margin="0,0,20,0" Date="{Binding ExpiryDate, Mode=TwoWay}" Style="{StaticResource MainColorDatePicker}" />
-                <TimePicker Time="{Binding ExpiryTime, Mode=TwoWay}"/>
+                <userControls:HamburgerMenuUserControl x:Uid="HistoryLeftListView" ItemsSource="{Binding History}" ResizeTarget="{Binding ElementName=LeftListViewColumn}" />
+                <StackPanel Grid.Column="1" Margin="20,0,0,0" >
+                <StackPanel.Resources>
+                    <Style TargetType="TextBlock">
+                        <Setter Property="Margin" Value="0,20,0,0"/>
+                    </Style>
+                    <Style TargetType="CheckBox">
+                        <Setter Property="Margin" Value="0,20,0,0"/>
+                    </Style>
+                </StackPanel.Resources>
+                <TextBlock x:Uid="EntryLogin" TextWrapping="Wrap" FontSize="18"/>
+                <local:TextBoxWithButton HorizontalAlignment="Left" Text="{Binding UserName, Mode=TwoWay}" Width="350" Height="32" Style="{StaticResource TextBoxWithButtonStyle}" ButtonSymbol="&#xE16F;" ButtonTooltip="Copy">
+                    <interactivity:Interaction.Behaviors>
+                        <core:EventTriggerBehavior EventName="ButtonClick">
+                            <actions:ClipboardAction Text="{Binding UserName}" />
+                        </core:EventTriggerBehavior>
+                    </interactivity:Interaction.Behaviors>
+                </local:TextBoxWithButton>
+                <TextBlock x:Uid="EntryPassword" TextWrapping="Wrap" FontSize="18"/>
+                <PasswordBox HorizontalAlignment="Left" Password="{Binding Password, Mode=TwoWay}" Width="350" Height="32" IsPasswordRevealButtonEnabled="True" Visibility="{Binding IsRevealPassword, Converter={StaticResource InverseBooleanToVisibilityConverter}}" Style="{StaticResource PasswordBoxWithButtonStyle}" />
+                <local:TextBoxWithButton HorizontalAlignment="Left" Text="{Binding Password, Mode=TwoWay}" Width="350" Height="32" Visibility="{Binding IsRevealPassword, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource TextBoxWithButtonStyle}" ButtonSymbol="&#xE16F;" ButtonTooltip="Copy">
+                    <interactivity:Interaction.Behaviors>
+                        <core:EventTriggerBehavior EventName="ButtonClick">
+                            <actions:ClipboardAction Text="{Binding Password}" />
+                        </core:EventTriggerBehavior>
+                    </interactivity:Interaction.Behaviors>
+                </local:TextBoxWithButton>
+                <ProgressBar Value="{Binding PasswordComplexityIndicator, ConverterParameter=0\,128, Converter={StaticResource ProgressBarLegalValuesConverter}}" Maximum="128" Width="350" HorizontalAlignment="Left" Foreground="{Binding PasswordComplexityIndicator, ConverterParameter=128, Converter={StaticResource DoubleToForegroungBrushComplexityConverter}}" />
+                <CheckBox x:Uid="EntryShowPassword" HorizontalAlignment="Left" Margin="-3,0,0,0" IsChecked="{Binding IsRevealPassword, Mode=TwoWay}" IsEnabled="{Binding IsRevealPasswordEnabled}" />
+                <TextBlock TextWrapping="Wrap" Text="URL" FontSize="18"/>
+                <local:TextBoxWithButton HorizontalAlignment="Left" Text="{Binding Url, Mode=TwoWay}" Height="32" Width="350" MaxLength="256" Style="{StaticResource TextBoxWithButtonStyle}" ButtonSymbol="&#xE111;" ButtonTooltip="Navigate to URL">
+                    <interactivity:Interaction.Behaviors>
+                        <core:EventTriggerBehavior EventName="ButtonClick">
+                            <actions:NavigateToUrlAction Url="{Binding Url}" />
+                        </core:EventTriggerBehavior>
+                    </interactivity:Interaction.Behaviors>
+                </local:TextBoxWithButton>
+                <TextBlock x:Uid="EntryNotes" TextWrapping="Wrap" FontSize="18" />
+                <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Notes, Mode=TwoWay}" Width="350" Height="200" AcceptsReturn="True" IsSpellCheckEnabled="True" />
+                <CheckBox  x:Uid="EntryExpirationDate" FontSize="18" IsChecked="{Binding HasExpirationDate, Mode=TwoWay}" />
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <SymbolIcon Grid.Column="0" Symbol="Important" Foreground="DarkRed" Visibility="{Binding HasExpired, Converter={StaticResource BooleanToVisibilityConverter}}">
+                        <ToolTipService.ToolTip>
+                            <ToolTip x:Uid="EntryExpirationTooltip" />
+                        </ToolTipService.ToolTip>
+                    </SymbolIcon>
+                    <StackPanel Grid.Column="1" x:Name="ExpirationDatePanel" Orientation="Horizontal" Visibility="{Binding HasExpirationDate, Converter={StaticResource BooleanToVisibilityConverter}}">
+                        <DatePicker Margin="0,0,20,0" Date="{Binding ExpiryDate, Mode=TwoWay}" Style="{StaticResource MainColorDatePicker}" />
+                    <TimePicker Time="{Binding ExpiryTime, Mode=TwoWay}"/>
+                </StackPanel>
+                </Grid>
             </StackPanel>
-            </Grid>
-        </StackPanel>
-
+        </Grid>
         <!-- Bouton Précédent et titre de la page -->
         <Grid Grid.Row="0" Background="{ThemeResource AppBarBackgroundThemeBrush}">
             <Grid.ColumnDefinitions>

ModernKeePass/Views/GroupDetailPage.xaml

@@ -116,90 +116,7 @@
                 <ColumnDefinition Width="50" x:Name="LeftListViewColumn" />
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
-            <ListView 
-                Grid.Column="0"
-                x:Name="LeftListView"
-                SelectionChanged="groups_SelectionChanged"
-                IsSwipeEnabled="false"
-                IsSynchronizedWithCurrentItem="False"
-                DataContext="{Binding DataContext, ElementName=PageRoot}" 
-                RequestedTheme="Dark"
-                Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-                Foreground="{ThemeResource DefaultTextForegroundThemeBrush}">
-                <ListView.Resources>
-                    <DataTemplate x:Name="IsRecycleBin">
-                        <StackPanel Orientation="Horizontal">
-                            <SymbolIcon Symbol="{Binding IconId, Converter={StaticResource IntToSymbolConverter}}" Margin="8,0,0,0">
-                                <ToolTipService.ToolTip>
-                                    <ToolTip Content="{Binding Name}" />
-                                </ToolTipService.ToolTip>
-                            </SymbolIcon>
-                            <TextBlock Text="{Binding Name}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" FontStyle="Italic" />
-                        </StackPanel>
-                    </DataTemplate>
-                    <DataTemplate x:Name="IsNotRecycleBin">
-                        <StackPanel Orientation="Horizontal">
-                            <SymbolIcon Symbol="{Binding IconId, Converter={StaticResource IntToSymbolConverter}}" Margin="8,0,0,0">
-                                <ToolTipService.ToolTip>
-                                    <ToolTip Content="{Binding Name}" />
-                                </ToolTipService.ToolTip>
-                            </SymbolIcon>
-                            <TextBlock Text="{Binding Name}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" />
-                        </StackPanel>
-                    </DataTemplate>
-                </ListView.Resources>
-                <ListView.ItemTemplateSelector>
-                    <templateSelectors:SelectableDataTemplateSelector FalseItem="{StaticResource IsNotRecycleBin}" TrueItem="{StaticResource IsRecycleBin}" />
-                </ListView.ItemTemplateSelector>
-                <ListView.ItemsSource>
-                    <Binding Source="{StaticResource GroupsViewSource}"/>
-                </ListView.ItemsSource>
-                <ListView.ItemContainerStyle>
-                    <Style TargetType="ListViewItem">
-                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
-                        <Setter Property="Padding" Value="0"/>
-                        <Setter Property="Margin" Value="0"/>
-                        <Setter Property="AllowDrop" Value="True"/>
-                    </Style>
-                </ListView.ItemContainerStyle>
-                <ListView.HeaderTemplate>
-                    <DataTemplate>
-                        <StackPanel Orientation="Horizontal">
-                            <ToggleButton Style="{StaticResource HamburgerToggleButton}">
-                                <ToolTipService.ToolTip>
-                                    <ToolTip x:Uid="GroupsHeaderToolTip" />
-                                </ToolTipService.ToolTip>
-                                <interactivity:Interaction.Behaviors>
-                                    <core:EventTriggerBehavior EventName="Checked">
-                                        <core:ChangePropertyAction PropertyName="Width" Value="Auto" TargetObject="{Binding ElementName=LeftListViewColumn}"/>
-                                    </core:EventTriggerBehavior>
-                                    <core:EventTriggerBehavior EventName="Unchecked">
-                                        <core:ChangePropertyAction PropertyName="Width" Value="50" TargetObject="{Binding ElementName=LeftListViewColumn}"/>
-                                    </core:EventTriggerBehavior>
-                                </interactivity:Interaction.Behaviors>
-                            </ToggleButton>
-                            <TextBlock x:Uid="GroupsHeaderTextBlock" FontWeight="Bold" FontSize="18" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" HorizontalAlignment="Center" />
-                        </StackPanel>
-                    </DataTemplate>
-                </ListView.HeaderTemplate>
-                <ListView.FooterTemplate>
-                    <DataTemplate>
-                        <StackPanel Orientation="Vertical" Visibility="{Binding IsSelected, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
-                            <Border BorderBrush="White" BorderThickness="0,0,0,1" />
-                            <Button Padding="0" Height="50" Margin="0" Style="{StaticResource NoBorderButtonStyle}" Background="Transparent" BorderThickness="0" Click="CreateGroup_ButtonClick">
-                                <StackPanel Orientation="Horizontal" Margin="13,0,5,0">
-                                    <SymbolIcon Symbol="Add">
-                                        <ToolTipService.ToolTip>
-                                            <ToolTip x:Uid="GroupNewItemTooltip" />
-                                        </ToolTipService.ToolTip>
-                                    </SymbolIcon>
-                                    <TextBlock x:Uid="GroupNewItemTextBox" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
-                                </StackPanel>
-                            </Button>
-                        </StackPanel>
-                    </DataTemplate>
-                </ListView.FooterTemplate>
-            </ListView>
+            <userControls:HamburgerMenuUserControl x:Uid="GroupsLeftListView" ItemsSource="{Binding Groups}" SelectionChanged="groups_SelectionChanged" ButtonClicked="CreateGroup_ButtonClick" ResizeTarget="{Binding ElementName=LeftListViewColumn}" />
             <TextBlock Grid.Column="1" x:Uid="ReorderEntriesLabel" Margin="20,20,0,0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource BodyTextBlockStyle}" />
             <HyperlinkButton Grid.Column="1" VerticalAlignment="Top" Margin="40,10,0,0" Click="CreateEntry_ButtonClick" Visibility="{Binding IsSelected, Converter={StaticResource InverseBooleanToVisibilityConverter}}" HorizontalAlignment="Right" Foreground="{StaticResource MainColor}" Style="{StaticResource MainColorHyperlinkButton}">
                 <StackPanel Orientation="Horizontal">

ModernKeePass/Views/GroupDetailPage.xaml.cs

@@ -79,13 +79,14 @@ namespace ModernKeePass.Views
 
         private void groups_SelectionChanged(object sender, SelectionChangedEventArgs e)
         {
+            var listView = sender as ListView;
             GroupVm group;
-            switch (LeftListView.SelectedIndex)
+            switch (listView?.SelectedIndex)
             {
                 case -1:
                     return;
                 default:
-                    group = LeftListView.SelectedItem as GroupVm;
+                    group = listView?.SelectedItem as GroupVm;
                     break;
             }
             Frame.Navigate(typeof(GroupDetailPage), group);

ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml

@@ -0,0 +1,95 @@
+<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:templateSelectors="using:ModernKeePass.TemplateSelectors"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:converters="using:ModernKeePass.Converters"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <converters:InverseBooleanToVisibilityConverter x:Key="InverseBooleanToVisibilityConverter"/>
+        <converters:IntToSymbolConverter x:Key="IntToSymbolConverter"/>
+    </UserControl.Resources>
+    <ListView
+        ItemsSource="{Binding ItemsSource, ElementName=UserControl}"
+        SelectionChanged="Selector_OnSelectionChanged"
+        IsSwipeEnabled="false"
+        IsSynchronizedWithCurrentItem="False"
+        RequestedTheme="Dark"
+        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+        Foreground="{ThemeResource DefaultTextForegroundThemeBrush}">
+        <ListView.Resources>
+            <DataTemplate x:Name="IsSpecial">
+                <StackPanel Orientation="Horizontal">
+                    <SymbolIcon Symbol="{Binding IconId, Converter={StaticResource IntToSymbolConverter}}" Margin="8,0,0,0">
+                        <ToolTipService.ToolTip>
+                            <ToolTip Content="{Binding Name}" />
+                        </ToolTipService.ToolTip>
+                    </SymbolIcon>
+                    <TextBlock Text="{Binding Name}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" FontStyle="Italic" />
+                </StackPanel>
+            </DataTemplate>
+            <DataTemplate x:Name="IsNormal">
+                <StackPanel Orientation="Horizontal">
+                    <SymbolIcon Symbol="{Binding IconId, Converter={StaticResource IntToSymbolConverter}}" Margin="8,0,0,0">
+                        <ToolTipService.ToolTip>
+                            <ToolTip Content="{Binding Name}" />
+                        </ToolTipService.ToolTip>
+                    </SymbolIcon>
+                    <TextBlock Text="{Binding Name}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" />
+                </StackPanel>
+            </DataTemplate>
+        </ListView.Resources>
+        <ListView.ItemTemplateSelector>
+            <templateSelectors:SelectableDataTemplateSelector FalseItem="{StaticResource IsNormal}" TrueItem="{StaticResource IsSpecial}" />
+        </ListView.ItemTemplateSelector>
+        <ListView.ItemContainerStyle>
+            <Style TargetType="ListViewItem">
+                <Setter Property="VerticalContentAlignment" Value="Stretch" />
+                <Setter Property="Padding" Value="0"/>
+                <Setter Property="Margin" Value="0"/>
+                <Setter Property="AllowDrop" Value="True"/>
+            </Style>
+        </ListView.ItemContainerStyle>
+        <ListView.HeaderTemplate>
+            <DataTemplate>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleButton Style="{StaticResource HamburgerToggleButton}">
+                        <ToolTipService.ToolTip>
+                            <ToolTip Content="{Binding HeaderLabel, ElementName=UserControl}" />
+                        </ToolTipService.ToolTip>
+                        <interactivity:Interaction.Behaviors>
+                            <core:EventTriggerBehavior EventName="Checked">
+                                <core:ChangePropertyAction PropertyName="Width" Value="Auto" TargetObject="{Binding ResizeTarget, ElementName=UserControl}"/>
+                            </core:EventTriggerBehavior>
+                            <core:EventTriggerBehavior EventName="Unchecked">
+                                <core:ChangePropertyAction PropertyName="Width" Value="50" TargetObject="{Binding ResizeTarget, ElementName=UserControl}"/>
+                            </core:EventTriggerBehavior>
+                        </interactivity:Interaction.Behaviors>
+                    </ToggleButton>
+                    <TextBlock Text="{Binding HeaderLabel, ElementName=UserControl}" FontWeight="Bold" FontSize="18" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" HorizontalAlignment="Center" />
+                </StackPanel>
+            </DataTemplate>
+        </ListView.HeaderTemplate>
+        <ListView.FooterTemplate>
+            <DataTemplate>
+                <StackPanel Orientation="Vertical" Visibility="{Binding IsSelected, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
+                    <Border BorderBrush="White" BorderThickness="0,0,0,1" />
+                    <Button Padding="0" Height="50" Margin="0" Style="{StaticResource NoBorderButtonStyle}" Background="Transparent" BorderThickness="0" Click="ButtonBase_OnClick">
+                        <StackPanel Orientation="Horizontal" Margin="13,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>
+                    </Button>
+                </StackPanel>
+            </DataTemplate>
+        </ListView.FooterTemplate>
+    </ListView>
+</UserControl>

ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml.cs

@@ -0,0 +1,82 @@
+using System.Collections.Generic;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using ModernKeePass.Interfaces;
+
+// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
+
+namespace ModernKeePass.Views.UserControls
+{
+    // TODO: Add a property (string path) that allows chosing which field to display 
+    public sealed partial class HamburgerMenuUserControl
+    {
+        public HamburgerMenuUserControl()
+        {
+            InitializeComponent();
+        }
+
+        public string HeaderLabel
+        {
+            get { return (string)GetValue(HeaderLabelProperty); }
+            set { SetValue(HeaderLabelProperty, value); }
+        }
+        public static readonly DependencyProperty HeaderLabelProperty =
+            DependencyProperty.Register(
+                "HeaderLabel",
+                typeof(string),
+                typeof(HamburgerMenuUserControl),
+                new PropertyMetadata("Header", (o, args) => { }));
+
+        public string ButtonLabel
+        {
+            get { return (string)GetValue(ButtonLabelProperty); }
+            set { SetValue(ButtonLabelProperty, value); }
+        }
+        // TODO: set a boolean that will show/hide the button when a value is set/not set
+        public static readonly DependencyProperty ButtonLabelProperty =
+            DependencyProperty.Register(
+                "ButtonLabel",
+                typeof(string),
+                typeof(HamburgerMenuUserControl),
+                new PropertyMetadata("Button", (o, args) => { }));
+
+        public object ResizeTarget
+        {
+            get { return GetValue(ResizeTargetProperty); }
+            set { SetValue(ResizeTargetProperty, value); }
+        }
+        public static readonly DependencyProperty ResizeTargetProperty =
+            DependencyProperty.Register(
+                "ResizeTarget",
+                typeof(object),
+                typeof(HamburgerMenuUserControl),
+                new PropertyMetadata(null, (o, args) => { }));
+
+        public IEnumerable<IPwEntity> ItemsSource
+        {
+            get { return (IEnumerable<IPwEntity>)GetValue(ItemsSourceProperty); }
+            set { SetValue(ItemsSourceProperty, value); }
+        }
+
+        public static readonly DependencyProperty ItemsSourceProperty =
+            DependencyProperty.Register(
+                "ItemsSource",
+                typeof(IEnumerable<IPwEntity>),
+                typeof(HamburgerMenuUserControl),
+                new PropertyMetadata(new List<IPwEntity>(), (o, args) => { }));
+
+        public event SelectionChangedEventHandler SelectionChanged;
+        public delegate void SelectionChangedEventHandler(object sender, SelectionChangedEventArgs e);
+        private void Selector_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            SelectionChanged?.Invoke(sender, e);
+        }
+
+        public event ButtonClickedEventHandler ButtonClicked;
+        public delegate void ButtonClickedEventHandler(object sender, RoutedEventArgs e);
+        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
+        {
+            ButtonClicked?.Invoke(sender, e);
+        }
+    }
+}