总结几种 Avalonia 项目里常见的 Style 设置不生效故障

在 Avalonia UI 中，样式（Styles）类似于 CSS 样式，通常用于根据控件的内容或在应用程序中的用途对控件进行样式化；例如，创建用于标题文本块的样式。新手在开发过程中，经常会遇到编写好了样式代码，但界面上却没有生效的情况。这里列举了几种常见的情形，帮大家避坑。

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

<TextBlock Text="https://www.coderbusy.com" Background="Green">
   <TextBlock.Styles>
       <Style Selector="TextBlock">
           <Setter Property="Background" Value="Red"></Setter>
</Style>
   </TextBlock.Styles>
</TextBlock>

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

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

<TextBlock Text="https://www.coderbusy.com" 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 对调，则背景将会呈现为绿色。

<TextBlock Text="https://www.coderbusy.com" 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 的背景改为绿色，可以使用下面的代码：

<UserControl xmlns="https://github.com/avaloniaui"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            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 。否则样式不会生效。