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> </converters:IconNameConverter>
</UserControl.Resources> </UserControl.Resources>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:NavigationMenu <ThemeVariantScope RequestedThemeVariant="Light">
Name="menu" <Border Padding="4" Theme="{DynamicResource CardBorder}">
HorizontalAlignment="Left" <u:NavigationMenu
ItemsSource="{Binding MenuItems}" Name="menu"
ShowCollapseButton="True"> HorizontalAlignment="Left"
<u:NavigationMenu.Header> ItemsSource="{Binding MenuItems}"
<TextBlock ShowCollapseButton="True">
Classes="H5" <u:NavigationMenu.Header>
Text="Semi Avalonia" <TextBlock
Theme="{DynamicResource TitleTextBlock}" /> Classes="H5"
</u:NavigationMenu.Header> Text="Semi Avalonia"
<u:NavigationMenu.Icon> Theme="{DynamicResource TitleTextBlock}" />
<PathIcon </u:NavigationMenu.Header>
Width="32" <u:NavigationMenu.Icon>
Height="32" <PathIcon
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" /> Width="32"
</u:NavigationMenu.Icon> Height="32"
<u:NavigationMenu.ItemTemplate> 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" />
<TreeDataTemplate> </u:NavigationMenu.Icon>
<u:NavigationMenuItem Header="{Binding MenuHeader}" ItemsSource="{Binding Children}"> <u:NavigationMenu.ItemTemplate>
<u:NavigationMenuItem.Icon> <converters:MenuDataTemplateSelector>
<PathIcon <converters:MenuDataTemplateSelector.MenuTemplate>
Width="16" <DataTemplate DataType="vm:NavigationMenuItemViewModel">
Height="16" <u:NavigationMenuItem Header="{Binding MenuHeader}" ItemsSource="{Binding Children}">
Data="{Binding MenuIconName, Converter={StaticResource IconNameConverter}}" /> <u:NavigationMenuItem.Icon>
</u:NavigationMenuItem.Icon> <PathIcon
</u:NavigationMenuItem> Width="16"
</TreeDataTemplate> Height="16"
</u:NavigationMenu.ItemTemplate> Data="{Binding MenuIconName, Converter={StaticResource IconNameConverter}}" />
</u:NavigationMenu> </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> </StackPanel>
</UserControl> </UserControl>

View File

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

View File

@@ -297,4 +297,40 @@
<Setter Property="PathIcon.IsVisible" Value="False" /> <Setter Property="PathIcon.IsVisible" Value="False" />
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="{x:Type u:NavigationMenuSeparator}" TargetType="u:NavigationMenuSeparator">
<Setter Property="Template">
<ControlTemplate TargetType="u:NavigationMenuSeparator">
<StackPanel Name="PART_RootPanel" Margin="4,0">
<ContentPresenter
Name="PART_HeaderPresenter"
Margin="4,0"
HorizontalAlignment="Left"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{DynamicResource TextBlockQuaternaryForeground}"
IsVisible="{TemplateBinding Header,
Converter={x:Static ObjectConverters.IsNotNull}}">
<ContentPresenter.Styles>
<Style Selector="TextBlock">
<Setter Property="FontSize" Value="12" />
</Style>
</ContentPresenter.Styles>
</ContentPresenter>
<Rectangle
Height="1"
Margin="0,2"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiColorBorder}" />
</StackPanel>
</ControlTemplate>
</Setter>
<Style Selector="^:closed /template/ StackPanel#PART_RootPanel">
<Setter Property="StackPanel.HorizontalAlignment" Value="Center" />
<Setter Property="StackPanel.Width" Value="32" />
</Style>
<Style Selector="^:closed /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="ContentPresenter.IsVisible" Value="False" />
</Style>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>

View File

@@ -1,6 +1,11 @@
using Avalonia.Input;
namespace Ursa.Controls; namespace Ursa.Controls;
public class NavigationMenuSeparator: NavigationMenuItem public class NavigationMenuSeparator: NavigationMenuItem
{ {
protected override void OnPointerPressed(PointerPressedEventArgs e)
{
e.Handled = true;
}
} }