Finally a nicer looking and working TextBoxWithButton (inspired from the SearchButton)

SearchBox field style improved
This commit is contained in:
Geoffroy BONNEVILLE
2020-04-28 15:20:47 +02:00
parent 8e06bf4bb0
commit f158e5aced
24 changed files with 481 additions and 283 deletions

View File

@@ -3,7 +3,6 @@
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:viewModels="using:ModernKeePass.ViewModels"
xmlns:converters="using:ModernKeePass.Converters"
xmlns:local="using:ModernKeePass.Controls"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
@@ -431,7 +430,7 @@
<ProgressBar Value="{Binding PasswordComplexityIndicator, ConverterParameter=0\,128, Converter={StaticResource ProgressBarLegalValuesConverter}}" Maximum="128" Width="350" HorizontalAlignment="Left" Foreground="{Binding PasswordComplexityIndicator, ConverterParameter=128, Converter={StaticResource DoubleToForegroundBrushComplexityConverter}}" />
<CheckBox x:Uid="EntryShowPassword" HorizontalAlignment="Left" Margin="-3,0,0,0" IsChecked="{Binding IsRevealPassword, Mode=TwoWay}" IsEnabled="{Binding IsRevealPasswordEnabled}" />
<TextBlock TextWrapping="Wrap" Text="URL" FontSize="18"/>
<local:TextBoxWithButton x:Uid="UrlTextBox" Text="{Binding Url, Mode=TwoWay}" MaxLength="256" Style="{StaticResource EntryTextBoxWithButtonStyle}" ButtonSymbol="&#xE111;" IsEnabled="{Binding IsCurrentEntry}">
<local:TextBoxWithButton x:Uid="UrlTextBox" Text="{Binding Url, Mode=TwoWay}" Style="{StaticResource EntryTextBoxWithButtonStyle}" ButtonSymbol="&#xE111;" IsEnabled="{Binding IsCurrentEntry}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="ButtonClick">
<actions:NavigateToUrlAction Url="{Binding Url}" />

View File

@@ -270,7 +270,7 @@
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
<SearchBox Grid.Column="3" x:Uid="GroupSearch" x:Name="SearchBox" Padding="12" Width="350" Visibility="Collapsed" Background="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" BorderThickness="0" Margin="0,5,0,5" FontSize="15" SuggestionsRequested="SearchBox_OnSuggestionsRequested" SearchHistoryEnabled="False" ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen" Style="{StaticResource MainColorSearchBox}">
<SearchBox Grid.Column="3" x:Uid="EntriesSearch" x:Name="SearchBox" Padding="12" Width="350" Visibility="Collapsed" Margin="0,5,0,5" FontSize="15" SuggestionsRequested="SearchBox_OnSuggestionsRequested" SearchHistoryEnabled="False" ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen" Style="{StaticResource MainColorSearchBox}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="LostFocus">
<core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Collapsed" />

View File

@@ -1,8 +1,8 @@
using System;
using System.Collections.Generic;
using System.Windows.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using GalaSoft.MvvmLight.Command;
using ModernKeePass.Application.Common.Interfaces;
// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
@@ -125,15 +125,15 @@ namespace ModernKeePass.Views.UserControls
typeof(HamburgerMenuUserControl),
new PropertyMetadata(false, (o, args) => { }));
public RelayCommand ActionButtonCommand
public ICommand ActionButtonCommand
{
get { return (RelayCommand)GetValue(ActionButtonCommandProperty); }
get { return (ICommand)GetValue(ActionButtonCommandProperty); }
set { SetValue(ActionButtonCommandProperty, value); }
}
public static readonly DependencyProperty ActionButtonCommandProperty =
DependencyProperty.Register(
nameof(ActionButtonCommand),
typeof(RelayCommand),
typeof(ICommand),
typeof(HamburgerMenuUserControl),
new PropertyMetadata(null, (o, args) => { }));

View File

