feat: fix various nav menu layout issue.

This commit is contained in:
rabbitism
2024-03-07 15:55:39 +08:00
parent 35e56ec416
commit 947a5041e8
4 changed files with 34 additions and 11 deletions

View File

@@ -38,6 +38,7 @@
Theme="{DynamicResource CardBorder}">
<u:NavMenu
Name="menu"
ExpandWidth="400"
HeaderBinding="{Binding Header}"
IconBinding="{Binding IconIndex}"
IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"

View File

@@ -35,6 +35,7 @@
VerticalAlignment="Stretch"
Theme="{DynamicResource CardBorder}">
<u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}"
ExpandWidth="300"
CommandBinding="{Binding ActivateCommand}"
HeaderBinding="{Binding}"
IconBinding="{Binding MenuHeader}">
@@ -58,7 +59,7 @@
</u:NavMenu.IconTemplate>
<u:NavMenu.HeaderTemplate>
<DataTemplate x:DataType="vm:MenuItemViewModel">
<StackPanel Orientation="Horizontal" MinWidth="240">
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
<u:Badge
Margin="8,0,0,0"

View File

@@ -16,10 +16,10 @@
<ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top" />
<ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom" />
<ScrollViewer
HorizontalAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
AllowAutoHide="True"
Theme="{DynamicResource StaticScrollViewer}"
VerticalScrollBarVisibility="Auto">
<ScrollViewer.Styles>
<Style Selector="ScrollViewer /template/ ScrollBar">
@@ -39,9 +39,12 @@
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^:not(:horizontal-collapsed)">
<Setter Property="Width" Value="{Binding $self.ExpandWidth}"></Setter>
</Style>
<Style Selector="^:horizontal-collapsed">
<Setter Property="Width" Value="{x:Static x:Double.NaN}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="{Binding $self.CollapseWidth}" />
<Setter Property="Grid.IsSharedSizeScope" Value="False"></Setter>
</Style>
</ControlTheme>
@@ -51,6 +54,7 @@
Name="PART_Border"
Grid.Row="0"
MinHeight="32"
HorizontalAlignment="Stretch"
Background="{TemplateBinding u:NavMenuItem.Background}"
CornerRadius="4"
Cursor="Hand">
@@ -164,7 +168,7 @@
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
</Style>
<Style Selector="^:horizontal-collapsed:first-level">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="ToolTip.Tip" >
<Template>
@@ -172,7 +176,7 @@
</Template>
</Setter>
<Setter Property="ToolTip.ShowDelay" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
<Style Selector="^ /template/ Border#PART_Border:pointerover">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
@@ -191,16 +195,15 @@
<Style Selector="^ /template/ ItemsPresenter#PART_ItemsPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^ /template/ Grid#PART_RootGrid">
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
</Style>
<Style Selector="^:horizontal-collapsed:not(:first-level)">
<Style Selector="^ /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="RenderTransform" Value="rotate(-90deg)" />
</Style>
</Style>
<Style Selector="^:horizontal-collapsed:first-level">
<Setter Property="Grid.IsSharedSizeScope" Value="True"></Setter>
</Style>
<Style Selector="^[IsSeparator=True]">
<Setter Property="Template">
<ControlTemplate>

View File

@@ -129,6 +129,24 @@ public class NavMenu: ItemsControl
set => SetValue(FooterProperty, value);
}
public static readonly StyledProperty<double> ExpandWidthProperty = AvaloniaProperty.Register<NavMenu, double>(
nameof(ExpandWidth), double.NaN);
public double ExpandWidth
{
get => GetValue(ExpandWidthProperty);
set => SetValue(ExpandWidthProperty, value);
}
public static readonly StyledProperty<double> CollapseWidthProperty = AvaloniaProperty.Register<NavMenu, double>(
nameof(CollapseWidth), double.NaN);
public double CollapseWidth
{
get => GetValue(CollapseWidthProperty);
set => SetValue(CollapseWidthProperty, value);
}
public static readonly AttachedProperty<bool> CanToggleProperty =
AvaloniaProperty.RegisterAttached<NavMenu, InputElement, bool>("CanToggle");