feat: refactor WindowDrawnDecorations with new styling and structure. (#768)

This commit is contained in:
Zhang Dian
2026-03-15 03:39:24 +08:00
committed by GitHub
parent 1d59cff87d
commit d6d03133b4
9 changed files with 96 additions and 91 deletions

View File

@@ -8,7 +8,7 @@
<Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" /> <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
<Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" /> <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Setter Property="VerticalAlignment" Value="Stretch" /> <Setter Property="WindowDecorationProperties.ElementRole" Value="DecorationsElement" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="Button"> <ControlTemplate TargetType="Button">
<ContentPresenter <ContentPresenter
@@ -20,7 +20,15 @@
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{TemplateBinding Foreground}" /> Foreground="{TemplateBinding Foreground}">
<ContentPresenter.DataTemplates>
<DataTemplate DataType="Geometry">
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{Binding}" />
</DataTemplate>
</ContentPresenter.DataTemplates>
</ContentPresenter>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
@@ -36,7 +44,7 @@
<ControlTheme x:Key="{x:Type WindowDrawnDecorations}" TargetType="WindowDrawnDecorations"> <ControlTheme x:Key="{x:Type WindowDrawnDecorations}" TargetType="WindowDrawnDecorations">
<Setter Property="DefaultTitleBarHeight" Value="32" /> <Setter Property="DefaultTitleBarHeight" Value="32" />
<Setter Property="DefaultFrameThickness" Value="1" /> <Setter Property="DefaultFrameThickness" Value="1" />
<Setter Property="DefaultShadowThickness" Value="16" /> <Setter Property="DefaultShadowThickness" Value="8" />
<Setter Property="Template"> <Setter Property="Template">
<WindowDrawnDecorationsTemplate> <WindowDrawnDecorationsTemplate>
<WindowDrawnDecorationsContent> <WindowDrawnDecorationsContent>
@@ -44,16 +52,17 @@
<!-- Full-size: covers shadow area + frame + behind client area --> <!-- Full-size: covers shadow area + frame + behind client area -->
<Panel> <Panel>
<Border <Border
x:Name="PART_WindowBorder" Name="PART_WindowBorder"
Margin="{TemplateBinding ShadowThickness}" Margin="{TemplateBinding ShadowThickness}"
Background="{DynamicResource WindowBackground}" Background="{DynamicResource WindowBackground}"
BorderBrush="{DynamicResource WindowBorderBrush}" BorderBrush="{DynamicResource WindowBorderBrush}"
BorderThickness="1" BorderThickness="1"
BoxShadow="0 8 32 0 #40000000" /> BoxShadow="{DynamicResource WindowBorderShadow}" />
<!-- Titlebar: background, title text, and drag area live in underlay --> <!-- Titlebar: background, title text, and drag area live in underlay -->
<Panel x:Name="PART_TitleBar" VerticalAlignment="Top" <Panel Name="PART_TitleBar"
VerticalAlignment="Top"
Height="{TemplateBinding TitleBarHeight}" Height="{TemplateBinding TitleBarHeight}"
Background="{DynamicResource SystemControlBackgroundAltHighBrush}" Background="{DynamicResource TitleBarBackground}"
IsVisible="{TemplateBinding HasTitleBar}" IsVisible="{TemplateBinding HasTitleBar}"
WindowDecorationProperties.ElementRole="TitleBar" /> WindowDecorationProperties.ElementRole="TitleBar" />
</Panel> </Panel>
@@ -61,10 +70,10 @@
<WindowDrawnDecorationsContent.Overlay> <WindowDrawnDecorationsContent.Overlay>
<!-- Positioned over the titlebar area --> <!-- Positioned over the titlebar area -->
<Panel x:Name="PART_OverlayWrapper"> <Panel Name="PART_OverlayWrapper">
<!-- Title text lives in overlay so it renders above client content --> <!-- Title text lives in overlay so it renders above client content -->
<Panel <Panel
x:Name="PART_TitleTextPanel" Name="PART_TitleTextPanel"
Height="{TemplateBinding TitleBarHeight}" Height="{TemplateBinding TitleBarHeight}"
VerticalAlignment="Top" VerticalAlignment="Top"
IsHitTestVisible="False" IsHitTestVisible="False"
@@ -76,7 +85,7 @@
Text="{TemplateBinding Title}" /> Text="{TemplateBinding Title}" />
</Panel> </Panel>
<StackPanel <StackPanel
x:Name="PART_OverlayPanel" Name="PART_OverlayPanel"
Height="{TemplateBinding TitleBarHeight}" Height="{TemplateBinding TitleBarHeight}"
HorizontalAlignment="Right" HorizontalAlignment="Right"
VerticalAlignment="Top" VerticalAlignment="Top"
@@ -87,68 +96,48 @@
<Button <Button
Name="PART_FullScreenButton" Name="PART_FullScreenButton"
Theme="{StaticResource CaptionButton}" Theme="{StaticResource CaptionButton}"
WindowDecorationProperties.ElementRole="FullScreenButton"> Content="{StaticResource WindowExpandGlyph}"
<PathIcon WindowDecorationProperties.ElementRole="FullScreenButton" />
Name="PART_FullScreenButtonIcon"
Data="{StaticResource WindowExpandGlyph}"
Foreground="{Binding $parent[Button].Foreground}"
Theme="{StaticResource InnerPathIcon}" />
</Button>
<Button <Button
Name="PART_MinimizeButton" Name="PART_MinimizeButton"
AutomationProperties.Name="Minimize"
Theme="{StaticResource CaptionButton}" Theme="{StaticResource CaptionButton}"
WindowDecorationProperties.ElementRole="MinimizeButton"> Content="{StaticResource WindowMinimizeGlyph}"
<PathIcon WindowDecorationProperties.ElementRole="MinimizeButton" />
Name="PART_MinimizeButtonIcon"
Data="{StaticResource WindowMinimizeGlyph}"
Foreground="{Binding $parent[Button].Foreground}"
Theme="{StaticResource InnerPathIcon}" />
</Button>
<Button <Button
Name="PART_MaximizeButton" Name="PART_MaximizeButton"
AutomationProperties.Name="Maximize"
Theme="{StaticResource CaptionButton}" Theme="{StaticResource CaptionButton}"
WindowDecorationProperties.ElementRole="MaximizeButton"> Content="{StaticResource WindowMaximizeGlyph}"
<PathIcon WindowDecorationProperties.ElementRole="MaximizeButton" />
Name="PART_MaximizeButtonIcon"
Data="{StaticResource WindowMaximizeGlyph}"
Foreground="{Binding $parent[Button].Foreground}"
Theme="{StaticResource InnerPathIcon}" />
</Button>
<Button <Button
Name="PART_CloseButton" Name="PART_CloseButton"
AutomationProperties.Name="Close"
Theme="{StaticResource CaptionButton}" Theme="{StaticResource CaptionButton}"
WindowDecorationProperties.ElementRole="CloseButton"> Content="{StaticResource WindowCloseIconGlyph}"
<PathIcon WindowDecorationProperties.ElementRole="CloseButton" />
Name="PART_CloseButtonIcon"
Data="{StaticResource WindowCloseIconGlyph}"
Foreground="{Binding $parent[Button].Foreground}"
Theme="{StaticResource InnerPathIcon}" />
</Button>
</StackPanel> </StackPanel>
</Panel> </Panel>
</WindowDrawnDecorationsContent.Overlay> </WindowDrawnDecorationsContent.Overlay>
<WindowDrawnDecorationsContent.FullscreenPopover> <WindowDrawnDecorationsContent.FullscreenPopover>
<!-- Shown on hover at top edge in fullscreen --> <!-- Shown on hover at top edge in fullscreen -->
<DockPanel Height="{TemplateBinding TitleBarHeight}" Background="#E0000000"> <DockPanel
Height="{TemplateBinding TitleBarHeight}"
Background="{DynamicResource TitleBarBackground}"
WindowDecorationProperties.ElementRole="TitleBar">
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal"> <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
<Button <Button
x:Name="PART_PopoverFullScreenButton" Name="PART_PopoverFullScreenButton"
Theme="{StaticResource CaptionButton}" Theme="{StaticResource CaptionButton}"
WindowDecorationProperties.ElementRole="FullScreenButton"> Content="{StaticResource WindowCollapseGlyph}"
<PathIcon WindowDecorationProperties.ElementRole="FullScreenButton" />
Data="{StaticResource WindowCollapseGlyph}" <Button
Foreground="{Binding $parent[Button].Foreground}" Name="PART_PopoverCloseButton"
Theme="{StaticResource InnerPathIcon}" /> Theme="{StaticResource CaptionButton}"
</Button> Content="{StaticResource WindowCloseIconGlyph}"
WindowDecorationProperties.ElementRole="CloseButton" />
</StackPanel> </StackPanel>
<TextBlock <TextBlock
Margin="12,0" Margin="12,0"
VerticalAlignment="Center" VerticalAlignment="Center"
Foreground="White"
Text="{TemplateBinding Title}" /> Text="{TemplateBinding Title}" />
</DockPanel> </DockPanel>
</WindowDrawnDecorationsContent.FullscreenPopover> </WindowDrawnDecorationsContent.FullscreenPopover>
@@ -156,51 +145,59 @@
</WindowDrawnDecorationsTemplate> </WindowDrawnDecorationsTemplate>
</Setter> </Setter>
<Style Selector="^ /template/ Button#PART_CloseButton:pointerover"> <Style Selector="^ /template/ Button#PART_CloseButton,^ /template/ Button#PART_PopoverCloseButton">
<Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" /> <Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" /> <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
</Style> <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
<Style Selector="^ /template/ Button#PART_CloseButton:pressed"> </Style>
<Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" /> <Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" /> <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
<Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
</Style>
</Style> </Style>
<!-- Shadow: inset border and add drop shadow --> <!-- Shadow: inset border and add drop shadow -->
<Style Selector="^:has-shadow /template/ Panel#PART_UnderlayWrapper"> <Style Selector="^:has-shadow">
<Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" /> <Style Selector="^ /template/ Panel#PART_UnderlayWrapper">
</Style> <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
<Style Selector="^:has-shadow /template/ Border#PART_WindowBorder"> </Style>
<Setter Property="BoxShadow" Value="0 2 10 2 #80000000" /> <Style Selector="^ /template/ Border#PART_WindowBorder">
</Style> <Setter Property="BoxShadow" Value="{DynamicResource WindowBorderShadow}" />
<Style Selector="^:has-shadow /template/ Panel#PART_OverlayWrapper"> </Style>
<Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" /> <Style Selector="^ /template/ Panel#PART_OverlayWrapper">
<Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
</Style>
</Style> </Style>
<!-- Maximized: restore button path changes --> <!-- Maximized: restore button path changes -->
<Style Selector="^:maximized /template/ Path#PART_MaximizeButtonIcon"> <Style Selector="^:maximized /template/ Button#PART_MaximizeButton">
<Setter Property="Data" Value="{StaticResource WindowRestoreGlyph}" /> <Setter Property="Content" Value="{StaticResource WindowRestoreGlyph}" />
</Style> </Style>
<!-- Border: inset titlebar and buttons inside frame --> <!-- Border: inset titlebar and buttons inside frame -->
<Style Selector="^:has-border /template/ Panel#PART_TitleTextPanel"> <Style Selector="^:has-border">
<Setter Property="Margin" Value="1,1,1,0" /> <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
</Style> <Setter Property="Margin" Value="1,1,1,0" />
<Style Selector="^:has-border /template/ Panel#PART_TitleBar"> </Style>
<Setter Property="Margin" Value="1,1,1,0" /> <Style Selector="^ /template/ Panel#PART_TitleBar">
</Style> <Setter Property="Margin" Value="1,1,1,0" />
<Style Selector="^:has-border /template/ StackPanel#PART_OverlayPanel"> </Style>
<Setter Property="Margin" Value="0,1,1,0" /> <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
<Setter Property="Margin" Value="0,1,1,0" />
</Style>
</Style> </Style>
<!-- Fullscreen: hide overlay and titlebar (popover takes over) --> <!-- Fullscreen: hide overlay and titlebar (popover takes over) -->
<Style Selector="^:fullscreen /template/ Panel#PART_TitleTextPanel"> <Style Selector="^:fullscreen">
<Setter Property="IsVisible" Value="False" /> <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
</Style> <Setter Property="IsVisible" Value="False" />
<Style Selector="^:fullscreen /template/ StackPanel#PART_OverlayPanel"> </Style>
<Setter Property="IsVisible" Value="False" /> <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
</Style> <Setter Property="IsVisible" Value="False" />
<Style Selector="^:fullscreen /template/ Panel#PART_TitleBar"> </Style>
<Setter Property="IsVisible" Value="False" /> <Style Selector="^ /template/ Panel#PART_TitleBar">
<Setter Property="IsVisible" Value="False" />
</Style>
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

View File

@@ -1,4 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="WindowBorderShadow" ResourceKey="SemiShadowElevated" />
<StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorBackground0" />
<StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" /> <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" /> <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" /> <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />

View File

@@ -8,7 +8,6 @@
<ResourceInclude Source="ButtonSpinner.axaml" /> <ResourceInclude Source="ButtonSpinner.axaml" />
<ResourceInclude Source="Calendar.axaml" /> <ResourceInclude Source="Calendar.axaml" />
<ResourceInclude Source="CalendarDatePicker.axaml" /> <ResourceInclude Source="CalendarDatePicker.axaml" />
<ResourceInclude Source="CaptionButtons.axaml" />
<ResourceInclude Source="Carousel.axaml" /> <ResourceInclude Source="Carousel.axaml" />
<ResourceInclude Source="CheckBox.axaml" /> <ResourceInclude Source="CheckBox.axaml" />
<ResourceInclude Source="ComboBox.axaml" /> <ResourceInclude Source="ComboBox.axaml" />
@@ -48,5 +47,6 @@
<ResourceInclude Source="Tooltip.axaml" /> <ResourceInclude Source="Tooltip.axaml" />
<ResourceInclude Source="TreeView.axaml" /> <ResourceInclude Source="TreeView.axaml" />
<ResourceInclude Source="Window.axaml" /> <ResourceInclude Source="Window.axaml" />
<ResourceInclude Source="WindowDrawnDecorations.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </ResourceDictionary>

View File

@@ -1,4 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorWindow" />
<StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorHotlight" /> <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorHotlight" /> <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" /> <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />

View File

@@ -7,7 +7,6 @@
<ResourceInclude Source="ButtonSpinner.axaml" /> <ResourceInclude Source="ButtonSpinner.axaml" />
<ResourceInclude Source="Calendar.axaml" /> <ResourceInclude Source="Calendar.axaml" />
<ResourceInclude Source="CalendarDatePicker.axaml" /> <ResourceInclude Source="CalendarDatePicker.axaml" />
<ResourceInclude Source="CaptionButtons.axaml" />
<ResourceInclude Source="Carousel.axaml" /> <ResourceInclude Source="Carousel.axaml" />
<ResourceInclude Source="CheckBox.axaml" /> <ResourceInclude Source="CheckBox.axaml" />
<ResourceInclude Source="ComboBox.axaml" /> <ResourceInclude Source="ComboBox.axaml" />
@@ -48,5 +47,6 @@
<ResourceInclude Source="Tooltip.axaml" /> <ResourceInclude Source="Tooltip.axaml" />
<ResourceInclude Source="TreeView.axaml" /> <ResourceInclude Source="TreeView.axaml" />
<ResourceInclude Source="Window.axaml" /> <ResourceInclude Source="Window.axaml" />
<ResourceInclude Source="WindowDrawnDecorations.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </ResourceDictionary>

View File

@@ -1,4 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="WindowBorderShadow" ResourceKey="SemiShadowElevated" />
<StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorBackground0" />
<StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" /> <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" /> <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" /> <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />

View File

@@ -8,7 +8,6 @@
<ResourceInclude Source="ButtonSpinner.axaml" /> <ResourceInclude Source="ButtonSpinner.axaml" />
<ResourceInclude Source="Calendar.axaml" /> <ResourceInclude Source="Calendar.axaml" />
<ResourceInclude Source="CalendarDatePicker.axaml" /> <ResourceInclude Source="CalendarDatePicker.axaml" />
<ResourceInclude Source="CaptionButtons.axaml" />
<ResourceInclude Source="Carousel.axaml" /> <ResourceInclude Source="Carousel.axaml" />
<ResourceInclude Source="CheckBox.axaml" /> <ResourceInclude Source="CheckBox.axaml" />
<ResourceInclude Source="ComboBox.axaml" /> <ResourceInclude Source="ComboBox.axaml" />
@@ -48,5 +47,6 @@
<ResourceInclude Source="Tooltip.axaml" /> <ResourceInclude Source="Tooltip.axaml" />
<ResourceInclude Source="TreeView.axaml" /> <ResourceInclude Source="TreeView.axaml" />
<ResourceInclude Source="Window.axaml" /> <ResourceInclude Source="Window.axaml" />
<ResourceInclude Source="WindowDrawnDecorations.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </ResourceDictionary>

View File

@@ -8,7 +8,6 @@
<ResourceInclude Source="ButtonSpinner.axaml" /> <ResourceInclude Source="ButtonSpinner.axaml" />
<ResourceInclude Source="Calendar.axaml" /> <ResourceInclude Source="Calendar.axaml" />
<ResourceInclude Source="CalendarDatePicker.axaml" /> <ResourceInclude Source="CalendarDatePicker.axaml" />
<ResourceInclude Source="CaptionButtons.axaml" />
<ResourceInclude Source="Carousel.axaml" /> <ResourceInclude Source="Carousel.axaml" />
<ResourceInclude Source="CheckBox.axaml" /> <ResourceInclude Source="CheckBox.axaml" />
<ResourceInclude Source="ComboBox.axaml" /> <ResourceInclude Source="ComboBox.axaml" />
@@ -48,5 +47,6 @@
<ResourceInclude Source="Tooltip.axaml" /> <ResourceInclude Source="Tooltip.axaml" />
<ResourceInclude Source="TreeView.axaml" /> <ResourceInclude Source="TreeView.axaml" />
<ResourceInclude Source="Window.axaml" /> <ResourceInclude Source="Window.axaml" />
<ResourceInclude Source="WindowDrawnDecorations.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </ResourceDictionary>