From c611f5a8a2306b2c7926c4aa33e65df823333960 Mon Sep 17 00:00:00 2001
From: Geoffroy Bonneville <geogeob@hotmail.com>
Date: Thu, 5 Oct 2017 14:50:42 +0200
Subject: [PATCH] Replaced arrow buttons with a hamburger icon in groups menu
 Created data triggers with Blend to handle item data template changes

---
 ModernKeePass/App.xaml                      | 40 +++++++++++++++++-
 ModernKeePass/ModernKeePass.csproj          |  6 ++-
 ModernKeePass/Pages/GroupDetailPage.xaml    | 47 ++++++++++++---------
 ModernKeePass/Pages/GroupDetailPage.xaml.cs | 19 ---------
 ModernKeePass/ViewModels/GroupVm.cs         | 13 ++++--
 5 files changed, 79 insertions(+), 46 deletions(-)

diff --git a/ModernKeePass/App.xaml b/ModernKeePass/App.xaml
index 65cbb66..86fd33e 100644
--- a/ModernKeePass/App.xaml
+++ b/ModernKeePass/App.xaml
@@ -2,6 +2,44 @@
     x:Class="ModernKeePass.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:ModernKeePass">
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
+    <Application.Resources>
+        <Style TargetType="ToggleButton" x:Name="HamburgerToggleButton">
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ToggleButton">
+                        <ContentControl>
+                            <Grid Background="Transparent" Margin="0" Width="77" Height="77">
+                                <Canvas x:Name="hampurger_menu" HorizontalAlignment="Center" Height="17" UseLayoutRounding="False" VerticalAlignment="Center" Width="28">
+                                    <Canvas x:Name="Layer_1" Height="17" Canvas.Left="0" Width="28" Margin="0" RenderTransformOrigin="0.5,0.5">
+                                        <Canvas.RenderTransform>
+                                            <CompositeTransform/>
+                                        </Canvas.RenderTransform>
+                                        <Canvas.Projection>
+                                            <PlaneProjection/>
+                                        </Canvas.Projection>
+                                        <Path x:Name="path" Data="M0,12.997 L30,12.997" Height="3" Stretch="Fill" StrokeThickness="3" Width="28" Stroke="#FF362D2D" StrokeStartLineCap="Square" StrokeEndLineCap="Square" RenderTransformOrigin="0.5,0.5">
+                                            <Path.RenderTransform>
+                                                <CompositeTransform/>
+                                            </Path.RenderTransform>
+                                        </Path>
+                                        <Path Data="M0,12.997 L30,12.997" Height="3" Stretch="Fill" StrokeThickness="3" Width="28" Stroke="#FF362D2D" StrokeStartLineCap="Square" StrokeEndLineCap="Square" Canvas.Top="7"/>
+                                        <Path x:Name="path1" Data="M0,12.997 L30,12.997" Height="3" Stretch="Fill" StrokeThickness="3" Width="28" Stroke="#FF362D2D" StrokeStartLineCap="Square" StrokeEndLineCap="Square" Canvas.Top="14" RenderTransformOrigin="0.5,0.5">
+                                            <Path.RenderTransform>
+                                                <CompositeTransform/>
+                                            </Path.RenderTransform>
+                                        </Path>
+                                    </Canvas>
+                                </Canvas>
+                            </Grid>
+                        </ContentControl>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="VerticalAlignment" Value="Top" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="Margin" Value="20" />
+        </Style>
+    </Application.Resources>
 
 </Application>
diff --git a/ModernKeePass/ModernKeePass.csproj b/ModernKeePass/ModernKeePass.csproj
index 390e322..32dbd51 100644
--- a/ModernKeePass/ModernKeePass.csproj
+++ b/ModernKeePass/ModernKeePass.csproj
@@ -222,7 +222,11 @@
       <Private>True</Private>
     </Reference>
   </ItemGroup>
-  <ItemGroup />
+  <ItemGroup>
+    <SDKReference Include="BehaviorsXamlSDKManaged, Version=12.0">
+      <Name>BehaviorsXamlSDKManaged</Name>
+    </SDKReference>
+  </ItemGroup>
   <ItemGroup>
     <Content Include="Assets\Logo.scale-100.png" />
     <Content Include="Assets\Logo.scale-140.png" />
