feat: improve style. add demo.

This commit is contained in:
rabbitism
2023-07-30 22:26:38 +08:00
parent cd32818e85
commit 87090f2d32
15 changed files with 132 additions and 18 deletions

View File

@@ -7,20 +7,40 @@
<converters:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
<ControlTheme x:Key="{x:Type u:KeyGestureInput}" TargetType="u:KeyGestureInput">
<Setter Property="Width" Value="{DynamicResource KeyGestureInputWidth}" />
<Setter Property="Height" Value="{DynamicResource KeyGestureInputHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource KeyGestureInputCornerRadius}" />
<Setter Property="Template">
<ControlTemplate TargetType="u:KeyGestureInput">
<Border
Name="Background"
Width="100"
MinHeight="32"
Background="LightBlue"
BorderThickness="1">
<TextBlock Text="{TemplateBinding Gesture, Converter={StaticResource KeyGestureConverter}}" />
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource KeyGestureInputBackground}"
BorderBrush="Transparent"
BorderThickness="1"
CornerRadius="{TemplateBinding CornerRadius}">
<SelectableTextBlock
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Text="{TemplateBinding Gesture,
Converter={StaticResource KeyGestureConverter}}" />
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource KeyGestureInputPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource KeyGestureInputPressedBackground}" />
</Style>
<Style Selector="^:focus /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource KeyGestureInputPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource KeyGestureInputFocusBorderBrush}" />
</Style>
<Style Selector="^:focus-within /template/ Border#Background">
<Setter Property="BorderBrush" Value="Blue" />
<Setter Property="Background" Value="{DynamicResource KeyGestureInputPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource KeyGestureInputFocusBorderBrush}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -0,0 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="KeyGestureInputBackground" Opacity="0.12" Color="White" />
<SolidColorBrush x:Key="KeyGestureInputPointeroverBackground" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="KeyGestureInputPressedBackground" Opacity="0.2" Color="White" />
<SolidColorBrush x:Key="KeyGestureInputBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="KeyGestureInputDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
<SolidColorBrush x:Key="KeyGestureInputFocusBorderBrush" Color="#FF54A9FF" />
</ResourceDictionary>

View File

@@ -6,6 +6,7 @@
<MergeResourceInclude Source="ButtonGroup.axaml" />
<MergeResourceInclude Source="Divider.axaml" />
<MergeResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="KeyGestureInput.axaml" />
<MergeResourceInclude Source="Loading.axaml" />
<MergeResourceInclude Source="NavigationMenu.axaml" />
<MergeResourceInclude Source="Pagination.axaml" />

View File

@@ -0,0 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="KeyGestureInputBackground" Opacity="0.05" Color="#FF2E3238" />
<SolidColorBrush x:Key="KeyGestureInputPointeroverBackground" Opacity="0.09" Color="#FF2E3238" />
<SolidColorBrush x:Key="KeyGestureInputPressedBackground" Opacity="0.13" Color="#FF2E3238" />
<SolidColorBrush x:Key="KeyGestureInputBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="KeyGestureInputDisabledBackground" Opacity="0.02" Color="#2E3238" />
<SolidColorBrush x:Key="KeyGestureInputFocusBorderBrush" Color="#FF0077FA" />
</ResourceDictionary>

View File

@@ -6,6 +6,7 @@
<MergeResourceInclude Source="ButtonGroup.axaml" />
<MergeResourceInclude Source="Divider.axaml" />
<MergeResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="KeyGestureInput.axaml" />
<MergeResourceInclude Source="Loading.axaml" />
<MergeResourceInclude Source="NavigationMenu.axaml" />
<MergeResourceInclude Source="Pagination.axaml" />

View File

@@ -0,0 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<x:Double x:Key="KeyGestureInputWidth">80</x:Double>
<x:Double x:Key="KeyGestureInputHeight">32</x:Double>
<CornerRadius x:Key="KeyGestureInputCornerRadius">3</CornerRadius>
</ResourceDictionary>

View File

@@ -6,6 +6,7 @@
<MergeResourceInclude Source="ButtonGroup.axaml" />
<MergeResourceInclude Source="Divider.axaml" />
<MergeResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="KeyGestureInput.axaml" />
<MergeResourceInclude Source="NavigationMenu.axaml" />
<MergeResourceInclude Source="Pagination.axaml" />
<MergeResourceInclude Source="TagInput.axaml" />

View File

@@ -3,6 +3,7 @@ using Avalonia.Controls;
using Avalonia.Controls.Converters;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.Layout;
namespace Ursa.Controls;
@@ -22,17 +23,17 @@ public class KeyGestureInput: TemplatedControl
set => SetValue(GestureProperty, value);
}
public static readonly StyledProperty<IList<Key>> AcceptableKeysProperty = AvaloniaProperty.Register<KeyGestureInput, IList<Key>>(
public static readonly StyledProperty<IList<Key>?> AcceptableKeysProperty = AvaloniaProperty.Register<KeyGestureInput, IList<Key>?>(
nameof(AcceptableKeys));
public IList<Key> AcceptableKeys
public IList<Key>? AcceptableKeys
{
get => GetValue(AcceptableKeysProperty);
set => SetValue(AcceptableKeysProperty, value);
}
public static readonly StyledProperty<bool> ConsiderKeyModifiersProperty = AvaloniaProperty.Register<KeyGestureInput, bool>(
nameof(ConsiderKeyModifiers));
nameof(ConsiderKeyModifiers), true);
public bool ConsiderKeyModifiers
{
@@ -40,10 +41,31 @@ public class KeyGestureInput: TemplatedControl
set => SetValue(ConsiderKeyModifiersProperty, value);
}
public static readonly StyledProperty<HorizontalAlignment> HorizontalContentAlignmentProperty =
ContentControl.HorizontalContentAlignmentProperty.AddOwner<KeyGestureInput>(
new StyledPropertyMetadata<HorizontalAlignment>(HorizontalAlignment.Center));
public HorizontalAlignment HorizontalContentAlignment
{
get => GetValue(HorizontalContentAlignmentProperty);
set => SetValue(HorizontalContentAlignmentProperty, value);
}
public static readonly StyledProperty<VerticalAlignment> VerticalContentAlignmentProperty =
ContentControl.VerticalContentAlignmentProperty.AddOwner<KeyGestureInput>(
new StyledPropertyMetadata<VerticalAlignment>(VerticalAlignment.Center));
public VerticalAlignment VerticalContentAlignment
{
get => GetValue(VerticalContentAlignmentProperty);
set => SetValue(VerticalContentAlignmentProperty, value);
}
protected override void OnKeyDown(KeyEventArgs e)
{
// base.OnKeyDown(e);
if (!AcceptableKeys.Contains(e.Key))
if (AcceptableKeys is not null && !AcceptableKeys.Contains(e.Key))
{
return;
}