Refactor Button background

This commit is contained in:
chinboy
2025-03-05 16:14:07 +08:00
parent 1d67e8c4e1
commit dfd5f4cc6a
9 changed files with 124 additions and 31 deletions
+19 -3
View File
@@ -1,8 +1,11 @@
using AtomUI.IconPkg;
using AtomUI.Controls.Utils;
using AtomUI.IconPkg;
using AtomUI.IconPkg.AntDesign;
using AtomUI.Media;
using AtomUI.Theme;
using AtomUI.Theme.Styling;
using Avalonia;
using Avalonia.Animation;
using Avalonia.Controls;
using Avalonia.Controls.Presenters;
using Avalonia.Controls.Primitives;
@@ -17,6 +20,7 @@ namespace AtomUI.Controls;
internal abstract class BaseButtonTheme : BaseControlTheme
{
public const string FramePart = "PART_Frame";
public const string LabelPart = "PART_Label";
public const string MainInfoLayoutPart = "PART_MainInfoLayout";
public const string RootLayoutPart = "PART_RootLayout";
@@ -93,14 +97,16 @@ internal abstract class BaseButtonTheme : BaseControlTheme
rootLayout.Children.Add(extraContentLayout);
rootLayout.Children.Add(mainInfoLayout);
var frame = new Border();
var frame = new Border()
{
Name = FramePart
};
CreateTemplateParentBinding(frame, Decorator.PaddingProperty, TemplatedControl.PaddingProperty);
CreateTemplateParentBinding(frame, Border.BorderThicknessProperty,
Button.EffectiveBorderThicknessProperty);
CreateTemplateParentBinding(frame, Border.BorderBrushProperty,
TemplatedControl.BorderBrushProperty);
CreateTemplateParentBinding(frame, Border.BackgroundProperty, TemplatedControl.BackgroundProperty);
CreateTemplateParentBinding(frame, Border.BackgroundSizingProperty,
TemplatedControl.BackgroundSizingProperty);
CreateTemplateParentBinding(frame, Border.CornerRadiusProperty,
@@ -149,6 +155,16 @@ internal abstract class BaseButtonTheme : BaseControlTheme
BuildSizeStyle();
BuildIconStyle();
BuildLoadingStyle();
// 动画设置
var isMotionEnabledStyle = new Style(selector => selector.Nesting().PropertyEquals(Button.IsMotionEnabledProperty, true));
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(IconButton.TransitionsProperty, new SetterValueFactory<Transitions>(() => new Transitions()
{
AnimationUtils.CreateTransition<SolidColorBrushTransition>(TemplatedControl.BackgroundProperty)
}));
isMotionEnabledStyle.Add(frameStyle);
Add(isMotionEnabledStyle);
}
private void BuildSizeStyle()
-5
View File
@@ -570,7 +570,6 @@ public class Button : AvaloniaButton,
var transitions = new Transitions();
if (ButtonType == ButtonType.Primary)
{
transitions.Add(AnimationUtils.CreateTransition<SolidColorBrushTransition>(BackgroundProperty));
if (IsGhost)
{
transitions.Add(
@@ -583,10 +582,6 @@ public class Button : AvaloniaButton,
transitions.Add(AnimationUtils.CreateTransition<SolidColorBrushTransition>(BorderBrushProperty));
transitions.Add(AnimationUtils.CreateTransition<SolidColorBrushTransition>(ForegroundProperty));
}
else if (ButtonType == ButtonType.Text)
{
transitions.Add(AnimationUtils.CreateTransition<SolidColorBrushTransition>(BackgroundProperty));
}
else if (ButtonType == ButtonType.Link)
{
transitions.Add(AnimationUtils.CreateTransition<SolidColorBrushTransition>(ForegroundProperty));
@@ -1,4 +1,5 @@
using AtomUI.Theme.Styling;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Styling;
@@ -21,10 +22,15 @@ internal abstract class BaseDefaultButtonTheme : BaseButtonTheme
{
var enabledStyle = new Style(selector => selector.Nesting());
// 正常状态
enabledStyle.Add(TemplatedControl.BackgroundProperty, ButtonTokenKey.DefaultBg);
enabledStyle.Add(TemplatedControl.BorderBrushProperty, ButtonTokenKey.DefaultBorderColor);
enabledStyle.Add(TemplatedControl.ForegroundProperty, ButtonTokenKey.DefaultColor);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, ButtonTokenKey.DefaultBg);
enabledStyle.Add(frameStyle);
}
// 正常 hover
{
var hoverStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.PointerOver));
@@ -74,7 +80,11 @@ internal abstract class BaseDefaultButtonTheme : BaseButtonTheme
// 正常状态
ghostStyle.Add(TemplatedControl.ForegroundProperty, SharedTokenKey.ColorTextLightSolid);
ghostStyle.Add(TemplatedControl.BorderBrushProperty, SharedTokenKey.ColorTextLightSolid);
ghostStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorTransparent);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorTransparent);
ghostStyle.Add(frameStyle);
}
// 正常 hover
{
@@ -95,9 +105,14 @@ internal abstract class BaseDefaultButtonTheme : BaseButtonTheme
// 危险按钮状态
var dangerStyle = new Style(selector => selector.Nesting().PropertyEquals(Button.IsDangerProperty, true));
dangerStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorTransparent);
dangerStyle.Add(TemplatedControl.BorderBrushProperty, SharedTokenKey.ColorError);
dangerStyle.Add(TemplatedControl.ForegroundProperty, SharedTokenKey.ColorError);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorTransparent);
dangerStyle.Add(frameStyle);
}
// 危险状态 hover
{
@@ -124,7 +139,11 @@ internal abstract class BaseDefaultButtonTheme : BaseButtonTheme
var disabledStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.Disabled));
disabledStyle.Add(TemplatedControl.ForegroundProperty, SharedTokenKey.ColorTextDisabled);
disabledStyle.Add(TemplatedControl.BorderBrushProperty, ButtonTokenKey.BorderColorDisabled);
disabledStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorBgContainerDisabled);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorBgContainerDisabled);
disabledStyle.Add(frameStyle);
}
Add(disabledStyle);
}
}
+13 -3
View File
@@ -1,6 +1,8 @@
using AtomUI.Theme.Styling;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Markup.Xaml.MarkupExtensions;
using Avalonia.Media;
using Avalonia.Styling;
namespace AtomUI.Controls;
@@ -22,8 +24,13 @@ internal abstract class BaseLinkButtonTheme : BaseButtonTheme
{
var enabledStyle = new Style(selector => selector.Nesting());
// 正常状态
enabledStyle.Add(TemplatedControl.BackgroundProperty, ButtonTokenKey.DefaultBg);
enabledStyle.Add(TemplatedControl.ForegroundProperty, SharedTokenKey.ColorLink);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, ButtonTokenKey.DefaultBg);
enabledStyle.Add(frameStyle);
}
// 正常 hover
{
@@ -68,8 +75,11 @@ internal abstract class BaseLinkButtonTheme : BaseButtonTheme
{
var ghostStyle = new Style(selector => selector.Nesting().PropertyEquals(Button.IsGhostProperty, true));
// 正常状态
ghostStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorTransparent);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, Brushes.Transparent);
ghostStyle.Add(frameStyle);
}
Add(ghostStyle);
}
@@ -1,4 +1,5 @@
using AtomUI.Theme.Styling;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Media;
using Avalonia.Styling;
@@ -24,12 +25,21 @@ internal abstract class BasePrimaryButtonTheme : BaseButtonTheme
// 正常状态
enabledStyle.Add(TemplatedControl.ForegroundProperty, ButtonTokenKey.PrimaryColor);
enabledStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorPrimary);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorPrimary);
enabledStyle.Add(frameStyle);
}
// 正常 hover
{
var hoverStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.PointerOver));
hoverStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorPrimaryHover);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorPrimaryHover);
hoverStyle.Add(frameStyle);
}
enabledStyle.Add(hoverStyle);
}
@@ -37,18 +47,30 @@ internal abstract class BasePrimaryButtonTheme : BaseButtonTheme
{
var pressedStyle = new Style(selector =>
selector.Nesting().Class(StdPseudoClass.PointerOver).Class(StdPseudoClass.Pressed));
pressedStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorPrimaryActive);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorPrimaryActive);
pressedStyle.Add(frameStyle);
}
enabledStyle.Add(pressedStyle);
}
// 危险按钮状态
var dangerStyle = new Style(selector => selector.Nesting().PropertyEquals(Button.IsDangerProperty, true));
dangerStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorError);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorError);
dangerStyle.Add(frameStyle);
}
// 危险状态 hover
{
var hoverStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.PointerOver));
hoverStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorErrorHover);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorErrorHover);
hoverStyle.Add(frameStyle);
}
dangerStyle.Add(hoverStyle);
}
@@ -56,7 +78,11 @@ internal abstract class BasePrimaryButtonTheme : BaseButtonTheme
{
var pressedStyle = new Style(selector =>
selector.Nesting().Class(StdPseudoClass.PointerOver).Class(StdPseudoClass.Pressed));
pressedStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorErrorActive);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorErrorActive);
pressedStyle.Add(frameStyle);
}
dangerStyle.Add(pressedStyle);
}
enabledStyle.Add(dangerStyle);
@@ -68,7 +94,11 @@ internal abstract class BasePrimaryButtonTheme : BaseButtonTheme
private void BuildEnabledGhostStyle()
{
var ghostStyle = new Style(selector => selector.Nesting().PropertyEquals(Button.IsGhostProperty, true));
ghostStyle.Add(TemplatedControl.BackgroundProperty, Brushes.Transparent);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, Brushes.Transparent);
ghostStyle.Add(frameStyle);
}
// 正常状态
ghostStyle.Add(TemplatedControl.ForegroundProperty, SharedTokenKey.ColorPrimary);
ghostStyle.Add(TemplatedControl.BorderBrushProperty, SharedTokenKey.ColorPrimary);
@@ -121,7 +151,11 @@ internal abstract class BasePrimaryButtonTheme : BaseButtonTheme
var disabledStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.Disabled));
disabledStyle.Add(TemplatedControl.ForegroundProperty, SharedTokenKey.ColorTextDisabled);
disabledStyle.Add(TemplatedControl.BorderBrushProperty, ButtonTokenKey.BorderColorDisabled);
disabledStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorBgContainerDisabled);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorBgContainerDisabled);
disabledStyle.Add(frameStyle);
}
Add(disabledStyle);
}
}
+27 -5
View File
@@ -1,5 +1,7 @@
using AtomUI.Theme.Styling;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Media;
using Avalonia.Styling;
namespace AtomUI.Controls;
@@ -96,20 +98,32 @@ internal class TextButtonTheme : BaseTextButtonTheme
{
var enabledStyle = new Style(selector => selector.Nesting());
// 正常状态
enabledStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorTransparent);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, Brushes.Transparent);
enabledStyle.Add(frameStyle);
}
enabledStyle.Add(TemplatedControl.ForegroundProperty, ButtonTokenKey.DefaultColor);
// 正常 hover
{
var hoverStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.PointerOver));
hoverStyle.Add(TemplatedControl.BackgroundProperty, ButtonTokenKey.TextHoverBg);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, ButtonTokenKey.TextHoverBg);
hoverStyle.Add(frameStyle);
}
enabledStyle.Add(hoverStyle);
}
// 正常按下
{
var pressedStyle = new Style(selector =>
selector.Nesting().Class(StdPseudoClass.PointerOver).Class(StdPseudoClass.Pressed));
pressedStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorBgTextActive);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorBgTextActive);
pressedStyle.Add(frameStyle);
}
enabledStyle.Add(pressedStyle);
}
@@ -120,7 +134,11 @@ internal class TextButtonTheme : BaseTextButtonTheme
// 危险状态 hover
{
var hoverStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.PointerOver));
hoverStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorErrorBgHover);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorErrorBgHover);
hoverStyle.Add(frameStyle);
}
dangerStyle.Add(hoverStyle);
}
@@ -128,7 +146,11 @@ internal class TextButtonTheme : BaseTextButtonTheme
{
var pressedStyle = new Style(selector =>
selector.Nesting().Class(StdPseudoClass.PointerOver).Class(StdPseudoClass.Pressed));
pressedStyle.Add(TemplatedControl.BackgroundProperty, SharedTokenKey.ColorErrorBgActive);
{
var frameStyle = new Style(selector => selector.Nesting().Template().Name(FramePart));
frameStyle.Add(Border.BackgroundProperty, SharedTokenKey.ColorErrorBgActive);
pressedStyle.Add(frameStyle);
}
dangerStyle.Add(pressedStyle);
}
enabledStyle.Add(dangerStyle);
-1
View File
@@ -62,7 +62,6 @@ public class LineEdit : TextBox,
protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
{
base.OnPropertyChanged(change);
// TODO 到底是否需要这样,这些控件的管辖区理论上不应该我们控制
if (change.Property == LeftAddOnProperty ||
change.Property == RightAddOnProperty)
{
@@ -1,5 +1,4 @@
using Avalonia;
using Avalonia.Controls.Primitives;
namespace AtomUI.Controls;
@@ -1,5 +1,4 @@
using AtomUI.Controls.Utils;
using AtomUI.Data;
using AtomUI.Theme;
using AtomUI.Theme.Styling;
using Avalonia;