diff --git a/ModernKeePass/Pages/GroupDetailPage.xaml b/ModernKeePass/Pages/GroupDetailPage.xaml
index f479094..61465b8 100644
--- a/ModernKeePass/Pages/GroupDetailPage.xaml
+++ b/ModernKeePass/Pages/GroupDetailPage.xaml
@@ -6,6 +6,8 @@
     xmlns:viewModels="using:ModernKeePass.ViewModels"
     xmlns:converters="using:ModernKeePass.Converters"
     xmlns:local="using:ModernKeePass.Controls"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
+    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
     x:Name="PageRoot"
     x:Class="ModernKeePass.Pages.GroupDetailPage"
     mc:Ignorable="d" >
@@ -18,7 +20,6 @@
     <Page.DataContext>
         <viewModels:GroupVm />
     </Page.DataContext>
-
     <Grid>
         <Grid.Resources>
             <CollectionViewSource
@@ -45,13 +46,9 @@
                     AutomationProperties.AutomationId="ItemGridView"
                     AutomationProperties.Name="Entries"
                     TabIndex="1"
-                    ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
                     IsSwipeEnabled="false" 
                     SelectionChanged="entries_SelectionChanged"
                     IsSynchronizedWithCurrentItem="False" >
-                    <GridView.DataContext>
-                        <viewModels:EntryVm></viewModels:EntryVm>
-                    </GridView.DataContext>
                     <GridView.Resources>
                         <DataTemplate x:Name="GroupFirstItem">
                             <Border 
@@ -93,6 +90,12 @@
                             </Border>
                         </DataTemplate>
                     </GridView.Resources>
+                    <GridView.ItemsSource>
+                        <Binding Source="{StaticResource EntriesViewSource}"/>
+                    </GridView.ItemsSource>
+                    <GridView.DataContext>
+                        <viewModels:EntryVm/>
+                    </GridView.DataContext>
                     <GridView.ItemTemplateSelector>
                         <local:FirstItemDataTemplateSelector 
                             FirstItem="{StaticResource GroupFirstItem}" 
@@ -110,17 +113,13 @@
                             Width="auto"
                             Background="LightGray"
                             Foreground="DarkSlateGray"
-                            ItemsSource="{Binding Source={StaticResource GroupsViewSource}}"
                             SelectionChanged="groups_SelectionChanged"
                             IsSwipeEnabled="false"
                             IsSynchronizedWithCurrentItem="False"
                             DataContext="{Binding DataContext, ElementName=PageRoot}">
                             <ListView.Resources>
                                 <DataTemplate x:Name="Collapsed">
-                                    <StackPanel
-                                        Margin="10,0,0,0"
-                                        Width="30"
-                                        Orientation="Horizontal" >
+                                    <StackPanel Margin="10,0,0,0" Width="30" Orientation="Horizontal" >
                                         <SymbolIcon Symbol="{Binding IconSymbol}" />
                                     </StackPanel>
                                 </DataTemplate>
@@ -131,23 +130,29 @@
                                         <!--<TextBlock Text="{Binding EntryCount}" HorizontalAlignment="Right" VerticalAlignment="Center" />-->
                                     </StackPanel>
                                 </DataTemplate>
-                                <DataTemplate x:Name="Forward">
-                                    <Button x:Name="ForwardButton" Click="Button_Click" BorderBrush="LightGray" HorizontalAlignment="Right">
-                                        <SymbolIcon Symbol="Forward" Foreground="DimGray" />
-                                    </Button>
-                                </DataTemplate>
-                                <DataTemplate x:Name="Back">
-                                    <Button x:Name="BackButton" Click="Button_Click" BorderBrush="LightGray" HorizontalAlignment="Right">
-                                        <SymbolIcon Symbol="Back" Foreground="DimGray" />
-                                    </Button>
-                                </DataTemplate>
                             </ListView.Resources>
+                            <ListView.ItemsSource>
+                                <Binding Source="{StaticResource GroupsViewSource}"/>
+                            </ListView.ItemsSource>
                             <ListView.ItemContainerStyle>
                                 <Style TargetType="ListViewItem">
                                     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                     <Setter Property="VerticalContentAlignment" Value="Stretch" />
                                 </Style>
                             </ListView.ItemContainerStyle>
