Major redesign in the Group Detail page:

- groups and entries are inverted
- groups are in a collapsable menu (to be improved!)

ModernKeePass/Pages/EntryDetailPage.xaml.cs

@@ -41,9 +41,7 @@ namespace ModernKeePass.Pages
         /// <see cref="Frame.Navigate(Type, object)"/> lors de la requête initiale de cette page et
         /// un dictionnaire d'état conservé par cette page durant une session
         /// antérieure.  L'état n'aura pas la valeur Null lors de la première visite de la page.</param>
-        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
-        {
-        }
+        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e) {}
 
         #region Inscription de NavigationHelper
 

ModernKeePass/Pages/GroupDetailPage.xaml

@@ -14,47 +14,11 @@
         <SolidColorBrush x:Key="White" Color="White"/>
         <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
         <converters:PluralizationConverter x:Key="PluralizationConverter"/>
-        <DataTemplate x:Name="GroupFirstItem">
-            <Border 
-                BorderThickness="2" 
-                BorderBrush="DimGray" 
-                Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
-                Margin="0,10,0,0" >
-                <Grid Height="110" Width="480" >
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto"/>
-                        <ColumnDefinition Width="*"/>
-                    </Grid.ColumnDefinitions>
-                    <SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
-                    <TextBlock Grid.Column="1" Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="13,0,0,5"/>
-                </Grid>
-            </Border>
-        </DataTemplate>
-        <DataTemplate x:Name="GroupOtherItem">
-            <Border 
-                BorderThickness="2" 
-                BorderBrush="DimGray" 
-                Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
-                Margin="0,10,0,0" >
-                <Grid Height="110" Width="480" >
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto"/>
-                        <ColumnDefinition Width="*"/>
-                    </Grid.ColumnDefinitions>
-                    <SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
-                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0" >
-                        <TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
-                        <TextBlock Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
-                        <TextBlock Text="{Binding EntryCount, ConverterParameter=entry\,entries, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
-                        <TextBlock Text="{Binding GroupCount, ConverterParameter=group\,groups, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
-                    </StackPanel>
-                </Grid>
-            </Border>
-        </DataTemplate>
     </Page.Resources>
     <Page.DataContext>
         <viewModels:GroupVm />
     </Page.DataContext>
+
     <Grid>
         <Grid.Resources>
             <CollectionViewSource
@@ -64,65 +28,120 @@
                 x:Name="EntriesViewSource"
                 Source="{Binding Entries}"/>
         </Grid.Resources>
-        <Grid.ChildrenTransitions>
+        <!--<Grid.ChildrenTransitions>
             <TransitionCollection>
                 <EntranceThemeTransition/>
             </TransitionCollection>
-        </Grid.ChildrenTransitions>
+        </Grid.ChildrenTransitions>-->
         <Grid.RowDefinitions>
             <RowDefinition Height="140"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <!-- Horizontal scrolling grid -->
-        <SemanticZoom
-            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-            Grid.RowSpan="2"
-            Padding="20,126,20,50">
+        <SemanticZoom Grid.RowSpan="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="0,140,0,0">
             <SemanticZoom.ZoomedInView>
                 <GridView
+                    x:Name="GridView"
                     AutomationProperties.AutomationId="ItemGridView"
-                    AutomationProperties.Name="Groups"
+                    AutomationProperties.Name="Entries"
                     TabIndex="1"
-                    ItemsSource="{Binding Source={StaticResource GroupsViewSource}}"
+                    ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
                     IsSwipeEnabled="false" 
-                    SelectionChanged="groups_SelectionChanged"
+                    SelectionChanged="entries_SelectionChanged"
                     IsSynchronizedWithCurrentItem="False" >
