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,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";
}

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

View 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);
}
}

View File

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

View File

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

View File

@@ -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(),

View File

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

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