feat: add separator.

This commit is contained in:
rabbitism
2024-02-14 01:07:22 +08:00
parent 32f5662370
commit f2073f4eb3
4 changed files with 71 additions and 111 deletions

View File

@@ -20,13 +20,18 @@
<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"
Header="Welcome to Ursa!"
HeaderBinding="{Binding Header}"
IconBinding="{Binding IconIndex}"
IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
ItemsSource="{Binding MenuItems}"
SubMenuBinding="{Binding Children}">
<u:NavMenu.Styles>
<Style Selector="u|NavMenuItem" x:DataType="vm:MenuItem">
<Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter>
</Style>
</u:NavMenu.Styles>
<u:NavMenu.IconTemplate>
<DataTemplate DataType="{x:Type x:Int32}">
<u:TwoTonePathIcon
@@ -42,7 +47,11 @@
</DataTemplate>
</u:NavMenu.IconTemplate>
<u:NavMenu.Footer>
<Button>Collapse</Button>
<Image
Width="48"
Height="48"
RenderOptions.BitmapInterpolationMode="HighQuality"
Source="../Assets/Ursa.ico" />
</u:NavMenu.Footer>
</u:NavMenu>
</Border>
@@ -76,16 +85,5 @@
</u:NavMenuItem.Icon>
</u:NavMenuItem>
</u:NavMenu>
<StackPanel HorizontalAlignment="Left">
</StackPanel>
</Grid>
</UserControl>

View File

@@ -19,7 +19,7 @@ public class NavMenuDemoViewModel: ObservableObject
new MenuItem() { Header = "How to Contribute" },
new MenuItem() { Header = "Development Workflow" },
}},
new MenuItem() { Header = "Design Principles" },
new MenuItem() { Header = "Design Principles"},
new MenuItem() { Header = "Contributing", Children =
{
new MenuItem() { Header = "Code of Conduct" },
@@ -27,6 +27,7 @@ public class NavMenuDemoViewModel: ObservableObject
new MenuItem() { Header = "Development Workflow" },
}},
}},
new MenuItem { Header = "Controls", IsSeparator = true},
new MenuItem { Header = "Badge" },
new MenuItem { Header = "Banner" },
new MenuItem { Header = "ButtonGroup" },
@@ -57,11 +58,13 @@ public class NavMenuDemoViewModel: ObservableObject
public class MenuItem
{
public string? Header { get; set; }
public string? Icon { get; set; }
public int IconIndex { get; set; }
public ICommand NavigationCommand { get; set; }
static Random r = new Random();
public string? Header { get; set; }
public int IconIndex { get; set; }
public bool IsSeparator { get; set; }
public ICommand NavigationCommand { get; set; }
public MenuItem()
{
NavigationCommand = new AsyncRelayCommand(OnNavigate);

View File

@@ -15,7 +15,7 @@
<DockPanel LastChildFill="True">
<ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top"></ContentPresenter>
<ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom"></ContentPresenter>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ScrollViewer HorizontalAlignment="Center" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
</DockPanel>
@@ -33,6 +33,7 @@
Name="PART_Border"
Grid.Row="0"
MinHeight="32"
Cursor="Hand"
Background="{TemplateBinding u:NavMenuItem.Background}"
CornerRadius="4">
<Grid
@@ -116,75 +117,6 @@
</ItemsPresenter>
</Grid>
</ControlTemplate>
<!--
<ControlTemplate x:Key="TopLevelCollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
<Border
Name="PART_Border"
MinWidth="32"
MinHeight="32"
HorizontalAlignment="Left"
Background="{TemplateBinding u:NavMenuItem.Background}"
CornerRadius="4">
<Grid>
<ContentPresenter
Name="PART_IconPresenter"
Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="CollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
<Border
Name="PART_Border"
MinWidth="24"
MinHeight="24"
HorizontalAlignment="Stretch"
Background="{TemplateBinding u:NavMenuItem.Background}"
CornerRadius="4">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Expander" />
</Grid.ColumnDefinitions>
<ContentPresenter
Padding="8"
HorizontalAlignment="Left"
Background="Transparent"
Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter
Grid.Column="1"
Padding="0,8"
Background="Transparent"
Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
<PathIcon
Name="PART_ExpanderIcon"
Grid.Column="2"
Width="8"
Height="8"
Margin="12,0"
Data="{DynamicResource NavigationMenuItemExpandIconGlyph}"
Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}"
RenderTransform="rotate(-90deg)" />
<Popup
Name="PART_Popup"
Grid.Column="0"
IsLightDismissEnabled="True"
Placement="RightEdgeAlignedTop"
PlacementTarget="{Binding #PART_Border}">
<Border
Padding="4"
Grid.IsSharedSizeScope="True"
Theme="{DynamicResource CardBorder}">
<ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
</Border>
</Popup>
</Grid>
</Border>
</ControlTemplate>
-->
<ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
@@ -244,30 +176,44 @@
<Setter Property="RenderTransform" Value="rotate(-90deg)" />
</Style>
</Style>
<!--
<Style Selector="^:horizontal-collapsed:first-level">
<Setter Property="Template" Value="{StaticResource TopLevelCollapsedNavMenuItemTemplate}" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="ToolTip.ShowDelay" Value="0" />
</Style>
<Style Selector="^/template/ Border#PART_Border:pointerover">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
<Style Selector="^[IsSeparator=True]">
<Setter Property="Template">
<ControlTemplate>
<StackPanel Cursor="No" Name="PART_RootPanel" Margin="{DynamicResource NavigationMenuSeparatorMargin}">
<ContentPresenter
Name="PART_HeaderPresenter"
Margin="{DynamicResource NavigationMenuSeparatorHeaderMargin}"
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="{DynamicResource NavigationMenuSeparatorHeaderFontSize}" />
</Style>
</ContentPresenter.Styles>
</ContentPresenter>
<Rectangle
Name="PART_SeparatorBorder"
Height="{DynamicResource NavigationMenuSeparatorBorderHeight}"
Margin="{DynamicResource NavigationMenuSeparatorBorderMargin}"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiColorBorder}" />
</StackPanel>
</ControlTemplate>
</Setter>
<Style Selector="^:horizontal-collapsed:first-level">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="IsVisible" Value="False"></Setter>
</Style>
<Style Selector="^ /template/ Rectangle#PART_SeparatorBorder">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Width" Value="12"></Setter>
</Style>
</Style>
</Style>
<Style Selector="^:horizontal-collapsed:not(:first-level)">
<Setter Property="Template" Value="{StaticResource CollapsedNavMenuItemTemplate}" />
<Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
</Style>
<Style Selector="^:empty /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^/template/ Border#PART_Border:pointerover">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
</Style>
</Style>
-->
</ControlTheme>
</ResourceDictionary>

View File

@@ -124,7 +124,15 @@ public class NavMenuItem: HeaderedSelectingItemsControl
get => _level;
set => SetAndRaise(LevelProperty, ref _level, value);
}
public static readonly StyledProperty<bool> IsSeparatorProperty = AvaloniaProperty.Register<NavMenuItem, bool>(
nameof(IsSeparator));
public bool IsSeparator
{
get => GetValue(IsSeparatorProperty);
set => SetValue(IsSeparatorProperty, value);
}
static NavMenuItem()
{
@@ -222,6 +230,11 @@ public class NavMenuItem: HeaderedSelectingItemsControl
protected override void OnPointerPressed(PointerPressedEventArgs e)
{
if (IsSeparator)
{
e.Handled = true;
return;
}
base.OnPointerPressed(e);
if (this.ItemCount == 0)
{