WPF入门--多种方式设置样式（Style）

已于 2024-05-31 17:22:53 修改
阅读量2.2k 收藏 28
点赞数 14
分类专栏： WPF 文章标签： wpf
于 2024-05-31 11:36:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40950398/article/details/139348357
版权

前言

在上篇文章中，介绍了WPF九种布局方式。本篇文章通过多种方式设置样式（Style）以控制UI元素的外观和行为。下面来具体介绍一下。

传送门

WPF入门--常用布局方式

目录

前言

一、直接在XAML中设置属性（内联样式）

二、基于特定控件类型设置属性（隐式样式）

三、基于x:Key设置属性（显式样式）

四、继承样式设置属性

五、使用应用级别的资源

六、使用资源字典（Resource Dictionary）

七、使用触发器（Triggers）

总结

一、直接在XAML中设置属性（内联样式）

这是最简单的方式，直接在XAML文件中为每个控件单独设置属性。有点类似我们在HTML标签上加style属性。

<Button Width="100" Height="50" Background="Aqua" FontSize="20" x:Name="ClickMe"  Content="点击"/>

我们平时肯定很少这样写，只是偶尔标签会单独定义样式。

二、基于特定控件类型设置属性（隐式样式）

直接为特定类型的所有控件应用样式。

名称描述
TargetType目标类型
Setter

样式项，键值对

Property 属性名称

Value 属性值

<Window x:Class="WpfApp1.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"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="GridDemo" Height="300" Width="450">

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Crimson"/>
            <Setter Property="FontSize" Value="18"></Setter>
        </Style>
    </Window.Resources>

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0">Button 1</Button>
        <Button Grid.Row="0" Grid.Column="1">Button 2</Button>
        
    </Grid>
</Window>

有点类似CSS中，直接定义标签样式。

input{
    width: 150px;
}

这里说下  

  • <Window.Resources></Window.Resources>：是XAML中的一个元素，用于在特定的窗口范围内定义资源。资源可以是样式（Style）、模板（Template）、画笔、字符串、图像等。这些资源可以在窗口内的所有子元素中被引用和使用。
  • StaticResource和DynamicResource：StaticResource在加载XAML时（编译时）进行一次性查找和解析。这意味着在使用StaticResource引用资源时，资源的值在应用启动时就已经确定，并且在应用运行期间不会再改变。DynamicResource在运行时进行查找和解析。这意味着在使用DynamicResource引用资源时，资源的值可以在应用运行期间动态改变，并且控件会自动更新以反映资源值的变化。

这样写，也还有一个缺点，无法让每个按钮都有不同的样式。

三、基于x:Key设置属性（显式样式）

x:Key有点类似CSS中的class功能，可以定义key，让不同标签引用。和第二个方式差不多，只是多了一个x:Key属性。

<Window x:Class="WpfApp1.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"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="GridDemo" Height="300" Width="450">

    <Window.Resources>
        <Style x:Key="Button1Style" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style x:Key="Button2Style" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Red"/>
        </Style>
    </Window.Resources>

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button Style="{StaticResource Button1Style}" Grid.Row="0" Grid.Column="0">Button 1</Button>
        <Button Style="{StaticResource Button2Style}" Grid.Row="0" Grid.Column="1">Button 2</Button>

    </Grid>
</Window>

这样写，也会有个问题，因为有很多重复的属性样式，看着很鸡肋。

四、继承样式设置属性

在之前的基础上，加上BasedOn特性，可以继承样式。

<Window x:Class="WpfApp1.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"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="GridDemo" Height="450" Width="600">

    <Window.Resources>
        <Style x:Key="Button1Style" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
    </Window.Resources>

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button Style="{StaticResource Button1Style}" Grid.Row="0" Grid.Column="0">Button 1</Button>
        <Button Style="{StaticResource Button2Style}" Grid.Row="0" Grid.Column="1">Button 2</Button>

    </Grid>
</Window>

五、使用应用级别的资源

将样式定义在App.xaml文件中，使得整个应用程序中的控件都可以使用这些样式。

//App.xaml 文件
<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="Button1Style" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
    </Application.Resources>
</Application>

//MainWindow.xaml 文件
<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="Button1Style" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
    </Application.Resources>
</Application>

六、使用资源字典（Resource Dictionary）

将样式定义在独立的资源字典文件中，然后在需要的地方引用这些字典。有点类似，创建.css文件，在需要的页面引用css文件。

1、VS右键创建资源字典(WPF)文件，命名为CustomerStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="Button1Style" TargetType="Button">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Background" Value="Blue"/>
    </Style>
    <Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontSize" Value="20"/>
    </Style>
</ResourceDictionary>

2、页面中引用CustomerStyle.xaml文件

