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

feat: default styling.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
demo/Ursa.Demo/Pages/NavMenuDemo.axaml
View File

@@ -54,9 +54,20 @@
HeaderBinding="{Binding Header}" HeaderBinding="{Binding Header}"
SubMenuBinding="{Binding Children}" SubMenuBinding="{Binding Children}"
IconBinding="{Binding}"> 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> <u:NavMenu.IconTemplate>
<DataTemplate> <DataTemplate>
<Rectangle Width="10" Height="10" Fill="Blue"></Rectangle> <Rectangle
Classes.Active="{Binding $parent[u:NavMenuItem].IsHighlighted}"
Width="10" Height="10" >
</Rectangle>
</DataTemplate> </DataTemplate>
</u:NavMenu.IconTemplate> </u:NavMenu.IconTemplate>
</u:NavMenu> </u:NavMenu>

1
demo/Ursa.Demo/ViewModels/NavMenuDemoViewModel.cs
View File

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

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

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

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

@@ -10,7 +10,7 @@ public class NavMenuMarginConverter: IMultiValueConverter
{ {
if (values[0] is double indent && values[1] is int level) 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; return AvaloniaProperty.UnsetValue;
} }