chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: use popup instead of flyout. improve demo.

Browse Source
This commit is contained in:
rabbitism
2024-02-14 00:22:09 +08:00
parent 7051521040
commit ec41a8228f
6 changed files with 167 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/Ursa.Themes.Semi/Controls/NavMenu.axaml
View File

@@ -17,6 +17,10 @@
</ScrollViewer>
</ControlTemplate>
</Setter>
<Style Selector="^:horizontal-collapsed">
<Setter Property="Width" Value="{x:Static x:Double.NaN}"></Setter>
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
</Style>
</ControlTheme>
<ControlTemplate x:Key="DefaultNavMenuItemTemplate" TargetType="u:NavMenuItem">
@@ -24,20 +28,18 @@
<Border
Name="PART_Border"
Grid.Row="0"
MinHeight="32"
Background="{TemplateBinding u:NavMenuItem.Background}"
CornerRadius="4">
<Border.ContextFlyout>
<Flyout>
<Border>
<StackPanel Name="PART_OverflowPanel"></StackPanel>
</Border>
</Flyout>
</Border.ContextFlyout>
<Grid HorizontalAlignment="Stretch">
<Grid
Name="PART_RootGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Center">
<Grid.Margin>
<MultiBinding Converter="{StaticResource NavMarginConverter}">
<Binding Path="SubMenuIndent" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Level" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="IsHorizontalCollapsed" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</Grid.Margin>
<Grid.ColumnDefinitions>
@@ -46,12 +48,14 @@
<ColumnDefinition Width="Auto" SharedSizeGroup="Expander" />
</Grid.ColumnDefinitions>
<ContentPresenter
Name="PART_IconPresenter"
Padding="8"
HorizontalAlignment="Left"
Background="Transparent"
Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter
Name="PART_HeaderPresenter"
Grid.Column="1"
Padding="0,8"
Background="Transparent"
@@ -71,24 +75,44 @@
</Transitions>
</PathIcon.Transitions>
</PathIcon>
<Popup
Name="PART_Popup"
Grid.Column="0"
IsLightDismissEnabled="True"
Placement="RightEdgeAlignedTop"
PlacementTarget="{Binding #PART_Border}">
<Border
Margin="{DynamicResource NavigationMenuItemFlyoutMargin}"
Padding="{DynamicResource MenuFlyoutPadding}"
HorizontalAlignment="Stretch"
Background="{DynamicResource MenuFlyoutBackground}"
BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
<StackPanel Name="PART_OverflowPanel" />
</Border>
</Popup>
</Grid>
</Border>
<ItemsPresenter
Name="PART_ItemsPresenter"
Grid.Row="1"
Margin="0,4,0,0"
VerticalAlignment="Top"
Grid.IsSharedSizeScope="True"
ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin="0.5,0" >
RenderTransformOrigin="0.5,0">
<ItemsPresenter.Transitions>
<Transitions>
<DoubleTransition Property="Height" Duration="0.1"></DoubleTransition>
<DoubleTransition Property="Height" Duration="0.1" />
<TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
</Transitions>
</ItemsPresenter.Transitions>
</ItemsPresenter>
</Grid>
</ControlTemplate>
<!--
<ControlTemplate x:Key="TopLevelCollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
<Border
Name="PART_Border"
@@ -156,33 +180,67 @@
</Grid>
</Border>
</ControlTemplate>
-->
<ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<u:OverflowStackPanel></u:OverflowStackPanel>
<u:OverflowStackPanel />
</ItemsPanelTemplate>
</Setter>
<Style Selector="^">
<Setter Property="Template" Value="{StaticResource DefaultNavMenuItemTemplate}" />
<Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
</Style>
<Style Selector="^:vertical-collapsed /template/ ItemsPresenter#PART_ItemsPresenter">
<Setter Property="Height" Value="0"></Setter>
<Setter Property="RenderTransform" Value="scale(1,0)" />
</Style>
<Style Selector="^:vertical-collapsed /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="RenderTransform" Value="rotate(180deg)" />
</Style>
<Style Selector="^:empty /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="IsVisible" Value="False" />
<Setter Property="Template" Value="{StaticResource DefaultNavMenuItemTemplate}" />
<Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
</Style>
<Style Selector="^:vertical-collapsed /template/ ItemsPresenter#PART_ItemsPresenter">
<Setter Property="Height" Value="0" />
<Setter Property="RenderTransform" Value="scale(1,0)" />
</Style>
<Style Selector="^:vertical-collapsed /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="RenderTransform" Value="rotate(180deg)" />
</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 Selector="^:horizontal-collapsed:first-level">
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="ToolTip.ShowDelay" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style Selector="^ /template/ Border#PART_Border:pointerover">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Grid.ColumnSpan" Value="3" />
<Setter Property="Margin" Value="0 8"></Setter>
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^ /template/ PathIcon#PART_ExpanderIcon">
<Setter Property="IsVisible" Value="False" />
</Style>
<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="Template" Value="{StaticResource TopLevelCollapsedNavMenuItemTemplate}" />
<Style Selector="^ /template/ Border#PART_Border">

4
src/Ursa.Themes.Semi/Converters/NavMenuMarginConverter.cs
View File

@@ -8,9 +8,9 @@ public class NavMenuMarginConverter: IMultiValueConverter
{
public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
{
if (values[0] is double indent && values[1] is int level)
if (values[0] is double indent && values[1] is int level && values[2] is bool b)
{
return new Thickness(indent * (level-1), 0, 0, 0);
return b ? new Thickness() : new Thickness(indent * (level-1), 0, 0, 0);
}
return AvaloniaProperty.UnsetValue;
}

11
src/Ursa/Controls/NavMenu/NavMenuItem.cs
View File

@@ -235,9 +235,16 @@ public class NavMenuItem: HeaderedSelectingItemsControl
}
else
{
if (_border?.ContextFlyout is not null)
if (_popup is not null)
{
_border.ContextFlyout.ShowAt(this);
if (_popup.IsOpen)
{
_popup.Close();
}
else
{
_popup.Open();
}
}
}
}