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

View File

@@ -1,6 +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="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="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" /> <StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" />
<StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" /> <StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" />
<StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorText2" /> <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"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<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="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorHotlight" /> <StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorHotlight" /> <StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorHotlight" />
<StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorButtonText" /> <StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorWindowText" />
</ResourceDictionary> </ResourceDictionary>

View File

@@ -1,6 +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="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="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" /> <StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" />
<StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" /> <StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" />
<StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorText2" /> <StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorText2" />

View File

@@ -5,4 +5,9 @@
<StreamGeometry x:Key="WindowRestoreGlyph">M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z</StreamGeometry> <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="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> <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> </ResourceDictionary>