chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add header footer to navmenu.

Browse Source
This commit is contained in:
rabbitism
2024-02-14 00:41:33 +08:00
parent ec41a8228f
commit 32f5662370
4 changed files with 97 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
demo/Ursa.Demo/Pages/NavMenuDemo.axaml
View File

@@ -15,69 +15,77 @@
<UserControl.Resources>
<converters:IconNameToPathConverter x:Key="IconConverter"/>
</UserControl.Resources>
<ScrollViewer>
<StackPanel HorizontalAlignment="Left">
<TextBlock Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
<u:NavMenu Name="menu2" Width="300" IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
<u:NavMenuItem Header="Menu 1">
<u:NavMenuItem.Icon>
<Rectangle
Width="10"
Height="10"
Fill="Red" />
</u:NavMenuItem.Icon>
<u:NavMenuItem Header="Sub Menu 1"></u:NavMenuItem>
<u:NavMenuItem Header="Sub Menu 2"></u:NavMenuItem>
<u:NavMenuItem Header="Sub Menu 3"></u:NavMenuItem>
</u:NavMenuItem>
<u:NavMenuItem Header="Menu 2">
<u:NavMenuItem.Icon>
<Rectangle
Width="20"
Height="10"
Fill="Red" />
</u:NavMenuItem.Icon>
</u:NavMenuItem>
<u:NavMenuItem Header="Menu 3">
<u:NavMenuItem.Icon>
<Rectangle
Width="30"
Height="10"
Fill="Red" />
</u:NavMenuItem.Icon>
</u:NavMenuItem>
<Grid ColumnDefinitions="Auto, Auto" RowDefinitions="Auto, Auto, *" HorizontalAlignment="Left">
<ToggleButton Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Name="collapse">Collapse</ToggleButton>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{ReflectionBinding #menu.SelectedItem.Header}" />
<Border Grid.Row="2" Grid.Column="0" Theme="{DynamicResource CardBorder}" HorizontalAlignment="Left" Padding="0">
<u:NavMenu
Header="Hello Ursa"
Name="menu"
HeaderBinding="{Binding Header}"
IconBinding="{Binding IconIndex}"
IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
ItemsSource="{Binding MenuItems}"
SubMenuBinding="{Binding Children}">
<u:NavMenu.IconTemplate>
<DataTemplate DataType="{x:Type x:Int32}">
<u:TwoTonePathIcon
Width="16"
Height="16"
Data="{Binding Converter={StaticResource IconConverter}}"
StrokeBrush="{DynamicResource SemiGrey5}"
Foreground="{DynamicResource SemiGrey5}"
ActiveStrokeBrush="{DynamicResource SemiBlue5}"
ActiveForeground="{DynamicResource SemiBlue5}"
IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}">
</u:TwoTonePathIcon>
</DataTemplate>
</u:NavMenu.IconTemplate>
<u:NavMenu.Footer>
<Button>Collapse</Button>
</u:NavMenu.Footer>
</u:NavMenu>
<u:Divider Content="Divider" />
</Border>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
<u:NavMenu Grid.Row="2" Grid.Column="1" Name="menu2" IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
<u:NavMenuItem Header="Menu 1">
<u:NavMenuItem.Icon>
<Rectangle
Width="10"
Height="10"
Fill="Red" />
</u:NavMenuItem.Icon>
<u:NavMenuItem Header="Sub Menu 1"></u:NavMenuItem>
<u:NavMenuItem Header="Sub Menu 2"></u:NavMenuItem>
<u:NavMenuItem Header="Sub Menu 3"></u:NavMenuItem>
</u:NavMenuItem>
<u:NavMenuItem Header="Menu 2">
<u:NavMenuItem.Icon>
<Rectangle
Width="10"
Height="10"
Fill="Red" />
</u:NavMenuItem.Icon>
</u:NavMenuItem>
<u:NavMenuItem Header="Menu 3">
<u:NavMenuItem.Icon>
<Rectangle
Width="10"
Height="10"
Fill="Red" />
</u:NavMenuItem.Icon>
</u:NavMenuItem>
</u:NavMenu>
<StackPanel HorizontalAlignment="Left">
<TextBlock Text="{ReflectionBinding #menu.SelectedItem.Header}" />
<ToggleButton Name="collapse">Collapse</ToggleButton>
<Border Theme="{DynamicResource CardBorder}" HorizontalAlignment="Left" Padding="0">
<u:NavMenu
Name="menu"
HeaderBinding="{Binding Header}"
IconBinding="{Binding IconIndex}"
IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
ItemsSource="{Binding MenuItems}"
SubMenuBinding="{Binding Children}">
<u:NavMenu.IconTemplate>
<DataTemplate DataType="{x:Type x:Int32}">
<u:TwoTonePathIcon
Width="18"
Height="18"
Data="{Binding Converter={StaticResource IconConverter}}"
StrokeBrush="{DynamicResource SemiBlue2}"
Foreground="{DynamicResource SemiBlue2}"
ActiveStrokeBrush="{DynamicResource SemiBlue6}"
ActiveForeground="{DynamicResource SemiBlue6}"
IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}">
</u:TwoTonePathIcon>
</DataTemplate>
</u:NavMenu.IconTemplate>
</u:NavMenu>
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
</UserControl>

