feat: add default themes copy from fluent theme.

This commit is contained in:
rabbitism 2023-01-23 22:46:16 +08:00
parent e03509d885
commit 30842b9150
5 changed files with 423 additions and 8 deletions

View File

@ -9,12 +9,34 @@
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<Menu>
<MenuItem Header="File">
<MenuItem Header="Create" />
<MenuItem Header="Delete" />
<MenuItem Header="_First">
<MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
<MenuItem
Header="_Disabled Menu Item"
InputGesture="Ctrl+D"
IsEnabled="False" />
<Separator />
<MenuItem Header="Menu with _Submenu">
<MenuItem Header="Submenu _1" />
<MenuItem Header="Submenu _2 with Submenu">
<MenuItem Header="Submenu Level 2" />
</MenuItem>
<MenuItem Header="Submenu _3 with Submenu Disabled" IsEnabled="False">
<MenuItem Header="Submenu Level 2" />
</MenuItem>
</MenuItem>
<MenuItem Header="Menu Item with _Checkbox">
<MenuItem.Icon>
<CheckBox
BorderThickness="0"
IsChecked="True"
IsHitTestVisible="False" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem Header="_Second">
<MenuItem Header="Second _Menu Item" />
</MenuItem>
<MenuItem Header="View" />
<MenuItem Header="Tools" />
</Menu>
</StackPanel>
</UserControl>

View File

@ -13,7 +13,7 @@
<ItemGroup>
<PackageReference Include="Avalonia" Version="11.0.0-preview4" />
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview4" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
<PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
</ItemGroup>

View File

@ -45,6 +45,9 @@
<TabItem Header="ListBox">
<pages:ListBoxDemo />
</TabItem>
<TabItem Header="Menu">
<pages:MenuDemo />
</TabItem>
<TabItem Header="Notification">
<pages:NotificationDemo />
</TabItem>

View File

