feat: implement separator.

This commit is contained in:
rabbitism
2023-06-23 14:32:15 +08:00
parent 4ed708a0e6
commit bcf01c52c6
5 changed files with 119 additions and 31 deletions

View File

@@ -0,0 +1,27 @@
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using Ursa.Demo.ViewModels;
namespace Ursa.Demo.Converters;
public class MenuDataTemplateSelector: IDataTemplate
{
public IDataTemplate? MenuTemplate { get; set; }
public IDataTemplate? SeparatorTemplate { get; set; }
public Control? Build(object? param)
{
if (param is NavigationMenuItemViewModel vm)
{
if (vm.IsSeparator) return SeparatorTemplate?.Build(vm);
else return MenuTemplate?.Build(vm);
}
return null;
}
public bool Match(object? data)
{
return true;
}
}

View File

@@ -21,35 +21,48 @@
</converters:IconNameConverter>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
<u:NavigationMenu
Name="menu"
HorizontalAlignment="Left"
ItemsSource="{Binding MenuItems}"
ShowCollapseButton="True">
<u:NavigationMenu.Header>
<TextBlock
Classes="H5"
Text="Semi Avalonia"
Theme="{DynamicResource TitleTextBlock}" />
</u:NavigationMenu.Header>
<u:NavigationMenu.Icon>
<PathIcon
Width="32"
Height="32"
Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
</u:NavigationMenu.Icon>
<u:NavigationMenu.ItemTemplate>
<TreeDataTemplate>
<u:NavigationMenuItem Header="{Binding MenuHeader}" ItemsSource="{Binding Children}">
<u:NavigationMenuItem.Icon>
<PathIcon
Width="16"
Height="16"
Data="{Binding MenuIconName, Converter={StaticResource IconNameConverter}}" />
</u:NavigationMenuItem.Icon>
</u:NavigationMenuItem>
</TreeDataTemplate>
</u:NavigationMenu.ItemTemplate>
</u:NavigationMenu>
<ThemeVariantScope RequestedThemeVariant="Light">
<Border Padding="4" Theme="{DynamicResource CardBorder}">
<u:NavigationMenu
Name="menu"
HorizontalAlignment="Left"
ItemsSource="{Binding MenuItems}"
ShowCollapseButton="True">
<u:NavigationMenu.Header>
<TextBlock
Classes="H5"
Text="Semi Avalonia"
Theme="{DynamicResource TitleTextBlock}" />
</u:NavigationMenu.Header>
<u:NavigationMenu.Icon>
<PathIcon
Width="32"
Height="32"
Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
</u:NavigationMenu.Icon>
<u:NavigationMenu.ItemTemplate>
<converters:MenuDataTemplateSelector>
<converters:MenuDataTemplateSelector.MenuTemplate>
<DataTemplate DataType="vm:NavigationMenuItemViewModel">
<u:NavigationMenuItem Header="{Binding MenuHeader}" ItemsSource="{Binding Children}">
<u:NavigationMenuItem.Icon>
<PathIcon
Width="16"
Height="16"
Data="{Binding MenuIconName, Converter={StaticResource IconNameConverter}}" />
</u:NavigationMenuItem.Icon>
</u:NavigationMenuItem>
</DataTemplate>
</converters:MenuDataTemplateSelector.MenuTemplate>
<converters:MenuDataTemplateSelector.SeparatorTemplate>
<DataTemplate DataType="vm:NavigationMenuItemViewModel">
<u:NavigationMenuSeparator Header="{Binding MenuHeader}" />
</DataTemplate>
</converters:MenuDataTemplateSelector.SeparatorTemplate>
</converters:MenuDataTemplateSelector>
</u:NavigationMenu.ItemTemplate>
</u:NavigationMenu>
</Border>
</ThemeVariantScope>
</StackPanel>
</UserControl>

View File

@@ -25,6 +25,11 @@ public class NavigationMenuDemoViewModel: ObservableObject
}
},
new NavigationMenuItemViewModel()
{
MenuHeader = "附加功能",
IsSeparator = true,
},
new NavigationMenuItemViewModel()
{
MenuHeader = "任务平台",
MenuIconName = "Gear",
@@ -41,5 +46,7 @@ public class NavigationMenuItemViewModel: ObservableObject
{
public string MenuHeader { get; set; }
public string MenuIconName { get; set; }
public bool IsSeparator { get; set; }
public ObservableCollection<NavigationMenuItemViewModel> Children { get; set; } = new();
}