Refactor EmptyIndicator themes

This commit is contained in:
CHINBOY
2025-06-15 16:03:07 +08:00
parent e95a6e7448
commit b7d3e2d81f
6 changed files with 71 additions and 120 deletions
@@ -16,6 +16,7 @@
<ResourceInclude Source="Collapse/Themes/CollapseItemThemes.axaml" />
<ResourceInclude Source="DatePicker/Themes/DatePickerThemes.axaml" />
<ResourceInclude Source="Drawer/Themes/DrawerThemes.axaml" />
<ResourceInclude Source="EmptyIndicator/Themes/EmptyIndicatorTheme.axaml" />
<ResourceInclude Source="RadioButton/Themes/RadioButtonTheme.axaml" />
<ResourceInclude Source="Pagination/Themes/PaginationThemes.axaml" />
<ResourceInclude Source="ScrollBar/Themes/ScrollBarThemes.axaml" />
@@ -1,4 +1,5 @@
using AtomUI.Media;
using AtomUI.Controls.Themes;
using AtomUI.Media;
using AtomUI.Theme;
using AtomUI.Theme.Utils;
using Avalonia;
@@ -239,7 +240,7 @@ public class EmptyIndicator : TemplatedControl,
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
_svg = e.NameScope.Find<Avalonia.Svg.Svg>(EmptyIndicatorTheme.SvgImagePart);
_svg = e.NameScope.Find<Avalonia.Svg.Svg>(EmptyIndicatorThemeConstants.SvgImagePart);
HorizontalAlignment = HorizontalAlignment.Center;
VerticalAlignment = VerticalAlignment.Center;
CheckImageSource();
@@ -1,117 +0,0 @@
using AtomUI.Theme;
using AtomUI.Theme.Styling;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using Avalonia.Layout;
using Avalonia.Media;
using Avalonia.Styling;
namespace AtomUI.Controls;
[ControlThemeProvider]
internal class EmptyIndicatorTheme : BaseControlTheme
{
public const string SvgImagePart = "PART_SvgImage";
public const string DescriptionPart = "PART_Description";
public EmptyIndicatorTheme()
: base(typeof(EmptyIndicator))
{
}
protected override IControlTemplate BuildControlTemplate()
{
return new FuncControlTemplate<EmptyIndicator>((indicator, scope) =>
{
var layout = new StackPanel
{
Orientation = Orientation.Vertical
};
var svg = new Avalonia.Svg.Svg(new Uri("https://github.com/avaloniaui"))
{
Name = SvgImagePart
};
layout.Children.Add(svg);
svg.RegisterInNameScope(scope);
var description = new TextBlock
{
Name = DescriptionPart,
HorizontalAlignment = HorizontalAlignment.Center,
TextWrapping = TextWrapping.Wrap,
};
CreateTemplateParentBinding(description, TextBlock.TextProperty, EmptyIndicator.DescriptionProperty);
layout.Children.Add(description);
return layout;
});
}
protected override void BuildStyles()
{
// 设置本身样式
BuildSvgStyle();
this.Add(EmptyIndicator.ColorFillProperty, SharedTokenKey.ColorFill);
this.Add(EmptyIndicator.ColorFillTertiaryProperty, SharedTokenKey.ColorFillTertiary);
this.Add(EmptyIndicator.ColorFillQuaternaryProperty, SharedTokenKey.ColorFillQuaternary);
this.Add(EmptyIndicator.ColorBgContainerProperty, SharedTokenKey.ColorBgContainer);
var sizeSmallAndMiddleStyle = new Style(selector => Selectors.Or(
selector.Nesting().PropertyEquals(EmptyIndicator.SizeTypeProperty, SizeType.Middle),
selector.Nesting().PropertyEquals(EmptyIndicator.SizeTypeProperty, SizeType.Small)));
{
var descriptionStyle = new Style(selector => selector.Nesting().Template().Name(DescriptionPart));
descriptionStyle.Add(TextBlock.MarginProperty, EmptyIndicatorTokenKey.DescriptionMarginSM);
Add(descriptionStyle);
}
Add(sizeSmallAndMiddleStyle);
var sizeLargeStyle = new Style(selector =>
selector.Nesting().PropertyEquals(EmptyIndicator.SizeTypeProperty, SizeType.Large));
{
var descriptionStyle = new Style(selector => selector.Nesting().Template().Name(DescriptionPart));
descriptionStyle.Add(TextBlock.MarginProperty, EmptyIndicatorTokenKey.DescriptionMargin);
Add(descriptionStyle);
}
Add(sizeLargeStyle);
{
var descriptionStyle = new Style(selector => selector.Nesting().Template().Name(DescriptionPart));
descriptionStyle.Add(TextBlock.ForegroundProperty, SharedTokenKey.ColorTextDescription);
Add(descriptionStyle);
}
}
private void BuildSvgStyle()
{
var svgSelector = default(Selector).Nesting().Template().OfType<Avalonia.Svg.Svg>();
{
var largeSizeStyle = new Style(selector =>
selector.Nesting().PropertyEquals(EmptyIndicator.SizeTypeProperty, SizeType.Large));
var svgStyle = new Style(selector => svgSelector);
svgStyle.Add(Layoutable.HeightProperty, EmptyIndicatorTokenKey.EmptyImgHeight);
largeSizeStyle.Add(svgStyle);
Add(largeSizeStyle);
}
{
var middleSizeStyle = new Style(selector =>
selector.Nesting().PropertyEquals(EmptyIndicator.SizeTypeProperty, SizeType.Middle));
var svgStyle = new Style(selector => svgSelector);
svgStyle.Add(Layoutable.HeightProperty, EmptyIndicatorTokenKey.EmptyImgHeightMD);
middleSizeStyle.Add(svgStyle);
Add(middleSizeStyle);
}
{
var smallSizeStyle = new Style(selector =>
selector.Nesting().PropertyEquals(EmptyIndicator.SizeTypeProperty, SizeType.Small));
var svgStyle = new Style(selector => svgSelector);
svgStyle.Add(Layoutable.HeightProperty, EmptyIndicatorTokenKey.EmptyImgHeightSM);
smallSizeStyle.Add(svgStyle);
Add(smallSizeStyle);
}
}
}
@@ -0,0 +1,60 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:atom="https://atomui.net">
<ControlTheme x:Key="{x:Type atom:EmptyIndicator}" TargetType="atom:EmptyIndicator">
<Setter Property="Template">
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Svg Name="{x:Static atom:EmptyIndicatorThemeConstants.SvgImagePart}"/>
<atom:TextBlock Name="{x:Static atom:EmptyIndicatorThemeConstants.DescriptionPart}"
HorizontalAlignment="Center"
TextWrapping="Wrap"
Text="{TemplateBinding Description}"/>
</StackPanel>
</ControlTemplate>
</Setter>
<Style Selector="^[SizeType=Large]">
<Style Selector="^ /template/ Svg#PART_SvgImage">
<Setter Property="Height" Value="{DynamicResource {x:Static atom:EmptyIndicatorTokenKey.EmptyImgHeight}}"/>
</Style>
</Style>
<Style Selector="^[SizeType=Middle]">
<Style Selector="^ /template/ Svg#PART_SvgImage">
<Setter Property="Height" Value="{DynamicResource {x:Static atom:EmptyIndicatorTokenKey.EmptyImgHeightMD}}"/>
</Style>
</Style>
<Style Selector="^[SizeType=Small]">
<Style Selector="^ /template/ Svg#PART_SvgImage">
<Setter Property="Height" Value="{DynamicResource {x:Static atom:EmptyIndicatorTokenKey.EmptyImgHeightSM}}"/>
</Style>
</Style>
<Setter Property="ColorFill" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorFill}}"/>
<Setter Property="ColorFillTertiary" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorFillTertiary}}"/>
<Setter Property="ColorFillQuaternary" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorFillQuaternary}}"/>
<Setter Property="ColorBgContainer" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorBgContainer}}"/>
<Style Selector="^[SizeType=Large]">
<Style Selector="^ /template/ atom|TextBlock#PART_Description">
<Setter Property="Margin" Value="{DynamicResource {x:Static atom:EmptyIndicatorTokenKey.DescriptionMargin}}"/>
</Style>
</Style>
<Style Selector="^[SizeType=Middle]">
<Style Selector="^ /template/ atom|TextBlock#PART_Description">
<Setter Property="Margin" Value="{DynamicResource {x:Static atom:EmptyIndicatorTokenKey.DescriptionMarginSM}}"/>
</Style>
</Style>
<Style Selector="^[SizeType=Small]">
<Style Selector="^ /template/ atom|TextBlock#PART_Description">
<Setter Property="Margin" Value="{DynamicResource {x:Static atom:EmptyIndicatorTokenKey.DescriptionMarginSM}}"/>
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>
@@ -0,0 +1,7 @@
namespace AtomUI.Controls.Themes;
internal static class EmptyIndicatorThemeConstants
{
public const string SvgImagePart = "PART_SvgImage";
public const string DescriptionPart = "PART_Description";
}
@@ -17,7 +17,6 @@ namespace AtomUI.Theme
themes.Add(new AtomUI.Controls.CircleProgressTheme());
themes.Add(new AtomUI.Controls.ContextMenuTheme());
themes.Add(new AtomUI.Controls.DashboardProgressTheme());
themes.Add(new AtomUI.Controls.EmptyIndicatorTheme());
themes.Add(new AtomUI.Controls.ExpanderTheme());
themes.Add(new AtomUI.Controls.GroupBoxTheme());
themes.Add(new AtomUI.Controls.HorizontalNavMenuTheme());