WPF中的模板（五）- 使用Style

最新推荐文章于 2024-05-31 11:36:17 发布
最新推荐文章于 2024-05-31 11:36:17 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyman_c/article/details/52238327
版权

一、Style中的Setter
资源中定义Style：

<Window x:Class="_11_25.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 TargetType="TextBlock" x:Key="tbSty">
            <Style.Setters>
                <Setter Property="FontSize" Value="24"/>
                <Setter Property="TextDecorations" Value="Underline"/>
                <Setter Property="FontStyle" Value="Italic"/>
            </Style.Setters>
        </Style>
    </Window.Resources>
    <Grid>
        <TextBlock Height="65" HorizontalAlignment="Left" Margin="184,66,0,0" Name="textBlock1" Text="Hello World" VerticalAlignment="Top"
                   Style="{StaticResource tbSty}" Width="179" />
    </Grid>
</Window>

Style由一组Setter构成，每个Setter对象含有两个属性，Property表示要修改的属性名称，Value表示要修改的值。我们想要在Style中应用ControlTemplate，只需要把Setter的Property改成Template，并为Value提供一个ControlTemplate即可。 

<Window x:Class="_11_25.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 TargetType="CheckBox">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Trigger.Setters>
                        <Setter Property="FontSize" Value="24"/>
                        <Setter Property="Foreground" Value="Orange"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <CheckBox Content="Hello World" Height="74" HorizontalAlignment="Left" Margin="188,134,0,0" Name="checkBox1" VerticalAlignment="Top" Width="148" />
    </Grid>
</Window>

这里写图片描述

2.2 MultiTrigger
MultiTrigger，由多个条件触发的Trigger，MultiTrigger比Trigger多了一个Conditions的属性，包含了需要满足的条件。

<Window x:Class="_11_25.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 TargetType="CheckBox">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsChecked" Value="True"/>
                        <Condition Property="Content" Value="Hello"/>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="FontSize" Value="20"/>
                        <Setter Property="Foreground" Value="Orange"/>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <CheckBox Content="Hello World" Height="74" HorizontalAlignment="Left" Margin="173,40,0,0" Name="checkBox1" VerticalAlignment="Top" Width="148" />
        <CheckBox Content="Hello" Height="74" HorizontalAlignment="Left" Margin="173,184,0,0" Name="checkBox2" VerticalAlignment="Top" Width="148" />
    </Grid>
</Window>

这里写图片描述

2.3 由数据触发的DataTrigger
DataTrigger基于数据进行某些情况的判断，其Binding属性会将数据源源不断的送过来，一旦送来的值与Value属性一致，DataTrigger即被触发。
以下列子通过DataTrigger控制TextBox自身的BorderBrush等属性，当Text的长度小于7时，触发一组Setter。
XMAL代码如下：

<Window x:Class="_11_25.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:_11_25"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:LengthToBoolConverter x:Key="l2b"/>  
        <Style TargetType="TextBox">
            <Style.Triggers>
                <DataTrigger 
                    Binding="{Binding Text.Length,RelativeSource={x:Static RelativeSource.Self},Converter={StaticResource l2b}}" Value="false">
                    <Setter Property="BorderBrush" Value="Red"/>
                    <Setter Property="BorderThickness" Value="1"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="188,147,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="188,208,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="211,276,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
    </Grid>
</Window>

CS代码如下：

public class LengthToBoolConverter : IValueConverter
    {
        //将?Count转Áa换?成¨¦bool
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            int textlength = (int)value;
            return textlength > 6 ? true : false;
        }
        //反¤¡ä向¨°不?处ä|理¤¨ª
        public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

运行效果：

这里写图片描述

2.3 多数据条件触发的MutilDataTrigger
多个数据条件同时满足时才能触发的变化，比如这样一个需求：用户界面上ListBox显示一系列数据，当同时满足某条件时，条目高亮显示。
XMAL代码如下：

