feat: improve style. add demo.

demo/Ursa.Demo/Models/MenuKeys.cs

@@ -7,9 +7,11 @@ public static class MenuKeys
     public const string MenuKeyButtonGroup = "ButtonGroup";
     public const string MenuKeyDivider = "Divider";
     public const string MenuKeyIpBox = "IPv4Box";
+    public const string MenuKeyKeyGestureInput = "KeyGestureInput";
     public const string MenuKeyLoading = "Loading";
     public const string MenuKeyNavigation = "Navigation";
     public const string MenuKeyPagination = "Pagination";
     public const string MenuKeyTagInput = "TagInput";
     public const string MenuKeyTimeline = "Timeline";
+
 }

demo/Ursa.Demo/Pages/KeyGestureInputDemo.axaml

@@ -0,0 +1,15 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.KeyGestureInputDemo"
+    xmlns="https://github.com/avaloniaui"
+    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:u="https://irihi.tech/ursa"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="20">
+        <u:KeyGestureInput HorizontalAlignment="Left" />
+        <u:KeyGestureInput HorizontalAlignment="Left" />
+    </StackPanel>
+</UserControl>

demo/Ursa.Demo/Pages/KeyGestureInputDemo.axaml.cs

@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class KeyGestureInputDemo : UserControl
+{
+    public KeyGestureInputDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

demo/Ursa.Demo/Ursa.Demo.csproj

@@ -7,23 +7,23 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <AvaloniaResource Include="Assets\**"/>
+        <AvaloniaResource Include="Assets\**" />
     </ItemGroup>
 
     <ItemGroup>
-        <TrimmerRootDescriptor Include="Roots.xml"/>
+        <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)"/>
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0"/>
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
-        <PackageReference Include="Semi.Avalonia" Version="11.0.0"/>
+        <PackageReference Include="Semi.Avalonia" Version="11.0.0" />
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\..\src\Ursa.Themes.Semi\Ursa.Themes.Semi.csproj"/>
+        <ProjectReference Include="..\..\src\Ursa.Themes.Semi\Ursa.Themes.Semi.csproj" />
-        <ProjectReference Include="..\..\src\Ursa\Ursa.csproj"/>
+        <ProjectReference Include="..\..\src\Ursa\Ursa.csproj" />
     </ItemGroup>
 </Project>

demo/Ursa.Demo/ViewModels/KeyGestureInputDemoViewModel.cs

@@ -0,0 +1,8 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class KeyGestureInputDemoViewModel: ObservableObject
+{
+    
+}

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -29,6 +29,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyButtonGroup => new ButtonGroupDemoViewModel(),
             MenuKeys.MenuKeyDivider => new DividerDemoViewModel(),
             MenuKeys.MenuKeyIpBox => new IPv4BoxDemoViewModel(),
+            MenuKeys.MenuKeyKeyGestureInput => new KeyGestureInputDemoViewModel(),
             MenuKeys.MenuKeyLoading => new LoadingDemoViewModel(),
             MenuKeys.MenuKeyNavigation => new NavigationMenuDemoViewModel(),
             MenuKeys.MenuKeyPagination => new PaginationDemoViewModel(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -16,6 +16,7 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "ButtonGroup", Key = MenuKeys.MenuKeyButtonGroup },
             new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
             new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox },
+            new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
             new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
             new() { MenuHeader = "Navigation", Key = MenuKeys.MenuKeyNavigation },
             new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },

src/Ursa.Themes.Semi/Controls/KeyGestureInput.axaml

@@ -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"
+                    HorizontalAlignment="Stretch"
-                    MinHeight="32"
+                    VerticalAlignment="Stretch"
-                    Background="LightBlue"
+                    Background="{DynamicResource KeyGestureInputBackground}"
-                    BorderThickness="1">
+                    BorderBrush="Transparent"
-                    <TextBlock Text="{TemplateBinding Gesture, Converter={StaticResource KeyGestureConverter}}" />
+                    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>

src/Ursa.Themes.Semi/Themes/Dark/KeyGestureInput.axaml

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

src/Ursa.Themes.Semi/Themes/Dark/_index.axaml

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

src/Ursa.Themes.Semi/Themes/Light/KeyGestureInput.axaml

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

src/Ursa.Themes.Semi/Themes/Light/_index.axaml

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

src/Ursa.Themes.Semi/Themes/Shared/KeyGestureInput.axaml

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

src/Ursa.Themes.Semi/Themes/Shared/_index.axaml

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

src/Ursa/Controls/KeyGestureInput.cs

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