modernkeepass/Win10App/Views/GroupsPage.xaml

<Page
    x:Class="ModernKeePass.Views.GroupsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:converters="using:ModernKeePass.Converters"
    xmlns:actions="using:ModernKeePass.Actions"
    xmlns:listItems="using:ModernKeePass.ViewModels.ListItems"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <converters:IconToSymbolConverter x:Key="IconToSymbolConverter"/>
        <converters:InverseBooleanToVisibilityConverter x:Key="InverseBooleanToVisibilityConverter"/>
        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
    </Page.Resources>

    <!-- SplitView -->
    <SplitView x:Name="SplitView"
               CompactPaneLength="{StaticResource MenuSize}"
               OpenPaneLength="320"
               IsPaneOpen="True"
               FontFamily="Segoe UI">
        <SplitView.Pane>
            <Grid x:Name="SplitViewPane">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid
                    x:Name="TopButtonsBorder"
                    Grid.Row="0"
                    Grid.Column="0"
                    BorderThickness="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Button 
                        IsEnabled="{x:Bind Frame.CanGoBack}" 
                        Margin="0"
                        BorderThickness="0"
                        Style="{StaticResource NavigationBackButtonNormalStyle}" 
                        Click="BackButton_OnClick"  />
                    <TextBox x:Name="NewGroupNameTextBox"
                        Grid.Column="1"
                        Visibility="Visible"
                        HorizontalAlignment="Right"
                        Text="{x:Bind Vm.NewGroupName, Mode=TwoWay}"
                        Height="30"
                        Width="230"
                        KeyUp="NewGroupNameTextBox_KeyDown" 
                        LostFocus="NewGroupNameTextBox_LostFocus" />
                    <Button x:Name="AddButton"
                        Grid.Column="2"
                        Margin="0"
                        Width="{StaticResource MenuSize}"
                        Height="{StaticResource MenuSize}"
                        Background="Transparent"
                        VerticalAlignment="Top"
                        BorderThickness="0"
                        FontFamily="Segoe MDL2 Assets"
                        Content="&#xE710;">
                        <interactivity:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Click">
                                <core:ChangePropertyAction TargetObject="{Binding ElementName=NewGroupNameTextBox}" PropertyName="Visibility" Value="Visible"/>
                                <core:ChangePropertyAction TargetObject="{Binding ElementName=AddButton}" PropertyName="IsEnabled" Value="False"/>
                                <actions:SetupFocusAction TargetObject="{Binding ElementName=NewEntryNameTextBox}" />
                            </core:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </Button>
                </Grid>


                <Grid
                    Grid.Row="1"
                    Grid.Column="0"
                    BorderThickness="0">
                    <AutoSuggestBox
                        x:Name="AutoSuggestBox"
                        x:Uid="GroupSearch"
                        Width="250"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        VerticalContentAlignment="Center"
                        QueryIcon="Find"
                        TextMemberPath="Name"
                        TextChanged="AutoSuggestBox_TextChanged"
                        QuerySubmitted="AutoSuggestBox_QuerySubmitted">
                        <AutoSuggestBox.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="Padding" Value="0" />
                            </Style>
                        </AutoSuggestBox.ItemContainerStyle>
                        <AutoSuggestBox.ItemTemplate>
                            <DataTemplate x:DataType="listItems:EntryItemVm">
                                <Grid x:Name="EntryGrid" Padding="12,0,12,0" Background="{Binding BackgroundColor, ConverterParameter={StaticResource SystemControlPageBackgroundTransparentBrush}, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <SymbolIcon Grid.Column="0" Symbol="{x:Bind Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=0}" Foreground="{StaticResource SystemControlPageTextBaseHighBrush}" />
                                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="15">
                                        <TextBlock Text="{Binding Name}" TextWrapping="NoWrap" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource SystemControlPageTextBaseHighBrush}, Converter={StaticResource ColorToBrushConverter}}"/>
                                        <TextBlock Text="{x:Bind Parent.Text}" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource SystemControlPageTextBaseMediumBrush}, Converter={StaticResource ColorToBrushConverter}}" MaxHeight="60" />
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </AutoSuggestBox.ItemTemplate>
                    </AutoSuggestBox>
                </Grid>

                <!-- Navigation Tree -->
                <TreeView x:Name="NavigationTree"
                    Grid.Row="2"
                    ItemsSource="{x:Bind Vm.RootItemVm.Children}"
                    ItemInvoked="NavigationTree_OnItemInvoked">
                    <TreeView.ItemTemplate>
                        <DataTemplate x:DataType="listItems:GroupItemVm">
                            <TreeViewItem ItemsSource="{x:Bind Children}">
                                <Grid>
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Visibility="{x:Bind IsEditMode, Mode=OneWay, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
                                        <SymbolIcon Symbol="{x:Bind Symbol, Converter={StaticResource IconToSymbolConverter}}" />
                                        <TextBlock x:Name="GroupName" Text="{x:Bind Text, Mode=OneWay}" Width="200" Margin="10,0,0,0" />
                                        <StackPanel.ContextFlyout>
                                            <MenuFlyout>
                                                <MenuFlyoutItem x:Uid="TopMenuDeleteFlyout" Icon="Delete" Click="DeleteFlyoutItem_OnClick" />
                                                <MenuFlyoutItem x:Uid="TopMenuRenameFlyout" Click="RenameFlyoutItem_OnClick" />
                                            </MenuFlyout>
                                        </StackPanel.ContextFlyout>
                                    </StackPanel>
                                    <TextBox
                                        Text="{x:Bind Text, Mode=TwoWay}"
                                        Visibility="{x:Bind IsEditMode, Mode=OneWay}"
                                        Width="200"
                                        KeyDown="GroupNameTextBox_KeyDown"
                                        LostFocus="GroupNameTextBox_OnLostFocus" />
                                </Grid>
                            </TreeViewItem>
                        </DataTemplate>
                    </TreeView.ItemTemplate>
                </TreeView>
                <CommandBar DefaultLabelPosition="Right"
                            Grid.Row="3"
                            Background="Transparent"
                            HorizontalAlignment="Center"
                            FontFamily="Segoe UI">
                    <AppBarButton x:Uid="AppBarHome" Icon="Home">
                        <interactivity:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Click">
                                <core:NavigateToPageAction TargetPage="ModernKeePass.Views.MainPage10" />
                            </core:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </AppBarButton>
                    <AppBarButton x:Uid="AppBarSettings" Icon="Setting">
                        <interactivity:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Click">
                                <core:NavigateToPageAction TargetPage="ModernKeePass.Views.SettingsPage10" />
                            </core:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </AppBarButton>
                </CommandBar>
            </Grid>
        </SplitView.Pane>
        <SplitView.Content>
            <StackPanel Orientation="Vertical">
                <Button Margin="0"
                        Height="{StaticResource MenuSize}"
                        Background="Transparent"
                        BorderThickness="0"
                        Click="HamburgerButton_OnClick">
                    <StackPanel Orientation="Horizontal" Margin="5,0,0,0">
                        <FontIcon x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" />
                        <TextBlock Text="{x:Bind Vm.Title, Mode=OneWay}" FontFamily="Segoe UI" FontWeight="Bold" Margin="20,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </Button>
                <!-- Navigation Frame -->
                <Frame x:Name="SplitViewFrame"
                       Padding="0"
                       FontFamily="Segoe UI">
                    <Frame.ContentTransitions>
                        <TransitionCollection>
                            <NavigationThemeTransition>
                                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                                    <DrillInNavigationTransitionInfo />
                                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
                            </NavigationThemeTransition>
                        </TransitionCollection>
                    </Frame.ContentTransitions>
                </Frame>
            </StackPanel>
        </SplitView.Content>

        <!-- Responsive Visual States -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>

                <!-- VisualState to be triggered when window width is >=1007 effective pixels -->
                <VisualState x:Name="Expanded">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="HamburgerButton.Visibility" Value="Collapsed" />
                        <Setter Target="SplitView.DisplayMode" Value="Inline" />
                        <Setter Target="SplitViewPane.Background" Value="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}" />
                        <Setter Target="TopButtonsBorder.Background" Value="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}" />
                    </VisualState.Setters>
                </VisualState>

                <!-- VisualState to be triggered when window width is >=640 and <=1007 effective pixels -->
                <!-- Skipped -->
                <!--<VisualState x:Name="Compact">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SplitView.DisplayMode"
                                Value="CompactOverlay" />
                        <Setter Target="SplitView.IsPaneOpen"
                                Value="False" />
                    </VisualState.Setters>
                </VisualState>-->

                <!-- VisualState to be triggered when window width is >=0 and <641 effective pixels -->
                <VisualState x:Name="Minimal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="HamburgerButton.Visibility" Value="Visible" />
                        <Setter Target="SplitView.DisplayMode" Value="CompactInline" />
                        <Setter Target="SplitViewPane.Background" Value="{ThemeResource SystemControlChromeHighAcrylicElementMediumBrush}" />
                        <Setter Target="TopButtonsBorder.Background" Value="Transparent" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </SplitView>
</Page>