AvaloniaUI 样式-伪类

Question

我正在 avalonia 和大多数作品中尝试样式，伪类除外，它们只是被忽略了。

我创建了一个 window 并且所有样式都在其中，并且我创建了一个用户控件（带有一个按钮 - 伪类在按钮上），使用这些样式。我不使用代码，只xaml定义样式。

我已经在按钮的“样式选择器”中将其尝试为“Button:pseudoclassname”和“Button.le:pseudoclassname”。我还尝试了“Button:pointerover”和“Button:hover”，因为文档中提到可以对其进行修改。没有结果。伪类的样式都被忽略了，其他的都正确执行了。

我是不是做错了什么，或者这是 avalonia 中的错误？

xaml windows 文件：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="clr-namespace:Hub.Views"
        xmlns:vm="using:Hub.ViewModels"
        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"
        x:Class="Hub.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Width="200" Height="300"
        Title="Hub"
        Classes="le">

    <Window.Styles>
        <Style Selector="Window.le">
            <Setter Property="Background" Value="#191919"/>
        </Style>
        <Style Selector="Button.le">
            <Setter Property="Background" Value="green"/>
            <Setter Property="Foreground" Value="white"/>
        </Style>
        <Style Selector="Button.le:pointerover">
            <Setter Property="Background" Value="red"/>
            <Setter Property="Foreground" Value="white"/>
        </Style>
        <Style Selector="Button.le:pressed">
            <Setter Property="Background" Value="blue"/>
            <Setter Property="Foreground" Value="white"/>
        </Style>
        <Style Selector="TextBlock.le_update">
            <Setter Property="FontStyle" Value="Italic"/>
            <Setter Property="FontSize" Value="17"/>
            <Setter Property="FontFamily" Value="Arial, Verdana"/>
            <Setter Property="Foreground" Value="white"/>
            <Setter Property="Background" Value="transparent"/>
        </Style>
    </Window.Styles>
    
    <views:UpdateView/>

</Window>

xaml用户控制文件：

<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"
             x:Class="Hub.Views.UpdateView">
    <DockPanel>
        <StackPanel DockPanel.Dock="Bottom">
            <Button Classes="le" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Width="300">
                Check for updates
            </Button>
        </StackPanel>
        <StackPanel Spacing="5" Margin="5">
            <TextBlock Classes="le_update" HorizontalAlignment="Center" Margin="4">
                No updates for Hub.
            </TextBlock>
            <TextBlock Classes="le_update" HorizontalAlignment="Center" Margin="4">
                No updates for Engine.
            </TextBlock>
        </StackPanel>
    </DockPanel>
</UserControl>

Answer 1

Button的Background属性确实受到你的风格影响，但在那个时候它有对实际 Button 的背景 没有影响，因为 Background 属性仅控制按钮的正常状态。

如果您查看默认的 Button 样式 here，您会发现它通过 TemplateBinding:

将其背景传递给 ContentPresenter

    <Setter Property="Template">
      <ControlTemplate>
        <ContentPresenter x:Name="PART_ContentPresenter"
                          Background="{TemplateBinding Background}"

但会以如下样式覆盖 ContentPresenter 的背景：

  <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />

因为实际绘制背景的是 ContentPresenter（Button 是无外观控件），您会看到按钮具有 ButtonBackgroundPointerOver 而不是 Button的 Background 属性值。

因此，您需要编写一个样式来更改内部 ContentPresenter，如下所示：

<Style Selector="Button.le:pointerover /template/ ContentPresenter#PART_ContentPresenter">
  <Setter Property="Background" Value="green" />
</Style>

不幸的是，这会使您的样式依赖于主题，因为控件模板在默认主题和流畅主题之间是不同的。

Answer 2

Kekekeks 给出的答案是我提出的问题的正确答案。

但是，我使用这个 space 希望 能像我一样帮助没有 xaml 背景的 avalonia 新手用户 。我们大多数人都在关注 avalonia 为我们的应用程序提供一个可在 Windows/Mac/Linux 上运行的 界面。老实说，在撰写本文时，c# 中不存在真正的替代方案。

此时 Avalonia 确实有示例和一些很好的文档，但对于没有 xaml 背景的人来说并非如此。

因此，去 Udemy 或 LikedIn.Learning 或 Youtube 或任何你能找到关于 WPF 的好课程的地方，然后去 Avalonia 的文档并开始玩.

两者（Avalonia 和 WPF）的相似之处是巨大的！！！ 是的，在文档中提到了几次，但是 直言不讳“如果您是 xaml 新手，请先去学习 WPF！”在文档的首页上 会节省我相当多的时间来尝试通过网站找到所有内容。

公平是公平的，该项目仍处于测试阶段，该网站已针对该阶段进行了详细记录，所以不要责怪团队！

AvaloniaUI 样式-伪类

AvaloniaUI Styles-pseudoclasses

xaml

avaloniaui

avalonia