WPF中的CSS

最新推荐文章于 2024-06-12 08:23:51 发布

寒冰屋

最新推荐文章于 2024-06-12 08:23:51 发布

阅读量1.3k

点赞数

分类专栏： CSharp.NET 文章标签： wpf css

原文链接：https://www.codeproject.com/Tips/5316511/CSS-in-WPF

版权

CSharp.NET 专栏收录该内容

1172 篇文章 54 订阅

订阅专栏

下载源代码 - 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中：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:System;assembly=mscorlib">
    <FontFamily x:Key="$FontStyle">Resources/Poppins/#Poppins</FontFamily>
    <ResourceDictionary x:Key="BaseFont">
        <FontFamily x:Key="FontFamily">$FontStyle</FontFamily>
        <s:Double x:Key="FontSize">12</s:Double>
        <FontWeight x:Key="FontWeight">Normal</FontWeight>
    </ResourceDictionary>
</ResourceDictionary>

通过扩展/继承

在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中：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:System;assembly=mscorlib"
                    xmlns:ui="clr-namespace:CSS.UI">
    <ResourceDictionary x:Key="Center">
        <HorizontalAlignment x:Key="HorizontalAlignment">Center</HorizontalAlignment>
        <VerticalAlignment x:Key="VerticalAlignment">Center</VerticalAlignment>
    </ResourceDictionary>

    <ResourceDictionary x:Key="BaseFont">
        <s:Double x:Key="FontSize">12</s:Double>
        <FontWeight x:Key="FontWeight">Normal</FontWeight>
    </ResourceDictionary>

    <ResourceDictionary x:Key="TitleText">
        <ui:CSS x:Key="BaseFont Center"/>
        <s:Double x:Key="FontSize">28</s:Double>
    </ResourceDictionary>
</ResourceDictionary>

在代码中使用CSS样式

<Window x:Class="CSS.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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"
        xmlns:ui="clr-namespace:CSS.UI"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical">
        <TextBlock Text="Title" ui:X.CSS="TitleText"/>
        <TextBlock Text="Title Centered" ui:X.CSS="TitleText Center"/>
        <TextBlock Text="Body text" ui:X.CSS="BaseFont"/>
    </StackPanel>
</Window>

重要的是要记住：