<Window x:Class="WpfApp1.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"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="GridDemo" Height="450" Width="600">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CustomerStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button Style="{StaticResource Button1Style}" Grid.Row="0" Grid.Column="0">Button 1</Button>
        <Button Style="{StaticResource Button2Style}" Grid.Row="0" Grid.Column="1">Button 2</Button>

    </Grid>
</Window>

<ResourceDictionary Source="xx.xaml"/>，需要注意的是Source后面的文件路径，我是两个页面在同一级目录下。不同目录，路径需要注意。

七、使用触发器（Triggers）

使用Style.Triggers定义条件样式，当条件满足时应用样式。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Blue"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource ButtonStyle}" Content="Hover Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

当鼠标移动到Button按钮时，会变成红色。（但是这个例子，颜色没有变，可能是我版本的问题。下面是我成功的例子。）

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource ButtonStyle}" Content="Hover Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

总结

WPF中提供了多种样式设置方式，可以满足不同的UI设计需求：

  • 内联样式：简单直接，适用于一次性设置。
  • 显式样式：通过资源引用应用样式，适用于多个控件共享样式。
  • 隐式样式：自动应用样式到所有特定类型的控件，简化样式管理。
  • 资源字典：集中管理资源，可以在窗口级别、页面级别或独立文件中定义，便于资源的复用和管理。
  • 应用级别资源：在App.xaml中定义，全局可用，适用于需要在整个应用中共享的资源。

后面用到还会继续补充。