+                    <GridView.DataContext>
+                        <viewModels:EntryVm></viewModels:EntryVm>
+                    </GridView.DataContext>
+                    <GridView.Resources>
+                        <DataTemplate x:Name="GroupFirstItem">
+                            <Border 
+                                BorderThickness="2" 
+                                BorderBrush="DimGray" 
+                                Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
+                                Margin="0,10,0,0" >
+                                <Grid Height="110" Width="480" >
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="*"/>
+                                    </Grid.ColumnDefinitions>
+                                    <SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
+                                    <TextBlock Grid.Column="1" Text="{Binding Title}" FontWeight="{Binding FontWeight}"  Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="13,0,0,5"/>
+                                </Grid>
+                            </Border>
+                        </DataTemplate>
+                        <DataTemplate x:Name="GroupOtherItem">
+                            <Border 
+                                    BorderThickness="2" 
+                                    BorderBrush="DimGray" 
+                                    Background="{Binding BackgroundColor, ConverterParameter={StaticResource Transparent}, Converter={StaticResource ColorToBrushConverter}}" 
+                                    Margin="0,10,0,0" >
+                                <Grid Height="110" Width="480" >
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="*"/>
+                                    </Grid.ColumnDefinitions>
+                                    <SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
+                                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0" >
+                                        <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource White}, Converter={StaticResource ColorToBrushConverter}}"/>
+                                        <TextBlock Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
+                                        <!--<TextBlock Text="{Binding EntryCount, ConverterParameter=entry\,entries, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
+                                        <TextBlock Text="{Binding GroupCount, ConverterParameter=group\,groups, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />-->
+                                        <TextBlock Text="{Binding UserName}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
+                                        <TextBlock Text="{Binding Url}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
+                                    </StackPanel>
+                                </Grid>
+                            </Border>
+                        </DataTemplate>
+                    </GridView.Resources>
                     <GridView.ItemTemplateSelector>
                         <local:FirstItemDataTemplateSelector 
                             FirstItem="{StaticResource GroupFirstItem}" 
                             OtherItem="{StaticResource GroupOtherItem}" />
-                        </GridView.ItemTemplateSelector>
+                    </GridView.ItemTemplateSelector>
+                    <GridView.ItemContainerStyle>
+                        <Style TargetType="FrameworkElement">
+                            <Setter Property="Margin" Value="52,0,0,2"/>
+                        </Style>
+                    </GridView.ItemContainerStyle>
                     <GridView.Header>
                         <ListView 
+                            x:Name="LeftListView"
                             Height="auto" 
-                            Width="480" 
-                            ItemsSource="{Binding Source={StaticResource EntriesViewSource}}" 
-                            Margin="10,0,0,0" 
-                            SelectionChanged="entriesListView_SelectionChanged"
-                            IsSwipeEnabled="false" 
-                            IsSynchronizedWithCurrentItem="False" >
-                            <ListView.ItemTemplate>
-                                <DataTemplate>
-                                    <StackPanel 
-                                        Orientation="Horizontal" 
-                                        Background="{Binding BackgroundColor, ConverterParameter={StaticResource Transparent}, Converter={StaticResource ColorToBrushConverter}}">
+                            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" >
                                         <SymbolIcon Symbol="{Binding IconSymbol}" />
-                                        <TextBlock 
-                                            Text="{Binding Title}"
-                                            FontWeight="{Binding FontWeight}" 
-                                            TextWrapping="NoWrap" 
-                                            HorizontalAlignment="Left" 
-                                            VerticalAlignment="Center" 
-                                            Margin="30,0,0,0" 
-                                            Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource White}, Converter={StaticResource ColorToBrushConverter}}"/>
                                     </StackPanel>
                                 </DataTemplate>
-                            </ListView.ItemTemplate>
-                            <ListView.HeaderTemplate>
-                                <DataTemplate>
-                                    <TextBlock Text="{Binding EntryCount, ConverterParameter=entry\,entries, Converter={StaticResource PluralizationConverter}}" FontSize="20" Margin="0,20,0,20" />
+                                <DataTemplate x:Name="Expanded">
+                                    <StackPanel Margin="10,0,0,0" Width="200" Orientation="Horizontal" >
+                                        <SymbolIcon Symbol="{Binding IconSymbol}" />
+                                        <TextBlock Text="{Binding Name}" FontWeight="{Binding FontWeight}" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,0,0" />
+                                        <!--<TextBlock Text="{Binding EntryCount}" HorizontalAlignment="Right" VerticalAlignment="Center" />-->
+                                    </StackPanel>
                                 </DataTemplate>
-                            </ListView.HeaderTemplate>
+                                <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.ItemContainerStyle>
                                 <Style TargetType="ListViewItem">
                                     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -131,32 +150,25 @@
                             </ListView.ItemContainerStyle>
                         </ListView>
                     </GridView.Header>
-                    <GridView.ItemContainerStyle>
-                        <Style TargetType="FrameworkElement">
-                            <Setter Property="Margin" Value="52,0,0,2"/>
-                        </Style>
-                    </GridView.ItemContainerStyle>
                 </GridView>
             </SemanticZoom.ZoomedInView>
 
             <SemanticZoom.ZoomedOutView>
                 <ListView