<Window x:Class="_11._5._4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:_11._5._4"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <Style TargetType="ListBoxItem">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding ID}" Width="60"/>
                                <TextBlock Text="{Binding Name}" Width="120"/>
                                <TextBlock Text="{Binding Age}" Width="60"/>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Path=ID}" Value="2"/>
                            <Condition Binding="{Binding Path=Name}" Value="Tom"/>
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.Setters>
                            <Setter Property="Background" Value="Orange"/>
                        </MultiDataTrigger.Setters>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </Window.Resources>    
    <Grid>
        <ListBox x:Name="listBoxStudent" Margin="5"/>
    </Grid>
</Window>

后台代码：

/// <summary>
    /// MainWindow.xaml 的Ì?交?互£¤逻?辑-
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            List<Student> list = new List<Student>();
            Student s = new Student();
            s.ID = 1;
            s.Name = "zhao";
            s.Age = 20;
            list.Add(s);

            Student s1 = new Student();
            s1.ID = 2;
            s1.Name = "Tom";
            s1.Age = 30;
            list.Add(s1);

            this.listBoxStudent.ItemsSource = list;
        }
    }

    public class Student
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

显示效果：
这里写图片描述

5.由事件触发的EventTrigger
EventTrigger比较特殊，它不是由属性值或者数据变化来触发，而是由事件触发，其次其触发后并非应用一组Setter而是执行一段动画。

<Window x:Class="_11._5._5.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>
        <ResourceDictionary>
            <Style TargetType="Button" x:Key="s1">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
                                <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation  Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
                                <DoubleAnimation  Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Button Width="40" Height="40" Content="OK" Style="{DynamicResource s1}"/>
    </Grid>
</Window>

鼠标进入：
这里写图片描述

鼠标离开：
这里写图片描述