杨文同学
关注
专栏目录
C# WPF 基础教程-2024
12-23
新手入门教程-简单好用
C# WPF入门学习主线篇（二十二）—— 样式（Styles）的定义和应用
weixin_56595425的博客
06-12 1765
在《C# WPF入门学习主线篇（二十二）—— 样式（Styles）的定义和应用》这篇文章中，我们详细探讨了WPF中的样式定义和应用，包括静态样式、基于现有样式创建新样式，以及属性触发器和事件触发器的使用方法。通过具体的代码示例，您将学会如何利用样式来高效地管理和复用控件的外观和行为，提升开发效率和代码的可维护性。本文还展示了多个实际应用场景，帮助您更好地理解和掌握样式的使用技巧。
WPF窗体动态效果
最新发布
zhaotianff的专栏
08-14 1320
WPF实现窗体动态效果，类似网页上的动态背景效果。
WPF样式
腻害
03-01 1126
WPF样式 一、WPF相较于以前学的WinForm，WPF在UI设计与动画方面的炫丽是最吸引我来学习的。在WPF中XMAL代码的引入使得代码的编写能够前后端分离，为获得更好的界面，也使得我们不得不分出一半的时间花在前端代码的编写上（虽然微软提供了Blend for Visual Studio这样的设计软件，但我认为学习的时候就应该从难处学），而样式（Style）又是前端代码中非常重要的元素，所以在啃《WPF编程宝典第四版》的时候边看边练习后，决定写一些学习笔记，后面也会继续写。介于内容并不深入，所以且称为入
WPF漂亮样式
09-23
WPF漂亮样式
WPF样式（Style）入门
热门推荐
Rhine
10-14 5万+
WPF的样式是非常强大的，除了与HTML标记中的CSS类似，它还能够支持触发器（Trigger），比如当元素属性发生变化时，可通过触发器改变控件样式。用最最直观的例子说明效果。
深入WPF–Style
BeanGo的博客
08-18 2211
深入WPF–Style
WPF中Style样式设置的几种方法
fwz123的博客
01-23 2435
简单描述wpf中style的 几种使用方式
WPF中的Style
weixin_40029679的博客
09-22 1281
TextBlock的Style
WPF项目入门必知必会基础--巩固和进阶必会 视频课程P1-P10
07-31
在“WPF项目入门必知必会基础--巩固和进阶必会 视频课程P1-P10”这个课程中，我们将深入学习WPF的基础概念和技术，帮助新手快速上手。课程内容可能涵盖了以下关键知识点： 1. **XAML语言**：XAML是WPF的主要标记...
WPF入门教程
06-21
以上只是WPF入门的基础知识，随着深入学习，你还将接触到数据验证、样式触发器、行为扩展、MVVM模式、资源字典、命令等等更高级的主题。WPF是一个强大且功能丰富的UI框架，为开发者提供了无尽的创新可能。通过实践...
WPF 基础视频教程（共50集）-3.只使用代码创建WPF应用程序
02-12
WPF提供多种布局容器，如`Grid`, `StackPanel`, `DockPanel`等，用于组织和定位UI元素。例如，使用`Grid`容器，你可以定义行和列来布置元素： ```csharp Grid grid = new Grid(); int numRows = 2; int numCols = 2...
WPF开发教程- 让你成为WPF高手
12-14
**一、WPF基础入门** 1. **.NET Framework与WPF的关系**：WPF是.NET Framework 3.0引入的新一代UI框架，它构建在.NET Framework之上，提供了丰富的图形渲染、媒体支持和数据绑定能力。 2. **XAML语言**：XAML...
WPF基础之UI样式Style
yigu4011的博客
06-20 1116
触发器：基础样式：1. 通过TargetType设置样式通过控件类型，统一设置样式【如：字体，大小，边距等】，以便于形成统一的风格，通过设置样式的TargetType="Button"，则可以使所有的按钮应用同一个样式，统一风格2. 通过Key设置样式：如果需要对每一个控件元素，都设置不同的样式，则可以通过不同的Key加以区分。
WPF——样式与模板
三千幻想乡
08-05 3184
每次写blog一定是我遇到什么实际问题了。而这次的问题，和文章标题没有特别大的关系。因为上一篇文我讲到了自定义日历控件（Calendar）的事，在我改CalendarDayButtonStyle的过程中，我发现默认的Style中出现了大量的VisualState标签。但正如上文中所说，一个自身的WPF程序员或许对VisualState相关类也会感到陌生，更何况我呢。于是我决定，对VisualState相关类进行学习。我打开微软官网，搜了下VisualState，首先在Windows App SDK的内容中看
10-2.WPF的Style
博客
11-14 914
10-2.WPF的Style
WPF 学习笔记《WPF样式基础》
洪源兄
07-30 905
为了方便的设计WPF界面的样式，可以直接在界面xaml中指定对应的样式代码，用作设计样式即可。当然xaml文件只是描述如何去生成c#后台代码而已，同样的，style本质上也是一个类，也不仅仅是为了生成后台代码。style的样式我们也可以在后台去设置。我学的基础只限于前端样式xaml文件的书写...
WPF样式揭秘：轻松玩转样式技巧与策略！！！
欢迎来到我的博客，这里记录了我学习、实践和探索过程中的心得体会！
01-28 2114
样式的基本概念：样式是一种定义控件外观的资源，它包含了一组属性设置，这些设置决定了控件的外观表现。样式通常包含在XAML文件中，并可以通过资源字典进行组织和管理。样式在WPF中的主要作用：通过使用样式，开发人员可以统一控制应用程序中所有元素的外观，简化对界面元素的修改和管理。此外，样式还可以使代码更加整洁和易于维护，因为外观和行为的分离使得代码更具可读性和可维护性。
WPF入门教程系列003-WPF的样式
qq_52036416的博客
11-15 733
在WPF中，样式由一组属性和事件设置组成，它们定义了控件的外观、行为和布局。样式通常包含在XAML（可扩展应用程序标记语言）中，并可以应用于单个控件或整个应用程序。首先，让我们定义一个简单的样式来更改按钮的外观。在XAML中，我们可以使用元素来定义样式，并使用元素设置控件的属性。
wpf 01-bootstrappershell
10-21
WPF 01-BootstrapperShell是一种用于启动和初始化WPF应用程序的框架。它是指示WPF应用程序在启动时应执行的代码的入口点。通常情况下，我们可以在App.xaml.cs文件中找到它。 BootstrapperShell提供了一种将应用程序的各个部分组织在一起的方式，以便在启动时执行特定的操作。这些操作可以包括设置应用程序的默认样式、添加全局资源、注册服务和创建主窗口等。通过将所有这些相关的代码集中到一个地方，我们可以更好地管控应用程序的启动过程。 通常情况下，BootstrapperShell会执行以下几个步骤： 1. 创建应用程序的主窗口：这个步骤通常在App.xaml.cs文件的OnStartup方法中完成。我们可以在这里创建一个MainWindow实例，并将其设置为应用程序的主窗口。 2. 设置应用程序的默认样式：WPF应用程序通常使用样式来定义应用程序中各个控件的外观和行为。在BootstrapperShell中，我们可以通过添加资源字典来设置应用程序的默认样式。 3. 注册服务和初始化其他组件：在应用程序启动时，我们可能需要注册一些服务或初始化其他组件，以便在应用程序中的其他地方使用。在BootstrapperShell中，我们可以执行这些操作。 4. 处理未捕获的异常：在应用程序中可能会发生未捕获的异常，我们可以通过在BootstrapperShell中实现Application.DispatcherUnhandledException事件处理程序来捕获和处理这些异常。 总而言之，WPF 01-BootstrapperShell是一种用于组织和管理WPF应用程序启动过程的框架。它提供了一个入口点来集中所有与应用程序启动相关的代码和操作，从而更好地控制应用程序的行为和外观。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值