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"
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>

View File

@@ -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" />

View File

@@ -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>

View File

@@ -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;
}
}
}
}

View File

@@ -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)