modernkeepass/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml

<UserControl x:Name="UserControl"
    x:Class="ModernKeePass.Views.UserControls.TopMenuUserControl"
    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:actions="using:ModernKeePass.Actions"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style BasedOn="{StaticResource NoBorderButtonStyle}" TargetType="Button" x:Key="MenuButtonStyle" >
            <Setter Property="Padding" Value="25,0,25,0" />
            <Setter Property="Height" Value="{StaticResource MenuHeight}" />
        </Style>
        <Style BasedOn="{StaticResource NoBorderToggleButtonStyle}" TargetType="ToggleButton" x:Key="MenuToggleButtonStyle" >
            <Setter Property="Padding" Value="25,0,25,0" />
            <Setter Property="Height" Value="{StaticResource MenuHeight}" />
        </Style>
    </UserControl.Resources>
    <StackPanel x:Name="StackPanel" Orientation="Horizontal" DataContext="{Binding Source={StaticResource Locator}, Path=TopMenu}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisibilityStates">
                <VisualState x:Name="Overflowed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowButtons" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoreButton" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Collapsed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowButtons" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoreButton" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="OverflowButtons" Orientation="Horizontal">
            <Button Command="{Binding SaveCommand, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
                <SymbolIcon Symbol="Save">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="TopMenuSaveButton" />
                    </ToolTipService.ToolTip>
                </SymbolIcon>
            </Button>
            <Button Visibility="{Binding MoveButtonVisibility, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
                <SymbolIcon Symbol="MoveToFolder">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="TopMenuMoveButton" />
                    </ToolTipService.ToolTip>
                </SymbolIcon>
                <Button.Flyout>
                    <Flyout Opening="MoveButtonFlyout_OnOpening">
                        <StackPanel Background="Transparent">
                            <SearchBox x:Uid="GroupsSearch" 
                                Width="250" 
                                Margin="0,5,0,5"
                                SuggestionsRequested="GroupSearchBox_OnSuggestionsRequested" 
                                ResultSuggestionChosen="GroupSearchBox_OnResultSuggestionChosen" 
                                SearchHistoryEnabled="False">
                            </SearchBox>
                            <Button x:Name="MoveButton" x:Uid="MoveButton" />
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
            <Button Command="{Binding RestoreCommand, ElementName=UserControl}" Visibility="{Binding RestoreButtonVisibility, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
                <SymbolIcon Symbol="Undo">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="TopMenuRestoreButton" />
                    </ToolTipService.ToolTip>
                </SymbolIcon>
            </Button>
            <Button Visibility="{Binding SortButtonVisibility, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
                <SymbolIcon Symbol="Sort">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="TopMenuSortButton" />
                    </ToolTipService.ToolTip>
                </SymbolIcon>
                <Button.Flyout>
                    <MenuFlyout Opening="SortFlyout_OnOpening">
                        <MenuFlyoutItem x:Uid="AppBarSortEntries" x:Name="SortEntriesButtonFlyout" Command="{Binding SortEntriesCommand, ElementName=UserControl}" />
                        <MenuFlyoutItem x:Uid="AppBarSortGroups" x:Name="SortGroupsButtonFlyout" Command="{Binding SortGroupsCommand, ElementName=UserControl}" />
                    </MenuFlyout>
                </Button.Flyout>
            </Button>
            <ToggleButton Command="{Binding EditCommand, ElementName=UserControl}" IsChecked="{Binding IsEditButtonChecked, ElementName=UserControl, Mode=TwoWay}" Checked="EditButton_Click" Style="{StaticResource MenuToggleButtonStyle}">
                <SymbolIcon Symbol="Edit">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="TopMenuEditButton" />
                    </ToolTipService.ToolTip>
                </SymbolIcon>
            </ToggleButton>
            <Button Command="{Binding DeleteCommand, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
                <SymbolIcon Symbol="Delete">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="TopMenuDeleteButton" />
                    </ToolTipService.ToolTip>
                </SymbolIcon>
            </Button>
            <Button x:Name="SearchButton" Style="{StaticResource NoBorderButtonStyle}" Height="{StaticResource MenuHeight}" Padding="25,0,25,0">
                <StackPanel Orientation="Horizontal">
                    <SymbolIcon Symbol="Find" />
                    <TextBlock x:Uid="SearchButtonLabel" x:Name="SearchButtonLabel" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0" />
                </StackPanel>
                <ToolTipService.ToolTip>
                    <ToolTip x:Uid="SearchButtonTooltip" />
                </ToolTipService.ToolTip>
                <interactivity:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="Click">
                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Visible" />
                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Collapsed" />
                        <!-- TODO: make this work -->
                        <actions:SetupFocusAction TargetObject="{Binding ElementName=SearchBox}" />
                    </core:EventTriggerBehavior>
                </interactivity:Interaction.Behaviors>
            </Button>
            <SearchBox 
                x:Uid="EntriesSearch" 
                x:Name="SearchBox" 
                Margin="0,5,0,5" 
                Width="350" 
                Visibility="Collapsed" 
                SuggestionsRequested="EntrySearchBox_OnSuggestionsRequested" 
                SearchHistoryEnabled="False" 
                ResultSuggestionChosen="EntrySearchBox_OnResultSuggestionChosen">
                <interactivity:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="LostFocus">
                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Collapsed" />
                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Visible" />
                    </core:EventTriggerBehavior>
                </interactivity:Interaction.Behaviors>
            </SearchBox>
        </StackPanel>
        <Button x:Name="MoreButton" Style="{StaticResource MenuButtonStyle}">
            <SymbolIcon Symbol="More" />
            <Button.Flyout>
                <MenuFlyout Opening="OverflowFlyout_OnOpening">
                    <MenuFlyoutItem x:Uid="TopMenuSaveFlyout" x:Name="SaveFlyout" />
                    <MenuFlyoutItem x:Uid="TopMenuMoveFlyout" x:Name="MoveFlyout" Visibility="{Binding MoveButtonVisibility, ElementName=UserControl}" />
                    <MenuFlyoutItem x:Uid="TopMenuRestoreFlyout" x:Name="RestoreFlyout" Visibility="{Binding RestoreButtonVisibility, ElementName=UserControl}" />
                    <ToggleMenuFlyoutItem x:Uid="TopMenuEditFlyout" x:Name="EditFlyout" IsChecked="{Binding IsEditButtonChecked, ElementName=UserControl, Mode=TwoWay}" Click="EditButton_Click" />
                    <MenuFlyoutItem x:Uid="TopMenuDeleteFlyout" x:Name="DeleteFlyout" />
                    <MenuFlyoutItem x:Uid="TopMenuSortEntriesFlyout" x:Name="SortEntriesFlyout" Visibility="{Binding SortButtonVisibility, ElementName=UserControl}" />
                    <MenuFlyoutItem x:Uid="TopMenuSortGroupsFlyout" x:Name="SortGroupsFlyout" Visibility="{Binding SortButtonVisibility, ElementName=UserControl}" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>
    </StackPanel>
</UserControl>