feat: add pseudo classes.

This commit is contained in:
rabbitism
2024-02-12 15:49:01 +08:00
parent bc9412aad2
commit f9802d222b
5 changed files with 185 additions and 26 deletions

View File

@@ -12,7 +12,9 @@
x:DataType="vm:NavMenuDemoViewModel"
mc:Ignorable="d">
<StackPanel>
<u:NavMenu>
<TextBlock Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
<u:NavMenu Name="menu2">
<u:NavMenuItem Header="Menu 1">
<u:NavMenuItem.Icon>
<Rectangle

View File

@@ -1,5 +1,9 @@
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Ursa.Controls;
namespace Ursa.Demo.ViewModels;
@@ -11,7 +15,12 @@ public class NavMenuDemoViewModel: ObservableObject
{
new MenuItem() { Header = "Getting Started" },
new MenuItem() { Header = "Design Principles" },
new MenuItem() { Header = "Contributing" },
new MenuItem() { Header = "Contributing", Children =
{
new MenuItem() { Header = "Code of Conduct" },
new MenuItem() { Header = "How to Contribute" },
new MenuItem() { Header = "Development Workflow" },
}},
}},
new MenuItem { Header = "Badge" },
new MenuItem { Header = "Banner" },
@@ -45,5 +54,17 @@ public class MenuItem
{
public string? Header { get; set; }
public string? Icon { get; set; }
public ICommand NavigationCommand { get; set; }
public MenuItem()
{
NavigationCommand = new AsyncRelayCommand(OnNavigate);
}
private async Task OnNavigate()
{
await MessageBox.ShowOverlayAsync(Header??string.Empty, "Navigation Result");
}
public ObservableCollection<MenuItem> Children { get; set; } = new ObservableCollection<MenuItem>();
}

View File

@@ -1,17 +1,18 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme TargetType="u:NavMenu" x:Key="{x:Type u:NavMenu}">
<Setter Property="Grid.IsSharedSizeScope" Value="True"></Setter>
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type u:NavMenu}" TargetType="u:NavMenu">
<Setter Property="Grid.IsSharedSizeScope" Value="True" />
<Setter Property="Template">
<ControlTemplate TargetType="u:NavMenu">
<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" Grid.IsSharedSizeScope="True"/>
<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme TargetType="u:NavMenuItem" x:Key="{x:Type u:NavMenuItem}">
<ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
<Setter Property="Template">
<ControlTemplate TargetType="u:NavMenuItem">
<Grid RowDefinitions="Auto, *">
@@ -20,10 +21,20 @@
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Icon}" HorizontalAlignment="Left" />
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Header}" />
<ContentPresenter
HorizontalAlignment="Left"
Background="Aqua"
Content="{TemplateBinding Icon}" />
<ContentPresenter
Grid.Column="1"
Background="LightYellow"
Content="{TemplateBinding Header}" />
</Grid>
<ItemsPresenter Grid.Row="1" ItemsPanel="{TemplateBinding ItemsPanel}" />
<ItemsPresenter
Grid.Row="1"
Margin="20,0,0,0"
Grid.IsSharedSizeScope="True"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</Grid>
</ControlTemplate>
</Setter>

View File

