样式
Avalonia UI 的样式系统是一种可以在控件之间共享属性设置的机制。
提示
在 Avalonia 中,Style
更类似于 CSS 样式,而不是 WPF/UWP 样式。在 Avalonia 中,与 WPF/UWP 中的样式相当的是ControlTheme
。
工作原理
实质上,样式机制有两个步骤:选择和替换。样式的 XAML 可以定义如何进行这两个步骤,但通常你会在控件元素上定义 'class' 标签来帮助选择步骤。
信息
Avalonia UI 样式系统使用在控件元素上的 'class' 标签与 CSS(层叠样式表)在 HTML 元素上的工作方式类似。
在选择步骤中,样式系统从控件开始沿着逻辑树向上搜索。这意味着在应用程序的最高级别(例如 App.axaml
文件)定义的样式可以在应用程序的任何地方使用,但仍然可以在控件更近的地方(例如在窗口或用户控件中)进行覆盖。
当选择步骤找到匹配项时,匹配的控件的属性将根据样式中的设置器进行更改。
如何编写
样式的 XAML 有两个部分:选择器属性和一个或多个设置器元素。选择器的值包含使用 Avalonia UI 样式选择器语法 的字符串。每个设置器元素通过名称标识将被更改的属性和将被替换的新值。模式如下:
<Style Selector="selector syntax">
<Setter Property="property name" Value="new value"/>
...
</Style>
信息
Avalonia UI 样式选择器语法 类似于 CSS(层叠样式表)中使用的语法。有关详细的参考信息,请参阅 此处。
示例
以下是样式如何编写并应用于控件元素的示例,使用样式类来辅助选择:
<Window ... >
<Window.Styles>
<Style Selector="TextBlock.h1">
<Setter Property="FontSize" Value="24"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</Window.Styles>
<StackPanel Margin="20">
<TextBlock Classes="h1">Heading 1</TextBlock>
</StackPanel>
</Window>
在此示例中,所有带有 h1
样式类的 TextBlock
元素将显示为样式设置的字体大小和字重。这在预览面板中工作:
放置样式的位置
样式放置在 Control
或 Application
上的 Styles
集合元素中。例如,窗口的样式集合如下:
<Window.Styles>
<Style> ... </Style>
</Window.Styles>