10
src/Ursa.Themes.Semi/Controls/NavMenu.axaml
View File

@@ -12,9 +12,13 @@
<Setter Property="SubMenuIndent" Value="24" />
<Setter Property="Template">
<ControlTemplate TargetType="u:NavMenu">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
<DockPanel LastChildFill="True">
<ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top"></ContentPresenter>
<ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom"></ContentPresenter>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^:horizontal-collapsed">

9
src/Ursa/Controls/Icons/TwoTonePathIcon.cs
View File

@@ -5,6 +5,7 @@ using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Data;
using Avalonia.Media;
using Irihi.Avalonia.Shared.Helpers;
namespace Ursa.Controls;
@@ -75,13 +76,7 @@ public class TwoTonePathIcon: TemplatedControl
ForegroundProperty,
ActiveForegroundProperty,
ActiveStrokeBrushProperty);
IsActiveProperty.Changed.AddClassHandler<TwoTonePathIcon, bool>((o, e) => o.OnIsActiveChanged(e));
}
private void OnIsActiveChanged(AvaloniaPropertyChangedEventArgs<bool> args)
{
var newValue = args.NewValue.Value;
PseudoClasses.Set(PC_Active, newValue);
PropertyToPseudoClassMixin.Attach<TwoTonePathIcon>(IsActiveProperty, PC_Active);
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)

21
src/Ursa/Controls/NavMenu/NavMenu.cs
View File

@@ -72,6 +72,9 @@ public class NavMenu: ItemsControl
public static readonly StyledProperty<IDataTemplate?> HeaderTemplateProperty = AvaloniaProperty.Register<NavMenu, IDataTemplate?>(
nameof(HeaderTemplate));
/// <summary>
/// Header Template is used for MenuItem headers, not menu header.
/// </summary>
public IDataTemplate? HeaderTemplate
{
get => GetValue(HeaderTemplateProperty);
@@ -105,6 +108,24 @@ public class NavMenu: ItemsControl
set => SetValue(IsHorizontalCollapsedProperty, value);
}
public static readonly StyledProperty<object?> HeaderProperty =
HeaderedContentControl.HeaderProperty.AddOwner<NavMenu>();
public object? Header
{
get => GetValue(HeaderProperty);
set => SetValue(HeaderProperty, value);
}
public static readonly StyledProperty<object?> FooterProperty = AvaloniaProperty.Register<NavMenu, object?>(
nameof(Footer));
public object? Footer
{
get => GetValue(FooterProperty);
set => SetValue(FooterProperty, value);
}
static NavMenu()
{
SelectedItemProperty.Changed.AddClassHandler<NavMenu, object?>((o, e) => o.OnSelectedItemChange(e));