当前位置：网站首页>WPF 学习笔记《WPF样式基础》
WPF 学习笔记《WPF样式基础》
2022-08-03 07:59:00 【太阳风暴】
一、样式简介
参考资料：https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.style?view=windowsdesktop-6.0
为了方便的设计WPF界面的样式，可以直接在界面xaml中指定对应的样式代码，用作设计样式即可。当然xaml文件只是描述如何去生成c#后台代码而已，同样的，style本质上也是一个类，也不仅仅是为了生成后台代码。style的样式我们也可以在后台去设置。我学的基础只限于前端样式xaml文件的书写
1、样式位置
样式属于代码片段，可以放置于每一个窗口也是(window***.xaml)文件的 Resources 内部，当然也可把该样式代码放置于app.xaml内部的资源中，那么放置在app.xaml的样式文件会在全局生效，有点儿类似 CSS代码样式表的层叠效果。
<!--全局设置：作用于全局-->
<Application x:Class="EventLearn.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:EventLearn" StartupUri="UseStyle.xaml">
<Application.Resources>
<Style TargetType="{x:Type Button}"> <!--样式代码--> </Style>
</Application.Resources>
</Application>
<!--局部样式：只作用于当前窗口-->
<Window x:Class="EventLearn.UseStyle" 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" xmlns:local="clr-namespace:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
<Window.Resources>
<Style TargetType="Button"> <!--样式代码--> </Style>
</Window.Resources>
<Grid>
</Grid>
</Window>
2、样式写法
资源以 <style> 标签标注起来的样式，在 <style> 可以指定使用 TargetType 描述样式设置于 什么样的控件，还可以跟上 x:Key 来指定样式的标志，在控件指定使用哪一种样式即可
在内部可以使用<setter>标签包裹来表示如下，<setter>内部使用的是 Property - Value 来表示一种特性
设置一个按钮的样式，内部可以使用xaml的展开式来描述值
<Window x:Class="EventLearn.UseStyle" 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" xmlns:local="clr-namespace:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
<Window.Resources>
<Style TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> </Style>
<Style x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="按钮一" Margin="20" Grid.Column="0" Grid.Row="0"/>
<Button Content="按钮二" Margin="20" Grid.Column="0" Grid.Row="1"/>
<Button Content="按钮三" Margin="20" Grid.Column="0" Grid.Row="2"/>
<Button Content="按钮四" Margin="20" Grid.Column="0" Grid.Row="3"/>
<Button Content="按钮一" Style="{
StaticResource NewBtnStyle}" Margin="20" Grid.Column="1" Grid.Row="0" />
<Button Content="按钮二" Margin="20" Style="{
StaticResource NewBtnStyle}" Grid.Column="1" Grid.Row="1"/>
<Button Content="按钮三" Margin="20" Grid.Column="1" Grid.Row="2"/>
<Button Content="按钮四" Margin="20" Grid.Column="1" Grid.Row="3"/>
</Grid>
</Window>
- 效果图：
二、静态样式
静态样式，一般会设置在具有动态效果的控件(如Button)以便打基础，动态交互就需要使用到动态样式的设置、以及不具有动态交互的控件(如 Border、Label、TextBlock等)
如下代码
<Window x:Class="EventLearn.UseStyle" 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" xmlns:local="clr-namespace:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
<Window.Resources>
<Style TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> </Style>
<Style x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>
<Style TargetType="Border" x:Key="Logo"> <Setter Property="CornerRadius" Value="10 2 10 2"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush" Value="CadetBlue"/> <Setter Property="Margin" Value="20"/> <Setter Property="Background" Value="Chocolate"/> </Style>
<Style TargetType="TextBlock"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> </Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="按钮一" Margin="20" Grid.Column="0" Grid.Row="0"/>
<Button Content="按钮二" Margin="20" Grid.Column="1" Grid.Row="0"/>
<Border Style="{
StaticResource Logo}" Grid.Column="2" Grid.Row="0">
<TextBlock Text="WPF"/>
</Border>
</Grid>
</Window>
三、动态样式
大部分控件是具有交互功能的，如果需要创建动态效果，如鼠标移动到控件上、鼠标按下、释放等
<Window x:Class="EventLearn.UseStyle" 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" xmlns:local="clr-namespace:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
<Window.Resources>
<Style TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="BorderBrush" Value="Aquamarine"/> <Setter Property="BorderThickness" Value="4"/> </Trigger> </Style.Triggers> </Style>
<Style x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>
<Style TargetType="Border" x:Key="Logo"> <Setter Property="CornerRadius" Value="10 2 10 2"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush" Value="CadetBlue"/> <Setter Property="Margin" Value="20"/> <Setter Property="Background" Value="Chocolate"/> </Style>
<Style TargetType="TextBlock"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> </Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="按钮一" Margin="20" Grid.Column="0" Grid.Row="0"/>
<Button Content="按钮二" Margin="20" Grid.Column="1" Grid.Row="0"/>
<Border Style="{
StaticResource Logo}" Grid.Column="2" Grid.Row="0">
<TextBlock Text="WPF"/>
</Border>
</Grid>
</Window>
- 示例：
四、样式继承
可以使用 BaseOn 基础默认基础样式，当然已有的样式那个继承得样式是按照优先级，越具体的优先级越高。没设置的就默认继承之前最近一次父对象。没有BaseOn的话就按照的是控件的控件模板渲染
<Window x:Class="EventLearn.UseStyle" 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" xmlns:local="clr-namespace:EventLearn" mc:Ignorable="d" Title="UseStyle" Height="450" Width="800">
<Window.Resources>
<Style x:Key="Defate" TargetType="Button"> <Setter Property="Foreground" Value="AntiqueWhite"/> <Setter Property="Background" Value="Black"/> </Style>
<Style BasedOn="{StaticResource Defate}" x:Key="NewBtnStyle" TargetType="Button"> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="BlueViolet"/> </Setter.Value> </Setter> </Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="按钮一" Style="{
StaticResource Defate}" Margin="20" Grid.Column="0" Grid.Row="0"/>
<Button Content="按钮二" Style="{
StaticResource NewBtnStyle}" Margin="20" Grid.Column="1" Grid.Row="0"/>
</Grid>
</Window>
五、补充
待定
边栏推荐
猜你喜欢
Docker启动mysql
Postman will return to results generated CSV file to the local interface
day12---接口和协议
行业洞察 | 如何更好的实现与虚拟人的互动体验？
Transformer、BERT、GPT 论文精读笔记
IDEA的database使用教程（使用mysql数据库）
“碳中和”愿景下，什么样的数据中心才是我们需要的？
【Kaggle实战】泰坦尼克号生存人数预测（从零到提交到Kaggle再到模型的保存与恢复）
Windows安装MySQL（MIS）
Eject stubborn hard drives with diskpart's offline command
随机推荐
面渣逆袭：MySQL六十六问，两万字+五十图详解
Dapr 与 NestJs ，实战编写一个 Pub ＆ Sub 装饰器
力扣（LeetCode）214. 打家劫舍 II（2022.08.02）
Transformer、BERT、GPT 论文精读笔记
mysql存生僻字奇怪问题，mysql为什么不能辨别mb4字符？
2022下半年软考「高项＆集成」复习计划ta来喽~
tolower函数
使用pipreqs导出项目所需的requirements.txt（而非整个环境）
Karatsuba大数乘法的Verilog实现
前缀和（区间和，子矩阵的和）
加速FinOps实践，为企业降本增效
swiper分类菜单双层效果demo（整理）
DeFi明斯基时刻：压力测试与启示
day12---接口和协议
最佳高质量字体
AI mid-stage sequence labeling task: three data set construction process records
The Transformer, BERT, GPT paper intensive reading notes
行业洞察 | 如何更好的实现与虚拟人的互动体验？
Eject stubborn hard drives with diskpart's offline command
Arduino框架下对ESP32 NVS非易失性存储解读以及应用示例