Avalonia UI 样式 Style 设置不生效的三种常见原因

在 Avalonia UI 中，样式（Styles）类似于 CSS 样式，通常用于根据控件的内容或在应用程序中的用途对控件进行样式化；例如，创建用于标题文本块的样式。

新手在开发过程中，经常会遇到编写好了样式代码，但界面上却没有生效的情况。这里列举了三种常见的情形，帮大家避坑。

1、通过属性设置的值会覆盖样式中的设置。

代码语言：javascript代码运行次数：0运行复制
<TextBlock Text="; Background="Green">
    <TextBlock.Styles>
        <Style Selector="TextBlock">
            <Setter Property="Background" Value="Red"></Setter>
        </Style>
    </TextBlock.Styles>
</TextBlock>

上述代码在 Style 中将背景色设置为了红色，但因为外侧的 TextBlock 被单独设置了 Background 为绿色，因此 Style 中的设置被覆盖并显示为绿色。

2、定义靠后的样式，会覆盖之前的设置。

代码语言：javascript代码运行次数：0运行复制
<TextBlock Text="; Classes="t1 t2">
    <TextBlock.Styles>
        <Style Selector="TextBlock">
            <Setter Property="Background" Value="Red"></Setter>
        </Style>
        <Style Selector="TextBlock.t1">
            <Setter Property="Background" Value="Green"></Setter>
        </Style>
        <Style Selector="TextBlock.t2">
            <Setter Property="Background" Value="Blue"></Setter>
        </Style>
    </TextBlock.Styles>
</TextBlock>

因为 TextBlock.t2 的定义最靠后，所以背景呈现为蓝色。如果将 TextBlock.t2 的定义与 TextBlock.t1 对调，则背景将会呈现为绿色。

代码语言：javascript代码运行次数：0运行复制
<TextBlock Text="; Classes="t1 t2">
    <TextBlock.Styles>
        <Style Selector="TextBlock">
            <Setter Property="Background" Value="Red"></Setter>
        </Style>
        <Style Selector="TextBlock.t2">
            <Setter Property="Background" Value="Blue"></Setter>
        </Style>
        <Style Selector="TextBlock.t1">
            <Setter Property="Background" Value="Green"></Setter>
        </Style>
    </TextBlock.Styles>
</TextBlock>

需要注意的是，本节所说的是“定义”的顺序，也就是 Style 块在代码中的顺序，而不是 Classes 属性中类名的顺序。笔者实测：改变 Classes 中类名的顺序并不影响最终的呈现结果。是“定义”的顺序，而不是“引用”的顺序。

3、在 UserControl 中为自身设置样式时，选择器应该使用实际类型，而不是 UserControl 。

如果想要在鼠标滑过时，将 UserControl 的背景改为绿色，可以使用下面的代码：

代码语言：javascript代码运行次数：0运行复制
<UserControl xmlns=";
             xmlns:x=";
             xmlns:d=";
             xmlns:mc=";
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             xmlns:local="clr-namespace:CoderBusy"
             x:Class="CoderBusy.MyControl">
    <UserControl.Styles>
        <Style Selector="local|MyControl">
            <Setter Property="Background" Value="Transparent"></Setter>
        </Style>
        <Style Selector="local|MyControl:pointerover">
            <Setter Property="Background" Value="Green"></Setter>
        </Style>
    </UserControl.Styles>
</UserControl>

需要注意的是，这里的选择器中目标对象必须是实际类型：local|MyControl ，而不能是 UserControl 。否则样式不会生效。