+                            <ListView.HeaderTemplate>
+                                <DataTemplate>
+                                    <ToggleButton IsChecked="{Binding IsLeftPaneOpen, Mode=TwoWay}" Style="{StaticResource HamburgerToggleButton}" Margin="0" />
+                                </DataTemplate>
+                            </ListView.HeaderTemplate>
+                            <Interactivity:Interaction.Behaviors>
+                                <Core:DataTriggerBehavior Binding="{Binding IsLeftPaneOpen}" Value="True">
+                                    <Core:ChangePropertyAction PropertyName="ItemTemplate" Value="{StaticResource Expanded}"/>
+                                </Core:DataTriggerBehavior>
+                                <Core:DataTriggerBehavior Binding="{Binding IsLeftPaneOpen}" Value="False">
+                                    <Core:ChangePropertyAction PropertyName="ItemTemplate" Value="{StaticResource Collapsed}"/>
+                                </Core:DataTriggerBehavior>
+                            </Interactivity:Interaction.Behaviors>
                         </ListView>
                     </GridView.Header>
                 </GridView>
@@ -196,11 +201,11 @@
                 Margin="0,40,0,0" 
                 Background="Transparent" 
                 IsOpen="True">
-                <AppBarButton Icon="Save" Label="Save" />
                 <CommandBar.SecondaryCommands>
                     <AppBarButton Icon="Edit" Label="Edit" />
                     <AppBarButton Icon="Delete" Label="Delete" IsEnabled="{Binding IsNotRoot}" Click="AppBarButton_Click" />
                 </CommandBar.SecondaryCommands>
+                <AppBarButton Icon="Save" Label="Save" />
             </CommandBar>
         </Grid>
     </Grid>
diff --git a/ModernKeePass/Pages/GroupDetailPage.xaml.cs b/ModernKeePass/Pages/GroupDetailPage.xaml.cs
index 00112fd..eb58bb0 100644
--- a/ModernKeePass/Pages/GroupDetailPage.xaml.cs
+++ b/ModernKeePass/Pages/GroupDetailPage.xaml.cs
@@ -26,8 +26,6 @@ namespace ModernKeePass.Pages
             InitializeComponent();
             NavigationHelper = new NavigationHelper(this);
             NavigationHelper.LoadState += navigationHelper_LoadState;
-            LeftListView.ItemTemplate = (DataTemplate)LeftListView.Resources["Collapsed"];
-            LeftListView.HeaderTemplate = (DataTemplate)LeftListView.Resources["Forward"];
         }
 
         /// <summary>
@@ -106,22 +104,5 @@ namespace ModernKeePass.Pages
             group?.RemoveGroup();
             if (Frame.CanGoBack) Frame.GoBack();
         }
-
-        private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
-        {
-            var button = sender as Button;
-            if (button == null) return;
-            switch (button.Name)
-            {
-                case "ForwardButton":
-                    LeftListView.ItemTemplate = (DataTemplate) LeftListView.Resources["Expanded"];
-                    LeftListView.HeaderTemplate = (DataTemplate) LeftListView.Resources["Back"];
-                    break;
-                case "BackButton":
-                    LeftListView.ItemTemplate = (DataTemplate)LeftListView.Resources["Collapsed"];
-                    LeftListView.HeaderTemplate = (DataTemplate)LeftListView.Resources["Forward"];
-                    break;
-            }
-        }
     }
 }
diff --git a/ModernKeePass/ViewModels/GroupVm.cs b/ModernKeePass/ViewModels/GroupVm.cs
index e9d1747..d4e48bb 100644
--- a/ModernKeePass/ViewModels/GroupVm.cs
+++ b/ModernKeePass/ViewModels/GroupVm.cs
@@ -14,10 +14,10 @@ namespace ModernKeePass.ViewModels
         public ObservableCollection<EntryVm> Entries { get; set; } = new ObservableCollection<EntryVm>();
         public ObservableCollection<GroupVm> Groups { get; set; } = new ObservableCollection<GroupVm>();
         public string Name => _pwGroup == null ? "New group" : _pwGroup.Name;
-
         public int EntryCount => Entries.Count - 1;
-
         public int GroupCount => Groups.Count - 1;
+        public bool IsNotRoot => ParentGroup != null;
+        public FontWeight FontWeight => _pwGroup == null ? FontWeights.Bold : FontWeights.Normal;
         
         public Symbol IconSymbol
         {
@@ -29,10 +29,15 @@ namespace ModernKeePass.ViewModels
             }
         }
 
-        public bool IsNotRoot => ParentGroup != null;
-        public FontWeight FontWeight => _pwGroup == null ? FontWeights.Bold : FontWeights.Normal;
+        public bool IsLeftPaneOpen
+        {
+            get { return _isLeftPaneOpen; }
+            set { SetProperty(ref _isLeftPaneOpen, value); }
+        }
 
         private readonly PwGroup _pwGroup;
+        private bool _isLeftPaneOpen;
+
         public GroupVm() {}
 
         public GroupVm(PwGroup pwGroup, GroupVm parent)