feat: default styling.

This commit is contained in:
rabbitism
2024-02-13 17:47:54 +08:00
parent e227788a95
commit 89e8c2c5a3
4 changed files with 61 additions and 28 deletions

View File

@@ -54,9 +54,20 @@
HeaderBinding="{Binding Header}"
SubMenuBinding="{Binding Children}"
IconBinding="{Binding}">
<u:NavMenu.Styles>
<Style Selector="Rectangle">
<Setter Property="Fill" Value="Blue"></Setter>
</Style>
<Style Selector="Rectangle.Active">
<Setter Property="Fill" Value="Red"></Setter>
</Style>
</u:NavMenu.Styles>
<u:NavMenu.IconTemplate>
<DataTemplate>
<Rectangle Width="10" Height="10" Fill="Blue"></Rectangle>
<Rectangle
Classes.Active="{Binding $parent[u:NavMenuItem].IsHighlighted}"
Width="10" Height="10" >
</Rectangle>
</DataTemplate>
</u:NavMenu.IconTemplate>
</u:NavMenu>

View File

@@ -4,7 +4,6 @@ using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Ursa.Controls;
namespace Ursa.Demo.ViewModels;
public class NavMenuDemoViewModel: ObservableObject

View File

@@ -9,7 +9,7 @@
<ControlTheme x:Key="{x:Type u:NavMenu}" TargetType="u:NavMenu">
<Setter Property="Grid.IsSharedSizeScope" Value="True" />
<Setter Property="SubMenuIndent" Value="16" />
<Setter Property="SubMenuIndent" Value="24" />
<Setter Property="Template">
<ControlTemplate TargetType="u:NavMenu">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
@@ -22,8 +22,9 @@
<ControlTemplate x:Key="DefaultNavMenuItemTemplate" TargetType="u:NavMenuItem">
<Grid RowDefinitions="Auto, *">
<Border
Name="PART_Border"
Grid.Row="0"
Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"
Background="{TemplateBinding u:NavMenuItem.Background}"
CornerRadius="4">
<Grid HorizontalAlignment="Stretch">
<Grid.Margin>
@@ -81,8 +82,11 @@
</ControlTemplate>
<ControlTemplate x:Key="TopLevelCollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
<Border
MinWidth="24"
MinHeight="24"
Name="PART_Border"
CornerRadius="4"
MinWidth="32"
MinHeight="32"
Background="{TemplateBinding u:NavMenuItem.Background}"
HorizontalAlignment="Left">
<Grid>
<ContentPresenter
@@ -94,19 +98,20 @@
IsLightDismissEnabled="True"
Placement="RightEdgeAlignedTop"
PlacementTarget="{Binding #PART_IconPresenter}">
<Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True">
<Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True" Padding="4">
<ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
</Border>
</Popup>
</Grid>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="CollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
<Border
Name="PART_Border"
CornerRadius="4"
MinWidth="24"
MinHeight="24"
Background="{TemplateBinding u:NavMenuItem.Background}"
HorizontalAlignment="Stretch">
<Grid >
<Grid.ColumnDefinitions>
@@ -132,46 +137,64 @@
Width="8"
Height="8"
Margin="12,0"
RenderTransform="rotate(-90deg)"
Data="{DynamicResource NavigationMenuItemExpandIconGlyph}"
Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}">
<PathIcon.Transitions>
<Transitions>
<TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
</Transitions>
</PathIcon.Transitions>
</PathIcon>
<Popup Grid.Column="0"
Name="PART_Popup"
IsLightDismissEnabled="True"
Placement="RightEdgeAlignedTop"
PlacementTarget="{Binding #PART_Border}">
<Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True">
<Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True" Padding="4">
<ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
</Border>
</Popup>
</Grid>
</Border>
</ControlTemplate>
<ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
<Setter Property="Template" Value="{StaticResource DefaultNavMenuItemTemplate}" />
<Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
</Style>
<Style Selector="^:vertical-collapsed /template/ LayoutTransformControl#PART_Transform">
<Setter Property="LayoutTransform" 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="Background" Value="Transparent"></Setter>
<Style Selector="^">
<Setter Property="Template" Value="{StaticResource DefaultNavMenuItemTemplate}" />
<Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
</Style>
<Style Selector="^:vertical-collapsed /template/ LayoutTransformControl#PART_Transform">
<Setter Property="LayoutTransform" 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}"></Setter>
</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}"></Setter>
</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}"></Setter>
</Style>
</Style>
</ControlTheme>

View File

@@ -10,7 +10,7 @@ public class NavMenuMarginConverter: IMultiValueConverter
{
if (values[0] is double indent && values[1] is int level)
{
return new Thickness(indent * level, 0, 0, 0);
return new Thickness(indent * (level-1), 0, 0, 0);
}
return AvaloniaProperty.UnsetValue;
}