WPF中的CSS

目录

介绍

先决条件

创建样式

通过使用变量

通过扩展/继承

在代码中使用CSS样式

• 下载源代码 - 5.2 MB

介绍

在HTML世界中，我们使用CSS（层叠样式表）来设置网页样式。

在WPF中，我们有资源字典来定义样式。在下表中，您可以比较两种样式： 

选择器

CSS

WPF

元素

是

是

ID

是

是

类

是

不

在本技巧中，我们将展示如何使用附加行为将类选择器添加到WPF样式。

先决条件

如果您不熟悉WPF中的附加行为，我的建议是先阅读以下文章：

•  Josh Smith介绍WPF中的附加行为

Visual Studio设计器行为如下：

• Visual Studio 2022 WPF设计器正确显示附加属性。
• Visual Studio 2019 WPF设计器无法正确显示附加属性。

创建样式 通过使用变量

在SASS/CSS中：

$FontStyle: 'Poppins', sans-serif;

.base-font {
    font-family: $FontStyle;
    font-size: 12em;
    font-weight: 400;
}

在WPF中：

    Resources/Poppins/#Poppins
    
        $FontStyle
        12
        Normal
    

通过扩展/继承

在SASS/CSS中：

%center {
    text-align: center;
}

%base-font {
    font-size: 12em;
    font-weight: 400;
}

.title-text {
    @extend %base-font;
    @extend %center;
    font-size: 28em;
}

在WPF中：

    
        Center
        Center
    

    
        12
        Normal
    

    
        
        28
    

在代码中使用CSS样式

重要的是要记住：

• 键名是您要在本地设置的属性名称。
• CSS继承先于本地属性应用。

https://www.codeproject.com/Tips/5316511/CSS-in-WPF