HymanLiuTS
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF style风格
weixin_44545511的博客
05-08 322
开发工具与关键技术：Visual Studio 2015 作者：王成 撰写时间：2019年5月6日 窗口中的所有Button对象都将受到这个Style的影响，从而文本变成统一的蓝色CourierNew字体: <Window.Resources> <Style TargetType="Button"> <Setter Property="Foregro...
WPF基础知识—Binding和三大解耦和利器：路由事件、依赖属性和命令
Gvision
12-13 3561
1 概述 WPF是微软继MFC之后推出的界面框架，标签语言XAML(读作zaml)在Windows窗体应用程序开发中，与BS结构中的与HTML+CSS+Javascript作用一样。这类标签语言的好处就是可以很轻松的和后台逻辑代码解耦和。 XAML在.NET框架当中的位置： 由于XAML被设计用来专门编写Windows窗口程序的，与BS架构区分客户端和服务器端不同，所以与HTML在浏览器上被解析不...
WPF入门--多种方式设置样式（Style）
最新发布
qq_40950398的博客
05-31 1703
本篇文章通过多种方式设置WPF样式（Style）以控制UI元素的外观和行为
WPF中Style的使用
热门推荐
码农
10-10 1万+
Styel在英文中解释为”样式“，在Web开发中，css为层叠样式表，自从.net3.0推出WPF以来,WPF也有样式一说，通过设置样式，使其WPF控件外观更加美化同时减少了大量的复杂属性的设置。    在WPF中，设置外观样式我们有很多种方式，比如通过设置控件的属性来控制控件
WPF入门（六）样式Style
weixin_34315485的博客
01-14 209
wpf提供了一种类似css的对象- style，但是比css更强大。它支持直接设定属性，更改呈现模板，触发器，事件触发等。MSDN描述如下： MSDN 可以在从 FrameworkElement 或 FrameworkContentElement 派生的任何元素上设置 Style。样式通常在 Resources 节内部声明为资源。由于样式是一种资源，它们遵循适用于所有资源的相同范围规则，因此样...
WPF---style样式
Nameseven的博客
03-03 434
先通俗讲一下样式： 样式主要是用来对控件进行修改，使得控件表现出特定的表现状态。比如，普通的Button按钮，很简陋。通过样式可以使得按钮在创建的时候，就具有一些特别的样子(前景色，边框颜色，高度，宽度等等)。这种情况适合用于在前段需要构建大量控件时，避免了重复工作(而且在前端.xaml文件中没有for循环)。 Style最重要的两个元素是Setter和Trigger： Setter类：用来设置控件的静态外观风格。Setter类的Property属性用来指明你想为目标的哪个属性赋值；Setter类的V
WPF样式 WpfToolkit-master
12-29
要使用WpfToolkit，首先需要将其添加到项目中。在NuGet包管理器中搜索并安装`WpfToolkit`，然后在XAML文件中导入命名空间，例如`xmlns:wpftoolkit="http://schemas.microsoft.com/wpf/2008/toolkit"`。接着，可以...
WPF编程宝典--使用C#2012和.NET4.5源码.rar
11-24
命令模式在WPF中广泛使用，它分离了UI事件处理和业务逻辑。路由事件则允许事件在元素树中传播，方便跨多个控件处理事件。 9. **MVVM模式** Model-View-ViewModel（MVVM）是WPF开发推荐的设计模式。ViewModel作为...
wpf 使用style
10-13
本示例将探讨如何在WPF项目中使用`Style`来设置控件的样式和行为。 1. **什么是Style** `Style`是WPF中的一种资源，用于定义控件的默认外观和行为。它可以包含一个或多个`Setter`，每个`Setter`用于设置控件的一个...
WPF样式 WpfToolkit-master.zip
02-08
9. **数据绑定和模板数据**：在WPF中，样式可以利用强大的数据绑定机制，将控件的属性与数据模型直接关联。DataTemplate则用于定义如何显示复杂数据对象。 10. **控件设计**：WpfToolkit可能包含了自定义控件的设计...
wpf 实现按钮style
12-03
wpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮style
WPF日期时间控件-DateTimePicker
08-04
在这个压缩包文件“WpfDateTimePicker - 20170804”中，包含了一个基于C#编程语言实现的WPF DateTimePicker控件的源代码，以及使用说明和设计思路文档。 首先，我们要理解WPF DateTimePicker的基本概念。它是XAML...
10-2.WPF的Style
博客
11-14 870
10-2.WPF的Style
WPF Style & Template
哈哈的博客
09-22 2805
WPF元素可以使用一个样式，通过元素的Style属性设置(Style属性在FrameworkElement中定义) Setter是Style中最重要的属性，Setter只支持依赖属性； 某些依赖属性无法使用简单的字符串设置值，这时使用嵌套元素的方法实现，比如ImageBrush;<Window.Resources> <Style x:Key="bigFontButtonStyle"> <
WPF Style
qq_41617901的博客
06-22 133
References: https://www.wpf-tutorial.com/styles/using-styles/ MainWindow.xaml <Window x:Class="WPF_Styles.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
WPF_Style风格
weixin_44564948的博客
05-16 198
WPF_Style风格 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： Visual Studio 2015 * SQL Server 作者： 撰写时间：2019年01月01日 ~~~~~~~~~~~~~~~~~~~~~~~...
WPF-样式Style
Maybe_ch的博客
06-19 355
Style 若我们要给多个控件设置多个相同的属性时，这时一个一个设置会显得很麻烦，这时使用Style给多个控件设置就显得很简便。 如果我要给一个button设置字体大小，字体等内容需要做如下设置 &lt;Window.Resources&gt; &lt;sys:Double x:Key="ButtonFontSize"&gt;18&lt;/sys:Double&g...
WPF中如何编辑Style
06-03
WPF中可以使用Style来定义控件的外观和行为，可以通过编辑Style来自定义控件的外观和行为。 首先，你需要在XAML中定义一个Style，可以使用<Style>标签或者标签中的<Style>标签。例如，下面是一个定义Button控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值