Merge pull request #533 from irihitech/caption

Redesign CaptionButtons
This commit is contained in:
Dong Bin
2025-01-20 15:59:17 +08:00
committed by GitHub
5 changed files with 49 additions and 43 deletions

View File

@@ -5,15 +5,14 @@
<Design.PreviewWith>
<CaptionButtons />
</Design.PreviewWith>
<ControlTheme x:Key="CaptionButton" TargetType="Button">
<Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Margin" Value="0, 4" />
<Setter Property="Padding" Value="4" />
<Setter Property="Height" Value="28" />
<Setter Property="Width" Value="28" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="CornerRadius" Value="{StaticResource CaptionButtonCornerRadius}" />
<Setter Property="Padding" Value="{StaticResource CaptionButtonPadding}" />
<Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
<Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
@@ -21,77 +20,76 @@
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
Background="Transparent"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}" />
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{TemplateBinding Background}" />
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter">
<Setter Property="Background" Value="{TemplateBinding BorderBrush}" />
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource CaptionButtonPressedBackground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
<Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
<Setter Property="Margin" Value="0 0 4 0" />
<Setter Property="Template">
<ControlTemplate TargetType="CaptionButtons">
<StackPanel
VerticalAlignment="Stretch"
Orientation="Horizontal"
Spacing="2"
TextElement.FontSize="10">
<StackPanel Orientation="Horizontal">
<Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
<PathIcon
Name="PART_FullScreenButtonIcon"
Theme="{DynamicResource InnerPathIcon}"
Data="{DynamicResource WindowExpandGlyph}"
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource WindowExpandGlyph}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<Button Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{DynamicResource WindowMinimizeGlyph}"
Name="PART_MinimizeButtonIcon"
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource WindowMinimizeGlyph}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<Button Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
<PathIcon
Name="PART_RestoreButtonIcon"
Theme="{DynamicResource InnerPathIcon}"
Data="{DynamicResource WindowMaximizeGlyph}"
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource WindowMaximizeGlyph}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<Button
Name="PART_CloseButton"
Background="{DynamicResource CaptionButtonClosePointeroverBackground}"
BorderBrush="{DynamicResource CaptionButtonClosePressedBackground}"
Theme="{StaticResource CaptionButton}">
<Button.Styles>
<Style Selector="Button:pointerover">
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button:pressed">
<Setter Property="Foreground" Value="White" />
</Style>
</Button.Styles>
<Button Name="PART_CloseButton" Theme="{StaticResource CaptionButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{DynamicResource WindowCloseIconGlyph}"
Name="PART_CloseButtonIcon"
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource WindowCloseIconGlyph}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
</StackPanel>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ Button#PART_CloseButton:pointerover">
<Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
<Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
</Style>
<Style Selector="^ /template/ Button#PART_CloseButton:pressed">
<Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
<Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
</Style>
<Style Selector="^:maximized /template/ PathIcon#PART_RestoreButtonIcon">
<Setter Property="Data" Value="{DynamicResource WindowRestoreGlyph}" />
<Setter Property="Data" Value="{StaticResource WindowRestoreGlyph}" />
</Style>
<Style Selector="^:fullscreen /template/ PathIcon#PART_FullScreenButtonIcon">
<Setter Property="Data" Value="{DynamicResource WindowCollapseGlyph}" />
<Setter Property="Data" Value="{StaticResource WindowCollapseGlyph}" />
</Style>
<Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
<Setter Property="IsVisible" Value="False" />
@@ -100,4 +98,4 @@
<Setter Property="IsVisible" Value="False" />
</Style>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
<StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" />
<StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" />
<StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorText2" />

View File

@@ -1,7 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
<StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorButtonText" />
<StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorWindowText" />
</ResourceDictionary>

View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
<StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" />
<StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" />
<StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorText2" />

View File

@@ -5,4 +5,9 @@
<StreamGeometry x:Key="WindowRestoreGlyph">M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z</StreamGeometry>
<StreamGeometry x:Key="WindowExpandGlyph">M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z</StreamGeometry>
<StreamGeometry x:Key="WindowCollapseGlyph">M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z</StreamGeometry>
<StaticResource x:Key="CaptionButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
<StaticResource x:Key="CaptionButtonWidth" ResourceKey="SemiSpacingExtraLoose" />
<StaticResource x:Key="CaptionButtonHeight" ResourceKey="SemiSpacingExtraLoose" />
<StaticResource x:Key="CaptionButtonPadding" ResourceKey="SemiThicknessTight" />
</ResourceDictionary>