@@ -52,6 +52,17 @@ public class NavMenu: ItemsControl
set => SetValue(SubMenuBindingProperty, value);
}
public static readonly StyledProperty<IBinding?> CommandBindingProperty = AvaloniaProperty.Register<NavMenu, IBinding?>(
nameof(CommandBinding));
[AssignBinding]
[InheritDataTypeFromItems(nameof(ItemsSource))]
public IBinding? CommandBinding
{
get => GetValue(CommandBindingProperty);
set => SetValue(CommandBindingProperty, value);
}
static NavMenu()
{
SelectedItemProperty.Changed.AddClassHandler<NavMenu, object?>((o, e) => o.OnSelectedItemChange(e));
@@ -89,18 +100,28 @@ public class NavMenu: ItemsControl
{
navMenuItem[!ItemsSourceProperty] = SubMenuBinding;
}
if (CommandBinding is not null)
{
navMenuItem[!NavMenuItem.CommandProperty] = CommandBinding;
}
}
}
internal void SelectItem(NavMenuItem item)
internal void SelectItem(NavMenuItem item, NavMenuItem parent)
{
if (item.IsSelected) return;
var children = this.LogicalChildren.OfType<NavMenuItem>();
foreach (var child in children)
// if (item.IsSelected) return;
foreach (var child in LogicalChildren)
{
if (child != item)
if (child == parent)
{
child.IsSelected = false;
continue;
}
else
{
if (child is NavMenuItem navMenuItem)
{
navMenuItem.ClearSelection();
}
}
}
if (item.DataContext is not null && item.DataContext != this.DataContext)

View File

@@ -11,12 +11,17 @@ using Avalonia.VisualTree;
namespace Ursa.Controls;
[PseudoClasses(PC_Highlighted)]
[PseudoClasses(PC_Highlighted, PC_Collapsed, PC_Closed, PC_FirstLevel, PC_Selector)]
public class NavMenuItem: HeaderedSelectingItemsControl
{
public const string PC_Highlighted = "highlighted";
public const string PC_Highlighted = ":highlighted";
public const string PC_FirstLevel = ":first-level";
public const string PC_Collapsed = ":collapsed";
public const string PC_Closed = ":closed";
public const string PC_Selector = ":selector";
private NavMenu? _rootMenu;
private Panel? _popupPanel;
public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<NavMenuItem, object?>(
nameof(Icon));
@@ -36,8 +41,7 @@ public class NavMenuItem: HeaderedSelectingItemsControl
set => SetValue(IconTemplateProperty, value);
}
public static readonly StyledProperty<ICommand?> CommandProperty = AvaloniaProperty.Register<NavMenuItem, ICommand?>(
nameof(Command));
public static readonly StyledProperty<ICommand?> CommandProperty = Button.CommandProperty.AddOwner<NavMenuItem>();
public ICommand? Command
{
@@ -45,6 +49,15 @@ public class NavMenuItem: HeaderedSelectingItemsControl
set => SetValue(CommandProperty, value);
}
public static readonly StyledProperty<object?> CommandParameterProperty =
Button.CommandParameterProperty.AddOwner<NavMenuItem>();
public object? CommandParameter
{
get => GetValue(CommandParameterProperty);
set => SetValue(CommandParameterProperty, value);
}
public new static readonly StyledProperty<bool> IsSelectedProperty =
SelectingItemsControl.IsSelectedProperty.AddOwner<NavMenuItem>();
@@ -53,15 +66,34 @@ public class NavMenuItem: HeaderedSelectingItemsControl
get => GetValue(IsSelectedProperty);
set => SetValue(IsSelectedProperty, value);
}
private bool _isHighlighted;
public static readonly DirectProperty<NavMenuItem, bool> IsHighlightedProperty = AvaloniaProperty.RegisterDirect<NavMenuItem, bool>(
nameof(IsHighlighted), o => o.IsHighlighted, (o, v) => o.IsHighlighted = v);
public bool IsHighlighted
{
get => _isHighlighted;
private set => SetAndRaise(IsHighlightedProperty, ref _isHighlighted, value);
}
internal int Level { get; set; }
static NavMenuItem()
{
SelectableMixin.Attach<NavMenuItem>(IsSelectedProperty);
PressedMixin.Attach<NavMenuItem>();
IsHighlightedProperty.Changed.AddClassHandler<NavMenuItem, bool>((o, e) => o.OnIsHighlightedChange(e));
}
private void OnIsHighlightedChange(AvaloniaPropertyChangedEventArgs<bool> args)
{
PseudoClasses.Set(PC_Highlighted, args.NewValue.Value);
}
protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
{
return NeedsContainer<NavMenuItem>(item, out recycleKey);
@@ -81,6 +113,18 @@ public class NavMenuItem: HeaderedSelectingItemsControl
{
container[!HeaderProperty] = _rootMenu.HeaderBinding;
}
if (_rootMenu?.IconBinding is not null)
{
container[!IconProperty] = _rootMenu.IconBinding;
}
if (_rootMenu?.SubMenuBinding is not null)
{
container[!ItemsSourceProperty] = _rootMenu.SubMenuBinding;
}
if (_rootMenu?.CommandBinding is not null)
{
container[!CommandProperty] = _rootMenu.CommandBinding;
}
}
}
@@ -90,16 +134,76 @@ public class NavMenuItem: HeaderedSelectingItemsControl
_rootMenu = GetRootMenu();
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
var children = this.ItemsPanelRoot?.Children.ToList();
base.OnApplyTemplate(e);
Level = CalculateDistanceFromLogicalParent<NavMenuItem>(this);
PseudoClasses.Set(PC_FirstLevel, Level == 0);
}
protected override void OnPointerPressed(PointerPressedEventArgs e)
{
base.OnPointerPressed(e);
_rootMenu?.SelectItem(this);
SelectItem(this);
Command?.Execute(CommandParameter);
e.Handled = true;
}
protected void SelectItem(NavMenuItem item)
{
if (item == this)
{
SetCurrentValue(IsSelectedProperty, true);
SetCurrentValue(IsHighlightedProperty, true);
}
else
{
SetCurrentValue(IsSelectedProperty, false);
SetCurrentValue(IsHighlightedProperty, true);
}
if (this.Parent is NavMenuItem menuItem)
{
menuItem.SelectItem(item);
}
else if (this.Parent is NavMenu menu)
{
menu.SelectItem(item, this);
}
}
internal void ClearSelection()
{
SetCurrentValue(IsHighlightedProperty, false);
SetCurrentValue(IsSelectedProperty, false);
foreach (var child in LogicalChildren)
{
if (child is NavMenuItem item)
{
item.ClearSelection();
}
}
}
private NavMenu? GetRootMenu()
{
var root = this.FindAncestorOfType<NavMenu>() ?? this.FindLogicalAncestorOfType<NavMenu>();
return root;
}
private static int CalculateDistanceFromLogicalParent<T>(ILogical? logical, int @default = -1) where T : class
{
var result = 0;
while (logical != null && !(logical is T))
{
if (logical is NavMenuItem)
{
result++;
}
logical = logical.LogicalParent;
}
return logical != null ? result : @default;
}
}