Replaced arrow buttons with a hamburger icon in groups menu

Created data triggers with Blend to handle item data template changes
This commit is contained in:
2017-10-05 14:50:42 +02:00
committed by BONNEVILLE Geoffroy
parent 013108f2ec
commit c611f5a8a2
5 changed files with 79 additions and 46 deletions

View File

@@ -2,6 +2,44 @@
x:Class="ModernKeePass.App" x:Class="ModernKeePass.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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> </Application>

View File

@@ -222,7 +222,11 @@
<Private>True</Private> <Private>True</Private>
</Reference> </Reference>
</ItemGroup> </ItemGroup>
<ItemGroup /> <ItemGroup>
<SDKReference Include="BehaviorsXamlSDKManaged, Version=12.0">
<Name>BehaviorsXamlSDKManaged</Name>
</SDKReference>
</ItemGroup>
<ItemGroup> <ItemGroup>
<Content Include="Assets\Logo.scale-100.png" /> <Content Include="Assets\Logo.scale-100.png" />
<Content Include="Assets\Logo.scale-140.png" /> <Content Include="Assets\Logo.scale-140.png" />

View File

@@ -6,6 +6,8 @@
xmlns:viewModels="using:ModernKeePass.ViewModels" xmlns:viewModels="using:ModernKeePass.ViewModels"
xmlns:converters="using:ModernKeePass.Converters" xmlns:converters="using:ModernKeePass.Converters"
xmlns:local="using:ModernKeePass.Controls" xmlns:local="using:ModernKeePass.Controls"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
x:Name="PageRoot" x:Name="PageRoot"
x:Class="ModernKeePass.Pages.GroupDetailPage" x:Class="ModernKeePass.Pages.GroupDetailPage"
mc:Ignorable="d" > mc:Ignorable="d" >
@@ -18,7 +20,6 @@
<Page.DataContext> <Page.DataContext>
<viewModels:GroupVm /> <viewModels:GroupVm />
</Page.DataContext> </Page.DataContext>
<Grid> <Grid>
<Grid.Resources> <Grid.Resources>
<CollectionViewSource <CollectionViewSource
@@ -45,13 +46,9 @@
AutomationProperties.AutomationId="ItemGridView" AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Entries" AutomationProperties.Name="Entries"
TabIndex="1" TabIndex="1"
ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
IsSwipeEnabled="false" IsSwipeEnabled="false"
SelectionChanged="entries_SelectionChanged" SelectionChanged="entries_SelectionChanged"
IsSynchronizedWithCurrentItem="False" > IsSynchronizedWithCurrentItem="False" >
<GridView.DataContext>
<viewModels:EntryVm></viewModels:EntryVm>
</GridView.DataContext>
<GridView.Resources> <GridView.Resources>
<DataTemplate x:Name="GroupFirstItem"> <DataTemplate x:Name="GroupFirstItem">
<Border <Border
@@ -93,6 +90,12 @@
</Border> </Border>
</DataTemplate> </DataTemplate>
</GridView.Resources> </GridView.Resources>
<GridView.ItemsSource>
<Binding Source="{StaticResource EntriesViewSource}"/>
</GridView.ItemsSource>
<GridView.DataContext>
<viewModels:EntryVm/>
</GridView.DataContext>
<GridView.ItemTemplateSelector> <GridView.ItemTemplateSelector>
<local:FirstItemDataTemplateSelector <local:FirstItemDataTemplateSelector
FirstItem="{StaticResource GroupFirstItem}" FirstItem="{StaticResource GroupFirstItem}"
@@ -110,17 +113,13 @@
Width="auto" Width="auto"
Background="LightGray" Background="LightGray"
Foreground="DarkSlateGray" Foreground="DarkSlateGray"
ItemsSource="{Binding Source={StaticResource GroupsViewSource}}"
SelectionChanged="groups_SelectionChanged" SelectionChanged="groups_SelectionChanged"
IsSwipeEnabled="false" IsSwipeEnabled="false"
IsSynchronizedWithCurrentItem="False" IsSynchronizedWithCurrentItem="False"
DataContext="{Binding DataContext, ElementName=PageRoot}"> DataContext="{Binding DataContext, ElementName=PageRoot}">
<ListView.Resources> <ListView.Resources>
<DataTemplate x:Name="Collapsed"> <DataTemplate x:Name="Collapsed">
<StackPanel <StackPanel Margin="10,0,0,0" Width="30" Orientation="Horizontal" >
Margin="10,0,0,0"
Width="30"
Orientation="Horizontal" >
<SymbolIcon Symbol="{Binding IconSymbol}" /> <SymbolIcon Symbol="{Binding IconSymbol}" />
</StackPanel> </StackPanel>
</DataTemplate> </DataTemplate>
@@ -131,23 +130,29 @@
<!--<TextBlock Text="{Binding EntryCount}" HorizontalAlignment="Right" VerticalAlignment="Center" />--> <!--<TextBlock Text="{Binding EntryCount}" HorizontalAlignment="Right" VerticalAlignment="Center" />-->
</StackPanel> </StackPanel>
</DataTemplate> </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.Resources>
<ListView.ItemsSource>
<Binding Source="{StaticResource GroupsViewSource}"/>
</ListView.ItemsSource>
<ListView.ItemContainerStyle> <ListView.ItemContainerStyle>
<Style TargetType="ListViewItem"> <Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style> </Style>
</ListView.ItemContainerStyle> </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> </ListView>
</GridView.Header> </GridView.Header>
</GridView> </GridView>
@@ -196,11 +201,11 @@
Margin="0,40,0,0" Margin="0,40,0,0"
Background="Transparent" Background="Transparent"
IsOpen="True"> IsOpen="True">
<AppBarButton Icon="Save" Label="Save" />
<CommandBar.SecondaryCommands> <CommandBar.SecondaryCommands>
<AppBarButton Icon="Edit" Label="Edit" /> <AppBarButton Icon="Edit" Label="Edit" />
<AppBarButton Icon="Delete" Label="Delete" IsEnabled="{Binding IsNotRoot}" Click="AppBarButton_Click" /> <AppBarButton Icon="Delete" Label="Delete" IsEnabled="{Binding IsNotRoot}" Click="AppBarButton_Click" />
</CommandBar.SecondaryCommands> </CommandBar.SecondaryCommands>
<AppBarButton Icon="Save" Label="Save" />
</CommandBar> </CommandBar>
</Grid> </Grid>
</Grid> </Grid>