-                    ItemsSource="{Binding Source={StaticResource GroupsViewSource}}"
+                    x:Name="SemanticListView"
+                    ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
                     IsSwipeEnabled="false" 
                     SelectionChanged="groups_SelectionChanged"
                     IsSynchronizedWithCurrentItem="False" >
                     <ListView.ItemTemplate>
                         <DataTemplate>
-                            <TextBlock 
-                                Text="{Binding Name}" 
-                                Style="{StaticResource TitleTextBlockStyle}" 
-                                TextWrapping="NoWrap"/>
+                            <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                         </DataTemplate>
                     </ListView.ItemTemplate>
                 </ListView>
             </SemanticZoom.ZoomedOutView>
         </SemanticZoom>
-        
+
         <!-- Back button and page title -->
         <Grid Grid.Row="0">
             <Grid.ColumnDefinitions>
@@ -192,4 +204,4 @@
             </CommandBar>
         </Grid>
     </Grid>
-</Page>
+</Page>

ModernKeePass/Pages/GroupDetailPage.xaml.cs

@@ -1,4 +1,5 @@
 using System;
+using Windows.UI.Xaml;
 using ModernKeePass.Common;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Navigation;
@@ -19,13 +20,14 @@ namespace ModernKeePass.Pages
         /// process lifetime management
         /// </summary>
         public NavigationHelper NavigationHelper { get; }
-
-
+        
         public GroupDetailPage()
         {
             InitializeComponent();
             NavigationHelper = new NavigationHelper(this);
             NavigationHelper.LoadState += navigationHelper_LoadState;
+            LeftListView.ItemTemplate = (DataTemplate)LeftListView.Resources["Collapsed"];
+            LeftListView.HeaderTemplate = (DataTemplate)LeftListView.Resources["Forward"];
         }
 
         /// <summary>
@@ -39,9 +41,7 @@ namespace ModernKeePass.Pages
         /// <see cref="Frame.Navigate(Type, object)"/> when this page was initially requested and
         /// a dictionary of state preserved by this page during an earlier
         /// session.  The state will be null the first time a page is visited.</param>
-        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
-        {
-        }
+        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e) {}
 
         #region NavigationHelper registration
 
@@ -71,39 +71,33 @@ namespace ModernKeePass.Pages
 
         private void groups_SelectionChanged(object sender, SelectionChangedEventArgs e)
         {
-            GroupVm selectedItem = null;
-            if (sender is GridView)
+            if (LeftListView.SelectedIndex == 0)
             {
-                var gridView = (GridView) sender;
-                if (gridView.SelectedIndex == 0)
-                {
-                    var currentGroup = DataContext as GroupVm;
-                    currentGroup?.CreateNewGroup();
-                    gridView.SelectedIndex = -1;
-                    // TODO: Navigate to new group?
-                    return;
-                }
-                selectedItem = gridView.SelectedItem as GroupVm;
+                var currentGroup = DataContext as GroupVm;
+                currentGroup?.CreateNewGroup();
+                LeftListView.SelectedIndex = -1;
+                // TODO: Navigate to new group?
+                return;
             }
-            if (sender is ListView) selectedItem = ((ListView) sender).SelectedItem as GroupVm;
+            var selectedItem = LeftListView.SelectedItem as GroupVm;
             if (selectedItem == null) return;
             Frame.Navigate(typeof(GroupDetailPage), selectedItem);
         }
         
-
-        private void entriesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        private void entries_SelectionChanged(object sender, SelectionChangedEventArgs e)
         {
-            var listView = sender as ListView;
-            if (listView != null && listView.SelectedIndex == -1) return;
-            if (listView.SelectedIndex == 0)
+            switch (GridView.SelectedIndex)
             {
-                var currentGroup = DataContext as GroupVm;
-                currentGroup?.CreateNewEntry();
-                listView.SelectedIndex = -1;
-                // TODO: Navigate to new entry?
-                return;
+                case -1:
+                    return;
+                case 0:
+                    var currentGroup = DataContext as GroupVm;
+                    currentGroup?.CreateNewEntry();
+                    GridView.SelectedIndex = -1;
+                    // TODO: Navigate to new entry?
+                    return;
             }
-            Frame.Navigate(typeof(EntryDetailPage), listView?.SelectedItem as EntryVm);
+            Frame.Navigate(typeof(EntryDetailPage), GridView.SelectedItem as EntryVm);
         }
 
         private void AppBarButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
@@ -112,5 +106,22 @@ 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;
+            }
+        }
     }
 }