Merge pull request #570 from irihitech/nav

Enhance NavMenu styles
This commit is contained in:
Dong Bin
2025-02-13 22:22:55 +08:00
committed by GitHub
2 changed files with 32 additions and 19 deletions

View File

@@ -84,7 +84,7 @@
<ContentPresenter <ContentPresenter
Name="PART_HeaderPresenter" Name="PART_HeaderPresenter"
Grid.Column="1" Grid.Column="1"
Padding="0,8" Padding="0,8, 8, 8"
Background="Transparent" Background="Transparent"
Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" /> ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
@@ -92,12 +92,12 @@
Name="PART_ExpanderIcon" Name="PART_ExpanderIcon"
Grid.Column="2" Grid.Column="2"
Theme="{StaticResource InnerPathIcon}" Theme="{StaticResource InnerPathIcon}"
Margin="12,0" Margin="4,0, 8 0"
Data="{DynamicResource NavigationMenuItemExpandIconGlyph}" Data="{DynamicResource NavigationMenuItemExpandIconGlyph}"
Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}"> Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}">
<PathIcon.Transitions> <PathIcon.Transitions>
<Transitions> <Transitions>
<TransformOperationsTransition Property="RenderTransform" Duration="0.1" /> <TransformOperationsTransition Property="RenderTransform" Duration="0.2" />
</Transitions> </Transitions>
</PathIcon.Transitions> </PathIcon.Transitions>
</PathIcon> </PathIcon>
@@ -121,21 +121,30 @@
</Popup> </Popup>
</Grid> </Grid>
</Border> </Border>
<LayoutTransformControl Grid.Row="1" RenderTransformOrigin="0.5,0">
<ItemsPresenter <ItemsPresenter
Name="PART_ItemsPresenter" Name="PART_ItemsPresenter"
Grid.Row="1" Grid.Row="1"
Margin="0,4,0,0" Margin="0,4,0,0"
Opacity="1"
VerticalAlignment="Top" VerticalAlignment="Top"
Grid.IsSharedSizeScope="True" Grid.IsSharedSizeScope="True"
ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin="0.5,0"> RenderTransformOrigin="0.5,0">
<ItemsPresenter.Transitions> <ItemsPresenter.Transitions>
<Transitions> <Transitions>
<DoubleTransition Property="Height" Duration="0.1" /> <DoubleTransition Easing="QuadraticEaseIn" Property="Height" Duration="0.25" />
<TransformOperationsTransition Property="RenderTransform" Duration="0.1" /> <DoubleTransition Easing="QuadraticEaseOut" Property="Opacity" Duration="0.25" />
<TransformOperationsTransition Easing="QuadraticEaseInOut" Property="RenderTransform" Duration="0.25" />
</Transitions> </Transitions>
</ItemsPresenter.Transitions> </ItemsPresenter.Transitions>
</ItemsPresenter> </ItemsPresenter>
<LayoutTransformControl.Transitions>
<Transitions>
<TransformOperationsTransition Easing="QuadraticEaseInOut" Property="LayoutTransform" Duration="0.15" Delay="0.1" />
</Transitions>
</LayoutTransformControl.Transitions>
</LayoutTransformControl>
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
<ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem"> <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
@@ -157,7 +166,11 @@
</Style> </Style>
<Style Selector="^:vertical-collapsed /template/ ItemsPresenter#PART_ItemsPresenter"> <Style Selector="^:vertical-collapsed /template/ ItemsPresenter#PART_ItemsPresenter">
<Setter Property="Height" Value="0" /> <Setter Property="Height" Value="0" />
<Setter Property="RenderTransform" Value="scale(1,0)" /> <Setter Property="Opacity" Value="0" />
<!--<Setter Property="RenderTransform" Value="scale(1,0.9)" />-->
</Style>
<Style Selector="^:vertical-collapsed /template/ LayoutTransformControl">
<Setter Property="LayoutTransform" Value="scale(1,0)" />
</Style> </Style>
<Style Selector="^:vertical-collapsed /template/ PathIcon#PART_ExpanderIcon"> <Style Selector="^:vertical-collapsed /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="RenderTransform" Value="rotate(180deg)" /> <Setter Property="RenderTransform" Value="rotate(180deg)" />
@@ -203,7 +216,7 @@
</Style> </Style>
<Style Selector="^:horizontal-collapsed:not(:first-level)"> <Style Selector="^:horizontal-collapsed:not(:first-level)">
<Style Selector="^ /template/ PathIcon#PART_ExpanderIcon"> <Style Selector="^ /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="RenderTransform" Value="rotate(-90deg)" /> <Setter Property="RenderTransform" Value="rotate(90deg)" />
</Style> </Style>
</Style> </Style>
<Style Selector="^:horizontal-collapsed:first-level"> <Style Selector="^:horizontal-collapsed:first-level">

View File

@@ -1,7 +1,7 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="NavigationMenuItemExpandIconGlyph" ResourceKey="SemiIconChevronDown" /> <StaticResource x:Key="NavigationMenuItemExpandIconGlyph" ResourceKey="SemiIconChevronUp" />
<x:Double x:Key="NavigationMenuExpandWidth">260</x:Double> <x:Double x:Key="NavigationMenuExpandWidth">260</x:Double>
<x:Double x:Key="NavigationMenuClosedWidth">80</x:Double> <x:Double x:Key="NavigationMenuClosedWidth">80</x:Double>