New color to brush converter

New boolean to visibility converter
Base class to handle property changes notifications for all View Models
Template selector to handle a different first item in listviews or gridviews

ModernKeePass/Pages/GroupDetailPage.xaml

@@ -5,16 +5,56 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:viewModels="using:ModernKeePass.ViewModels"
     xmlns:converters="using:ModernKeePass.Converters"
+    xmlns:local="using:ModernKeePass.Controls"
     x:Name="PageRoot"
     x:Class="ModernKeePass.Pages.GroupDetailPage"
     mc:Ignorable="d" >
     <Page.Resources>
+        <SolidColorBrush x:Key="Transparent" Color="Transparent"/>
+        <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
@@ -47,30 +87,11 @@
                     IsSwipeEnabled="false" 
                     SelectionChanged="groups_SelectionChanged"
                     IsSynchronizedWithCurrentItem="False" >
-                    <GridView.ItemTemplate>
-                        <DataTemplate>
-                            <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" Visibility="{Binding DetailsVisibility}" >
-                                        <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>
-                                    <TextBlock Grid.Column="1" Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Visibility="{Binding NewVisibility}" VerticalAlignment="Center" Margin="13,0,0,5"/>
-                                </Grid>
-                            </Border>
-                        </DataTemplate>
-                    </GridView.ItemTemplate>
+                    <GridView.ItemTemplateSelector>
+                        <local:FirstItemDataTemplateSelector 
+                            FirstItem="{StaticResource GroupFirstItem}" 
+                            OtherItem="{StaticResource GroupOtherItem}" />
+                        </GridView.ItemTemplateSelector>
                     <GridView.Header>
                         <ListView 
                             Height="auto" 
@@ -82,9 +103,18 @@
                             IsSynchronizedWithCurrentItem="False" >
                             <ListView.ItemTemplate>
                                 <DataTemplate>
-                                    <StackPanel Orientation="Horizontal" Background="{Binding BackgroundColor}">
+                                    <StackPanel 
+                                        Orientation="Horizontal" 
+                                        Background="{Binding BackgroundColor, ConverterParameter={StaticResource Transparent}, Converter={StaticResource ColorToBrushConverter}}">
                                         <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}"/>
+                                        <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>
@@ -117,14 +147,16 @@
                     IsSynchronizedWithCurrentItem="False" >
                     <ListView.ItemTemplate>
                         <DataTemplate>
-                            <TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
+                            <TextBlock 
+                                Text="{Binding Name}" 
+                                Style="{StaticResource TitleTextBlockStyle}" 
+                                TextWrapping="NoWrap"/>
                         </DataTemplate>
                     </ListView.ItemTemplate>
                 </ListView>
             </SemanticZoom.ZoomedOutView>
         </SemanticZoom>
         
-
         <!-- Back button and page title -->
         <Grid Grid.Row="0">
             <Grid.ColumnDefinitions>
@@ -132,17 +164,31 @@
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition Width="200"/>
             </Grid.ColumnDefinitions>
-            <Button Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
-                        Style="{StaticResource NavigationBackButtonNormalStyle}"
-                        VerticalAlignment="Top"
-                        AutomationProperties.Name="Back"
-                        AutomationProperties.AutomationId="BackButton"
-                        AutomationProperties.ItemType="Navigation Button"/>
-            <TextBlock Text="{Binding Name}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
-                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
-            <CommandBar Grid.Column="2" Margin="0,40,0,0" Background="Transparent" IsOpen="True">
-                <AppBarButton Icon="Edit" Label="Edit" />
-                <AppBarButton Icon="Delete" Label="Delete" IsEnabled="{Binding IsNotRoot}" Click="AppBarButton_Click" />
+            <Button Margin="39,59,39,0" 
+                    Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
+                    Style="{StaticResource NavigationBackButtonNormalStyle}"
+                    VerticalAlignment="Top"
+                    AutomationProperties.Name="Back"
+                    AutomationProperties.AutomationId="BackButton"
+                    AutomationProperties.ItemType="Navigation Button"/>
+            <TextBlock  
+                Grid.Column="1" 
+                Text="{Binding Name}" 
+                Style="{StaticResource HeaderTextBlockStyle}"
+                IsHitTestVisible="false" 
+                TextWrapping="NoWrap" 
+                VerticalAlignment="Bottom" 
+                Margin="0,0,30,40"/>
+            <CommandBar 
+                Grid.Column="2" 
+                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>
             </CommandBar>
         </Grid>
     </Grid>