View File

@@ -26,8 +26,6 @@ namespace ModernKeePass.Pages
InitializeComponent(); InitializeComponent();
NavigationHelper = new NavigationHelper(this); NavigationHelper = new NavigationHelper(this);
NavigationHelper.LoadState += navigationHelper_LoadState; NavigationHelper.LoadState += navigationHelper_LoadState;
LeftListView.ItemTemplate = (DataTemplate)LeftListView.Resources["Collapsed"];
LeftListView.HeaderTemplate = (DataTemplate)LeftListView.Resources["Forward"];
} }
/// <summary> /// <summary>
@@ -106,22 +104,5 @@ namespace ModernKeePass.Pages
group?.RemoveGroup(); group?.RemoveGroup();
if (Frame.CanGoBack) Frame.GoBack(); 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;
}
}
} }
} }

View File

@@ -14,10 +14,10 @@ namespace ModernKeePass.ViewModels
public ObservableCollection<EntryVm> Entries { get; set; } = new ObservableCollection<EntryVm>(); public ObservableCollection<EntryVm> Entries { get; set; } = new ObservableCollection<EntryVm>();
public ObservableCollection<GroupVm> Groups { get; set; } = new ObservableCollection<GroupVm>(); public ObservableCollection<GroupVm> Groups { get; set; } = new ObservableCollection<GroupVm>();
public string Name => _pwGroup == null ? "New group" : _pwGroup.Name; public string Name => _pwGroup == null ? "New group" : _pwGroup.Name;
public int EntryCount => Entries.Count - 1; public int EntryCount => Entries.Count - 1;
public int GroupCount => Groups.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 public Symbol IconSymbol
{ {
@@ -29,10 +29,15 @@ namespace ModernKeePass.ViewModels
} }
} }
public bool IsNotRoot => ParentGroup != null; public bool IsLeftPaneOpen
public FontWeight FontWeight => _pwGroup == null ? FontWeights.Bold : FontWeights.Normal; {
get { return _isLeftPaneOpen; }
set { SetProperty(ref _isLeftPaneOpen, value); }
}
private readonly PwGroup _pwGroup; private readonly PwGroup _pwGroup;
private bool _isLeftPaneOpen;
public GroupVm() {} public GroupVm() {}
public GroupVm(PwGroup pwGroup, GroupVm parent) public GroupVm(PwGroup pwGroup, GroupVm parent)