目录
介绍
在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>
重要的是要记住:
- 键名是您要在本地设置的属性名称。
- CSS继承先于本地属性应用。