@@ -16,7 +16,7 @@
<Setter Property="Height" Value="{StaticResource MenuSize}" />
</Style>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
<StackPanel x:Name="StackPanel" Orientation="Horizontal" DataContext="{Binding Source={StaticResource Locator}, Path=TopMenu}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualState x:Name="Overflowed">
@@ -49,12 +49,29 @@
</ToolTipService.ToolTip>
</SymbolIcon>
</Button>
<Button Command="{Binding MoveCommand, ElementName=UserControl}" Visibility="{Binding MoveButtonVisibility, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
<Button Visibility="{Binding MoveButtonVisibility, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
<SymbolIcon Symbol="MoveToFolder">
<ToolTipService.ToolTip>
<ToolTip x:Uid="TopMenuMoveButton" />
</ToolTipService.ToolTip>
</SymbolIcon>
<Button.Flyout>
<Flyout>
<StackPanel>
<SearchBox
x:Uid="GroupsSearch"
Padding="12" Width="350"
Margin="0,5,0,5"
FontSize="15"
SuggestionsRequested="SearchBox_OnSuggestionsRequested"
ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen"
SearchHistoryEnabled="False"
Style="{StaticResource MainColorSearchBox}">
</SearchBox>
<Button x:Uid="MoveButton" Command="{Binding MoveCommand, ElementName=UserControl}" CommandParameter="{Binding SelectedDestinationGroup}" Style="{StaticResource MainColorButton}" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<Button Command="{Binding RestoreCommand, ElementName=UserControl}" Visibility="{Binding RestoreButtonVisibility, ElementName=UserControl}" Style="{StaticResource MenuButtonStyle}">
<SymbolIcon Symbol="Undo">
@@ -96,7 +113,7 @@
<Button.Flyout>
<MenuFlyout Opening="OverflowFlyout_OnOpening">
<MenuFlyoutItem x:Uid="TopMenuSaveFlyout" Command="{Binding SaveCommand, ElementName=UserControl}" />
<MenuFlyoutItem x:Uid="TopMenuMoveFlyout" x:Name="MoveFlyout" Command="{Binding MoveCommand, ElementName=UserControl}" Visibility="{Binding MoveButtonVisibility, ElementName=UserControl}" />
<MenuFlyoutItem x:Uid="TopMenuMoveFlyout" x:Name="MoveFlyout" Visibility="{Binding MoveButtonVisibility, ElementName=UserControl}" />
<MenuFlyoutItem x:Uid="TopMenuRestoreFlyout" x:Name="RestoreFlyout" Command="{Binding RestoreCommand, ElementName=UserControl}" Visibility="{Binding RestoreButtonVisibility, ElementName=UserControl}" />
<ToggleMenuFlyoutItem x:Uid="TopMenuEditFlyout" x:Name="EditFlyout" Command="{Binding EditCommand, ElementName=UserControl}" IsChecked="{Binding IsEditButtonChecked, ElementName=UserControl, Mode=TwoWay}" Click="EditButton_Click" />
<MenuFlyoutItem x:Uid="TopMenuDeleteFlyout" x:Name="DeleteFlyout" Command="{Binding DeleteCommand, ElementName=UserControl}" IsEnabled="{Binding IsDeleteButtonEnabled, ElementName=UserControl}" Click="DeleteButton_Click" />

View File

@@ -1,6 +1,11 @@
using System;
using System.Linq;
using System.Windows.Input;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using GalaSoft.MvvmLight.Command;
using ModernKeePass.ViewModels;
// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
@@ -8,6 +13,8 @@ namespace ModernKeePass.Views.UserControls
{
public sealed partial class TopMenuUserControl
{
public TopMenuVm Model => (TopMenuVm)StackPanel.DataContext;
public ICommand SaveCommand
{
get { return (ICommand)GetValue(SaveCommandProperty); }
@@ -44,18 +51,18 @@ namespace ModernKeePass.Views.UserControls
typeof(TopMenuUserControl),
new PropertyMetadata(null, (o, args) => { }));
public ICommand MoveCommand
public RelayCommand<string> MoveCommand
{
get { return (ICommand)GetValue(MoveCommandProperty); }
get { return (RelayCommand<string>)GetValue(MoveCommandProperty); }
set { SetValue(MoveCommandProperty, value); }
}
public static readonly DependencyProperty MoveCommandProperty =
DependencyProperty.Register(
nameof(MoveCommand),
typeof(ICommand),
typeof(RelayCommand<string>),
typeof(TopMenuUserControl),
new PropertyMetadata(null, (o, args) => { }));
public ICommand RestoreCommand
{
get { return (ICommand)GetValue(RestoreCommandProperty); }
@@ -114,7 +121,7 @@ namespace ModernKeePass.Views.UserControls
nameof(MoveButtonVisibility),
typeof(Visibility),
typeof(TopMenuUserControl),
new PropertyMetadata(Visibility.Collapsed, (o, args) => { }));
new PropertyMetadata(Visibility.Visible, (o, args) => { }));
public Visibility RestoreButtonVisibility
{
@@ -198,6 +205,20 @@ namespace ModernKeePass.Views.UserControls
SortEntriesButtonFlyout.Command = SortEntriesCommand;
SortGroupsButtonFlyout.Command = SortGroupsCommand;
}
private void SearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
{
var imageUri = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appdata://Assets/ModernKeePass-SmallLogo.scale-80.png"));
foreach (var group in Model.Groups.Where(g => g.Title.IndexOf(args.QueryText, StringComparison.OrdinalIgnoreCase) >= 0))
{
args.Request.SearchSuggestionCollection.AppendResultSuggestion(group.Title, group.ParentGroupName, group.Id, imageUri, string.Empty);
}
}
private void SearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
{
Model.SelectedDestinationGroup = args.Tag;
MoveCommand.RaiseCanExecuteChanged();
}
}
}