feat: improve style. add demo.
This commit is contained in:
@@ -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";
|
||||
|
||||
}
|
||||
15
demo/Ursa.Demo/Pages/KeyGestureInputDemo.axaml
Normal file
15
demo/Ursa.Demo/Pages/KeyGestureInputDemo.axaml
Normal file
@@ -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>
|
||||
18
demo/Ursa.Demo/Pages/KeyGestureInputDemo.axaml.cs
Normal file
18
demo/Ursa.Demo/Pages/KeyGestureInputDemo.axaml.cs
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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 Include="CommunityToolkit.Mvvm" Version="8.1.0"/>
|
||||
<PackageReference Include="Semi.Avalonia" Version="11.0.0"/>
|
||||
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
|
||||
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.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\Ursa.csproj"/>
|
||||
<ProjectReference Include="..\..\src\Ursa.Themes.Semi\Ursa.Themes.Semi.csproj" />
|
||||
<ProjectReference Include="..\..\src\Ursa\Ursa.csproj" />
|
||||
</ItemGroup>
|
||||
</Project>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
|
||||
namespace Ursa.Demo.ViewModels;
|
||||
|
||||
public class KeyGestureInputDemoViewModel: ObservableObject
|
||||
{
|
||||
|
||||
}
|
||||
@@ -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(),
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -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>
|
||||
|
||||
9
src/Ursa.Themes.Semi/Themes/Dark/KeyGestureInput.axaml
Normal file
9
src/Ursa.Themes.Semi/Themes/Dark/KeyGestureInput.axaml
Normal 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>
|
||||
@@ -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" />
|
||||
|
||||
9
src/Ursa.Themes.Semi/Themes/Light/KeyGestureInput.axaml
Normal file
9
src/Ursa.Themes.Semi/Themes/Light/KeyGestureInput.axaml
Normal 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>
|
||||
@@ -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" />
|
||||
|
||||
6
src/Ursa.Themes.Semi/Themes/Shared/KeyGestureInput.axaml
Normal file
6
src/Ursa.Themes.Semi/Themes/Shared/KeyGestureInput.axaml
Normal 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>
|
||||
@@ -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" />
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user