@ -1,3 +1,357 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="using:Avalonia.Controls.Converters">
<converters:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
<ControlTheme x:Key="MenuScrollViewer" TargetType="ScrollViewer">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<ControlTemplate>
<DockPanel>
<RepeatButton
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Transparent"
BorderThickness="0"
Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
DockPanel.Dock="Top"
RenderTransform="{x:Null}">
<RepeatButton.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
<Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</RepeatButton.IsVisible>
<Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
<Path
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
Fill="{DynamicResource ScrollBarButtonArrowForeground}" />
</Viewbox>
</RepeatButton>
<RepeatButton
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Transparent"
BorderThickness="0"
Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
DockPanel.Dock="Bottom"
RenderTransform="{x:Null}">
<RepeatButton.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
<Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</RepeatButton.IsVisible>
<Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
<Path
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
Fill="{DynamicResource ScrollBarButtonArrowForeground}" />
</Viewbox>
</RepeatButton>
<ScrollContentPresenter
Name="PART_ContentPresenter"
Margin="{TemplateBinding Padding}"
CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
Content="{TemplateBinding Content}"
Extent="{TemplateBinding Extent,
Mode=TwoWay}"
Viewport="{TemplateBinding Viewport,
Mode=TwoWay}"
Offset="{TemplateBinding Offset,
Mode=TwoWay}">
<ScrollContentPresenter.GestureRecognizers>
<ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
</ScrollContentPresenter.GestureRecognizers>
</ScrollContentPresenter>
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ RepeatButton:pointerover &gt; Viewbox &gt; Path">
<Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
<!-- Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future. -->
<Setter Property="Padding" Value="{DynamicResource MenuFlyoutItemThemePaddingNarrow}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<ControlTemplate>
<Panel>
<Border
Name="PART_LayoutRoot"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIcon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGT" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemChevron" />
</Grid.ColumnDefinitions>
<Viewbox
Name="PART_IconPresenter"
Width="16"
Height="16"
Margin="{DynamicResource MenuIconPresenterMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
IsVisible="False"
StretchDirection="DownOnly">
<ContentPresenter Content="{TemplateBinding Icon}" />
</Viewbox>
<ContentPresenter
Name="PART_HeaderPresenter"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Content="{TemplateBinding Header}"
RecognizesAccessKey="True" />
<TextBlock
x:Name="PART_InputGestureText"
Grid.Column="2"
Margin="{DynamicResource MenuInputGestureTextMargin}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Classes="CaptionTextBlockStyle"
Foreground="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
Text="{TemplateBinding InputGesture,
Converter={StaticResource KeyGestureConverter}}" />
<Path
Name="PART_ChevronPath"
Grid.Column="3"
Width="8"
Height="16"
Margin="{DynamicResource MenuFlyoutItemChevronMargin}"
VerticalAlignment="Center"
Data="{DynamicResource MenuItemChevronPathData}"
Fill="{DynamicResource MenuFlyoutSubItemChevron}"
Stretch="Uniform" />
</Grid>
</Border>
<Popup
Name="PART_Popup"
HorizontalOffset="{DynamicResource MenuFlyoutSubItemPopupHorizontalOffset}"
IsLightDismissEnabled="False"
IsOpen="{TemplateBinding IsSubMenuOpen,
Mode=TwoWay}"
PlacementMode="Right"
WindowManagerAddShadowHint="False">
<Border
MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
HorizontalAlignment="Stretch"
Background="{DynamicResource MenuFlyoutPresenterBackground}"
BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
CornerRadius="{DynamicResource OverlayCornerRadius}">
<ScrollViewer Theme="{StaticResource MenuScrollViewer}">
<ItemsPresenter
Name="PART_ItemsPresenter"
Margin="{DynamicResource MenuFlyoutScrollerMargin}"
Grid.IsSharedSizeScope="True"
ItemTemplate="{TemplateBinding ItemTemplate}"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
</Border>
</Popup>
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^:icon /template/ Viewbox#PART_IconPresenter">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="^:selected">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_InputGestureText">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
</Style>
<Style Selector="^ /template/ Path#PART_ChevronPath">
<Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPointerOver}" />
</Style>
</Style>
<!-- Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
<Style Selector="^ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
</Style>
<Style Selector="^ TextBlock#PART_InputGestureText">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
</Style>
<Style Selector="^ Path#PART_ChevronPath">
<Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPressed}" />
</Style>
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
</Style>
<Style Selector="^ /template/ TextBlock#PART_InputGestureText">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
</Style>
<Style Selector="^ /template/ Path#PART_ChevronPath">
<Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronDisabled}" />
</Style>
</Style>
<Style Selector="^:open /template/ Path#PART_ChevronPath">
<Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronSubMenuOpened}" />
</Style>
<Style Selector="^:empty /template/ Path#PART_ChevronPath">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^:separator">
<Setter Property="Template">
<ControlTemplate>
<Separator />
</ControlTemplate>
</Setter>
</Style>
</ControlTheme>
<ControlTheme x:Key="TopLevelMenuItem" TargetType="MenuItem">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
<!-- Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future. -->
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Padding" Value="{DynamicResource MenuBarItemPadding}" />
<Setter Property="Template">
<ControlTemplate>
<Border
Name="PART_LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<ContentPresenter
Name="PART_HeaderPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Content="{TemplateBinding Header}"
RecognizesAccessKey="True" />
<Popup
Name="PART_Popup"
MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
IsLightDismissEnabled="True"
IsOpen="{TemplateBinding IsSubMenuOpen,
Mode=TwoWay}"
OverlayInputPassThroughElement="{Binding $parent[Menu]}"
WindowManagerAddShadowHint="False">
<Border
MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
HorizontalAlignment="Stretch"
Background="{DynamicResource MenuFlyoutPresenterBackground}"
BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
CornerRadius="{DynamicResource OverlayCornerRadius}">
<ScrollViewer Theme="{StaticResource MenuScrollViewer}">
<ItemsPresenter
Name="PART_ItemsPresenter"
Margin="{DynamicResource MenuFlyoutScrollerMargin}"
Grid.IsSharedSizeScope="True"
ItemTemplate="{TemplateBinding ItemTemplate}"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
</Border>
</Popup>
</Panel>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:selected">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
</Style>
</Style>
<!-- Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
<Style Selector="^ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
</Style>
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type Menu}" TargetType="Menu">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Height" Value="60" />
<Setter Property="Menu.ItemContainerTheme" Value="{StaticResource TopLevelMenuItem}" />
<Setter Property="Template">
<ControlTemplate TargetType="Menu">
<Border
Padding="{TemplateBinding Padding}"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ItemsPresenter
Name="PART_ItemsPresenter"
VerticalAlignment="Stretch"
ItemTemplate="{TemplateBinding ItemTemplate}"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
KeyboardNavigation.TabNavigation="Continue" />
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

View File

@ -1,3 +1,39 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type MenuFlyoutPresenter}" TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="{DynamicResource MenuFlyoutPresenterBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}" />
<Setter Property="Padding" Value="{DynamicResource MenuFlyoutPresenterThemePadding}" />
<Setter Property="MaxWidth" Value="{DynamicResource FlyoutThemeMaxWidth}" />
<Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutThemeMinHeight}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
<Setter Property="Template">
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Border
Name="LayoutRoot"
Padding="{DynamicResource FlyoutBorderThemePadding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ScrollViewer
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
Theme="{StaticResource MenuScrollViewer}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
<ItemsPresenter
Name="PART_ItemsPresenter"
Margin="{DynamicResource MenuFlyoutScrollerMargin}"
Grid.IsSharedSizeScope="True"
ItemTemplate="{TemplateBinding ItemTemplate}"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
KeyboardNavigation.TabNavigation="Continue" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>