feat: add pseudo classes.
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>();
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user