精华内容
下载资源
问答
  • WPF常用用户控件样式,包括按钮、文本框、下拉框、GridData、树、滚动条等等都进行了精心的设计,拿来即用!里面包含有样式里所需的图标文件哦!
  • wpf修改style DataTrigger

    2018-05-22 15:08:14
    wpf 修改style DataTrigger,无法动态修改,只能通过新建解决
  • 使用wpf开发的时候,经常会用到style,通常style会放到单独的一个资源字典文件中以方便多处复用。定义style的时候希望使用控件事件实现一些操作,但是style中是不支持事件赋值的。这里提供一种style中调用cs代码的...


    前言

    在使用wpf开发的时候,我们经常会用到style,通常会把style放到一个资源字典文件中,以方便多处复用。定义style的时候希望使用控件事件实现一些操作,但是style并不支持事件赋值。这里提供一种style中注册控件事件的方法。


    一、原理说明

    1、在xaml中可以使用依赖属性。

    DependencyProperty
    

    2、我们可以自定义依赖属性,自定义的依赖属性也可以在xmal中控件中使用。

    <Button  local:MyClass.MyProperty="1" />
    

    3、在style中也能使用setter给控件属性赋值。

    <Style >
      <Setter Property="local:MyClass.MyProperty" Value="1"></Setter>
    </Style>
    

    4、自定义的依赖属性有属性改变事件,注册此事件,在事件中能获取附属控件对象。

    public static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e);
    

    基于上述4点,我们只需要自定义依赖属性,在style中给属性赋值,在属性改变事件中获取控件对象,并进行初始化操作,即完成了style对cs代码的调用。


    二、如何实现?

    1.创建cs文件

    创建一个style对应的cs文件,这里要注意名称要与资源字典文件名相同加cs后缀,这样vs会把cs文件当成资源字典文件的附属文件,可以自动折叠。如下图所示。
    我们现在有一个ButtonStyle.xaml的资源字典
    在这里插入图片描述
    添加一个同名的cs文件
    在这里插入图片描述
    cs文件就会变成资源字典的附属文件。
    在这里插入图片描述

    2.定义附加属性

    在ButtonStyle.xaml.cs中定义一个附加属性,名称为ButtonInit。附加属性通过propa+tab的方式快捷定义。

    在这里插入图片描述

    3.属性赋值

    在Style的资源字典中,给上述定义的附加属性赋值。

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="clr-namespace:WpfApp1">
        <Style x:Key="ButtonStyle_Normal" TargetType="Button">
            <!--给附加属性赋值-->
            <Setter Property="local:ButtonStyle.ButtonInit" Value="True"></Setter>
        </Style>
    </ResourceDictionary>
    

    3.注册回调事件

    在依赖属性的属性改变事件中,注册控件的事件。

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    namespace WpfApp1
    {
        class ButtonStyle
        {
            public static bool GetButtonInit(DependencyObject obj)
            {
                return (bool)obj.GetValue(ButtonInitProperty);
            }
            public static void SetButtonInit(DependencyObject obj, bool value)
            {
                obj.SetValue(ButtonInitProperty, value);
            }
            // Using a DependencyProperty as the backing store for ButtonInit.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ButtonInitProperty =
                DependencyProperty.RegisterAttached("ButtonInit", typeof(bool), typeof(ButtonStyle), new PropertyMetadata(false, PropertyChangedCallback));
            //属性改变的回调事件
            public static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
            {
                //d即是Style应用的对象。
                var button = d as Button;
                //注册Loaded事件
                button.Loaded += (S, E) => { 
                
                };
                //注册Click事件
                button.Click += (S, E) => { 
                
                };
                //其他初始化处理
            }
        }
    }
    

    三、示例

    1、《C# wpf style中实现ListBox自动生成序号》
    2、《C# wpf 在style中自定义标题栏及无边框窗口》


    总结

    上述方法实现的style调用cs代码,很好的拓展了style的用法,同时cs文件始终跟随资源字典文件,把cs文件理解和定义为资源字典的一部分,就不存在代码耦合问题

    展开全文
  • 《15天玩转WPF》—— Style 中的 Trigger

    千次阅读 多人点赞 2020-04-01 11:54:04
    创建一个 Button的 Style,其中包含两个 EventTrigger,一个由 MouseEnter 事件触发,另一个由 MouseLeave 事件触发,代码如下 : <Window.Resources> <Style TargetType="Button"> <Style.Triggers> ...

    Trigger,触发器,当某些条件满足时会触发一个行为,比如:值的变化,动画的发生等。
    触发器比较像事件,但事件一般是由用户操作触发的

    触发器一般具有:

    Trigger / DataTrigger数据变化触发型
    MultiTrigger / MultiDataTrigger多条件触发型
    EventTrigger事件触发型

    其中有 Data的,都是基于数据的,没有的则对于控件而言 . . .


    文章目录


    基本 Trigger

    Trigger 有 Property 和 Value两个属性,Property 是关注的属性名称,Value 是触发条件。
    Setters 用来设置触发条件满足时做出的反应 . . .

    当 CheckBox的IsChecked属性为 true时,前景色和字体会改变,代码如下:

        <Window.Resources>
            <Style TargetType="CheckBox">
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="FontSize" Value="20"/>
                        <Setter Property="Foreground" Value="Orange"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Window.Resources>
    
        <StackPanel>
            <CheckBox Content="悄悄的我走了" Margin="5"/>
            <CheckBox Content="正如我悄悄的来" Margin="5,0"/>
            <CheckBox Content="我挥一挥衣袖" Margin="5"/>
            <CheckBox Content="不带走一片云彩" Margin="5,0"/>
        </StackPanel>

    效果图如下:

    在这里插入图片描述


    MultiTrigger

    多个条件同时成立时才会被触发,有一个 Conditions属性,条件放在其中 . . .

    当 CheckBox被选中,且 Content为 “正如我悄悄的来” 时才会触发,代码如下:

    <Window.Resources>
        <Style TargetType="CheckBox">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                    
                    <Condition Property="IsChecked" Value="true"/>
                        <Condition Property="Content" Value="正如我悄悄的来"/>
                    </MultiTrigger.Conditions>
                    
                    <MultiTrigger.Setters>
                        <Setter Property="FontSize" Value="20"/>
                        <Setter Property="Foreground" Value="Orange"/>
                    </MultiTrigger.Setters>
                    
                    </MultiTrigger>
           </Style.Triggers>
        </Style>
    </Window.Resources>
    

    效果图如下:

    在这里插入图片描述


    由数据触发的 DataTrigger

    程序中经常会遇到基于数据执行某些判断情况,我们可以使用 DataTrigger . . .

    当 TextBox的 Text长度小于7 个字符时其 Border会保持红色,代码如下:

    <Window.Resources>
            <local:L2BConverter x:Key="cvtr"/>
            <Style TargetType="TextBox">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={x:Static
                     	RelativeSource.Self},Path=Text.Length,
                        	Converter={StaticResource cvtr}}" Value="false">
    
    		    <Setter Property="BorderBrush" Value="Red"/>
                        <Setter Property="BorderThickness" Value="1"/> 
    
    		</DataTrigger>
                </Style.Triggers>
            </Style>
    </Window.Resources>
    
    <StackPanel>
            <TextBox Margin="5"/>
            <TextBox Margin="5,0"/>
            <TextBox Margin="5"/>
    </StackPanel>

    其中我们将自身当作数据源,关注的是 text的 Length,我们需要通过这个 Length来进行判断,这里我们需要 Converter,Converter如下:

    public class L2BConverter : IValueConverter
    {
    	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, Type targetType, object parameter,
    	 	CultureInfo culture)
            {
                throw new NotImplementedException();
            }
    }

    效果动态图如下:

    在这里插入图片描述


    多数据条件触发的 MultiDataTrigger

    有的时候我们需要多种数据同时满足来显示一种效果

    <Window.Resources>
            <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>
    </Window.Resources>
    
    <StackPanel>
            <ListBox x:Name="listBoxStudent" Margin="5"/>
    </StackPanel>

    在后台插入数据:

    List<Student> list = new List<Student>()
    {
    	new Student(){ID = 1,Name="huameng",Age = 1},
    	new Student(){ID = 2,Name="huameng",Age = 1},
    	new Student(){ID = 2,Name="Tom",Age = 1},
    	new Student(){ID = 1,Name="huameng",Age = 1},
    	new Student(){ID = 1,Name="huameng",Age = 1},
    };
    this.listBoxStudent.ItemsSource = list;

    Student 类这里就不定义了 . . .

    这里的触发器使用过程和上面的差不多

    首先,这里我们先设置模板风格,然后设置触发器 . . .

    效果如下:

    在这里插入图片描述


    由事件触发的 EventTrigger

    EventTrigger 是一个比较特殊的一个,它不是由属性值或数据的变化来触发,而是由事件来触发,触发后并非是应用一组 Setter,而是执行一段动画。所以 UI层的动画效果经常与 EventTrigger相关联 . . .

    创建一个 Button的 Style,其中包含两个 EventTrigger,一个由 MouseEnter 事件触发,另一个由 MouseLeave 事件触发,代码如下 :

    <Window.Resources>
        <Style TargetType="Button">
            <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>
    </Window.Resources>
     
    <Canvas>
            <Button Width="40" Height="40" Content="OK"/>
    </Canvas>

    这里面涉及到了动画的知识,敬请期待动画相关文章. . .

    效果动态图:

    在这里插入图片描述


    作者:浪子花梦

    展开全文
  • WPF样式(Style)入门

    万次阅读 多人点赞 2017-10-14 00:20:00
    WPF的样式是非常强大的,除了与HTML标记中的CSS类似,它还能够支持触发器(Trigger),比如当元素属性发生变化时,可通过触发器改变控件样式。用最最直观的例子说明效果。

    前言

    WPF相较于以前学的WinForm,WPF在UI设计与动画方面的炫丽是最吸引我来学习的。在WPF中XMAL代码的引入使得代码的编写能够前后端分离,为获得更好的界面,也使得我们不得不分出一半的时间花在前端代码的编写上(虽然微软提供了Blend for Visual Studio这样的设计软件,但我认为学习的时候就应该从难处学),而样式(Style)又是前端代码中非常重要的元素,所以在啃《WPF编程宝典第四版》的时候边看边练习后,决定写一些学习笔记,后面也会继续写。介于内容并不深入,所以且称为入门吧。

    样式基础

    一、最直观的例子

    WPF的样式是非常强大的,除了与HTML标记中的CSS类似,它还能够支持触发器(Trigger),比如当元素属性发生变化时,可通过触发器改变控件样式,但本文中暂不涉及触发器(下一篇博客里写)。先展示一个最直观的例子。

    <Window x:Class="StyleTest.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:StyleTest"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
    
        <Window.Resources>
            <FontFamily x:Key="ButtonFontFamily">Times New Roman</FontFamily>
            <sys:Double x:Key="ButtonFontSize">18</sys:Double>
            <FontWeight x:Key="ButtonFontWeight">Bold</FontWeight>
        </Window.Resources>
    
        <StackPanel VerticalAlignment="Center">
            <Button Name="cmd" Content="Resource Button" 
                    Width="150" Height="30" Margin="3"
                    FontFamily="{StaticResource ButtonFontFamily}"
                    FontSize="{StaticResource ButtonFontSize}"
                    FontWeight="{StaticResource ButtonFontWeight}"/>
            </StackPanel>
    </Window>



    【解释】

    • 首先为窗口添加了三个资源:第一个是FontFamily对象,包含希望使用的字体名称;第二个是存储数字18的double对象(需要引用xmlns:sys=”clr-namespace:System;assembly=mscorlib”这条命名空间);第三个是枚举值FontWeightBold。(使用资源最常见的原因之一便是通过它们保存样式)
    • 然后在元素中直接使用这些资源,因为在应用程序的整个生命周期中,这些资源都不会发生变化,所以使用静态资源是合理的。
    • 最后就得了一个应用了样式的按钮。
    • 注:样式设置元素的初始外观,但可以随意覆盖它们设置的这些特性。如再在Button元素中明确设置Fontsize=”20”那么按钮标签中的FontSize设置会被覆盖。

    二、稍加改进的例子

    我们发现上面那个例子中的使用方法显得极其冗杂,还没有原来不使用资源时简明,所以我们稍加改进。

    <Window.Resources>
        <Style x:Key="BigFontButtonStyle">
            <Setter Property="Control.FontFamily" Value="Times New Roman"/>
            <Setter Property="Control.FontSize" Value="18"/>
            <Setter Property="Control.FontWeight" Value="Bold"/>
        </Style>
    </Window.Resources>
    
    <StackPanel VerticalAlignment="Center">
        <Button Name="cmd" Content="Resource Button" 
                Width="150" Height="30" Margin="3"
                Style="{StaticResource BigFontButtonStyle}"/>
    </StackPanel>

    后台代码设置样式

    cmd.Style = (Style)cmd.FindResource("BigFontButtonStyle");

    【解释】

    • 上面的标记创建了一个独立资源:即一个System.Windows.Style对象。并包含三个Setter对象,每个Setter对象用于一个希望设置的属性。并为该样式设置一个键名用以引用该样式。
    • Setter对象中的Property设置是针对Control类型,而不再只是例子1中的Button类型。当它们都对控件的样式进行设置时,例子1中只对Button控件有效果,而例子2中对其他包含FontFamily、FontSize、FontWeight的控件都能有效果。除此以外我们还可以使用TargetType属性限定该样式可以引用的对象,语法如下:
    <Window.Resources>
        <Style x:Key="BigFontButtonStyle" TargetType="Button">
            <Setter Property="Control.FontFamily" Value="Times New Roman"/>
            <Setter Property="Control.FontSize" Value="18"/>
            <Setter Property="Control.FontWeight" Value="Bold"/>
        </Style>
    </Window.Resources>

    只允许Button控件进行引用该样式。

    关联事件处理

    光看标题有点懵逼的感觉,这个时候思考下面例子就清楚了:如何使鼠标悬浮在一行文字上时,文字高亮显示;离开时,文字恢复原样?最简单的便是通过编写控件的事件处理程序来实现。同样,我们还可以通过样式来进行实现,实现方法就是通过创建Style的EventSetter对象的集合。

    <Window.Resources>
        <Style x:Key="MouseOverHighlightStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Padding" Value="5"/>
            <EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter"/>
            <EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave"/>
        </Style>
    </Window.Resources>
    
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="This is a TextBlock" 
                   Style="{StaticResource MouseOverHighlightStyle}"/>
    </StackPanel>

    后台代码:

    private void element_MouseEnter(object sender,MouseEventArgs e)
    {
        ((TextBlock)sender).Background = new SolidColorBrush(Colors.Aqua);
    }
    
    private void element_MouseLeave(object sender, MouseEventArgs e)
    {
        ((TextBlock)sender).Background = null;
    }



    【解释】

    • MouseEnter和MouseLeave事件完成了背景颜色改变。在TextBlock标签中,我们可以看到只需要应用一行Style=”{StaticResource MouseOverHighlightStyle}”边可以实现功能,这非常适合当我们需要为大量元素应用鼠标悬停效果的情况下,基于样式的事件处理程序简化了这项任务。
    • 但WPF中极少使用事件设置器这种技术,更方便使用的是事件触发器(后面再说),它以声明的方式定义了所希望的行为(并且不需要任何代码)。

    多层样式——样式的继承

    有时候我们希望在另一个样式的基础上创建样式,这时可通过为样式设置BasedOn特性来使用此类样式继承,使用起来非常简单。

    <Window.Resources>
        <Style x:Key="MouseOverHighlightStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Padding" Value="5"/>
            <EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter"/>
            <EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave"/>
        </Style>
    
        <Style x:Key="BaseOnStyle" 
            TargetType="TextBlock" 
            BasedOn="{StaticResource MouseOverHighlightStyle}">
            <Setter Property="Control.Foreground" Value="Red"/>
        </Style>
    </Window.Resources>
    
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="This is a TextBlock" 
            Style="{StaticResource MouseOverHighlightStyle}"/>
    
        <TextBlock Text="Inherited Style TextBlock" 
            Style="{StaticResource BaseOnStyle}"/>
    </StackPanel>



    【解释】

    • 第二个Textbox继承了第一个Textbox的样式,并在其基础上将文字颜色(Foreground)修改为了Red(红色)。

    通过类型自动应用样式

    听名字依旧有些懵逼的感觉,那么继续来想一个例子:当我们需要为界面的所有Button设置统一样式的时候怎么做?当Button比较少的时候,我们可以用上面的方法逐个设置样式,但是当Button非常多的时候,这样的方法就显得麻烦了。这个时候我们就可以使用TargetType来自动的为对应的控件应用样式。直接看例子:

     <Window.Resources>
         <Style x:Key="MouseOverHighlightStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Padding" Value="5"/>
            <EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter"/>
            <EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave"/>
        </Style>
    
        <Style TargetType="TextBlock"
            BasedOn="{StaticResource MouseOverHighlightStyle}">
            <Setter Property="Control.Foreground" Value="Green"/>
        </Style>
    </Window.Resources>
    
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="This is a TextBlock" 
            Style="{StaticResource MouseOverHighlightStyle}"/>
    
        <TextBlock Text="Inherited Style TextBlock" 
            Style="{StaticResource BaseOnStyle}"/>
    
        <TextBlock Text="Global Style TextBlock"/>
    
        <TextBlock Text="Global Without Style TextBlock"
            Style="{x:Null}"/>
    </StackPanel>



    【解释】

    • 使用类型标记扩展来隐式的设置键名,样式会自动应用与整个元素树的所有TextBlock上,如下所示
    x:Key="{x:Type TextBlock}"
    • 正如之前所说的,Style可以被覆盖,前两个TextBlock为自己提供了一个新样式;而第三个并没有,所以第三个自动的应用了该样式;第四个将Style属性设置为null值,这样就有效的删除了样式。

    小结

    通过这几个例子,我自己已经能够对样式有一定里理解了,但还只是入门了,后面样式的触发器才更难一些,并且具有更丰富的功能。用上了新的编辑器(markDown)感觉还是非常棒的~

    展开全文
  • WPF设置Button的Style

    千次阅读 2019-04-30 09:52:30
    <Button Style="{StaticResource BtnInfoStyle}" Content="信息" Margin="5 0"/> 上述代码实现了Button按钮的扁平化样式,如果你想调整颜色风格,通过修改Background的值可实现默认颜色,鼠标经过颜色以及鼠标...

    扣扣技术交流群:460189483

    一、前言

    程序界面上的按钮多种多样,常用的就这几种:普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了,来一起看看详细的介绍吧。

    二、固定样式的按钮

    固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用,按钮整体样式不需要做大的改动。

    2.1 普通按钮-扁平化风格

    先看效果:

    来自苏守坤的CSDN

     

    定义Button的样式,详见代码:

    <Style x:Key="BtnInfoStyle" TargetType="Button">
       <Setter Property="Width" Value="70"/>
       <Setter Property="Height" Value="25"/>
       <Setter Property="Foreground" Value="White"/>
       <Setter Property="BorderThickness" Value="0"/>
       <Setter Property="Background" Value="#43a9c7"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="Button">
          <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
           <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
          </Border>
          <ControlTemplate.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="border" Property="Background" Value="#2f96b4"/>
           </Trigger>
           <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="border" Property="Background" Value="#2a89a4"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
       </Setter.Value>
      </Setter>
    </Style>
    

    引用方法:

    <Grid Background="White">
      <StackPanel Orientation="Horizontal" Margin="10" VerticalAlignment="Top">
       <Button Style="{StaticResource BtnInfoStyle}" Content="信息" Margin="5 0"/>
    </Grid>
    

    上述代码实现了Button按钮的扁平化样式,如果你想调整颜色风格,通过修改Background的值可实现默认颜色,鼠标经过颜色以及鼠标按下颜色。

    2.2 图标按钮

    先看效果:

    来自苏守坤的CSDN

    Button样式的代码和扁平化Button差不多,只是把TextBlock控件替换成了Image控件,另外需要设置Button默认的背景色为透明。废话不多说看代码:

    <Style x:Key="BtnImageStyle1" TargetType="Button">
       <Setter Property="Cursor" Value="Hand"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="Button">
          <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
           <Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Images/button1.png" Stretch="None"/>
          </Border>
          <ControlTemplate.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
           </Trigger>
           <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
       </Setter.Value>
      </Setter>
     </Style>
    

    这里的button1.png需要自己准备图片资源,IsMouseOver和IsPressed的图片资源可自己替换,替换之后能有更丰富的效果呈现。

    2.3 图标文字混合按钮

    效果:

    来自苏守坤的CSDN

    实现代码:

    <Style x:Key="BtnImgTxtStyle1" TargetType="Button">
      <Setter Property="Foreground" Value="#555"/>
      <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="Button">
          <Border>
           <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Image Source="Images/adshut.png" Stretch="None"/>
            <TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
           </StackPanel>
          </Border>
          <ControlTemplate.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="#333333" TargetName="Txt"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
       </Setter.Value>
      </Setter>
     </Style>
    

    2.4 文字按钮和2.3中的图标文字按钮样式差不多,只需要把Image控件去掉就行。

    三、复用性高的按钮

    要想实现复用性高的按钮,就必须新建自定义控件。下面这个实例通过自定义控件实现上述所有效果,并且可以随意更改风格。

    首先在项目中右键-添加-新建项-自定义控件。

    新建自定义控件之后,添加依赖属性。代码如下:

    public class ButtonEx : Button
     {
      static ButtonEx()
      {
       DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonEx), new FrameworkPropertyMetadata(typeof(ButtonEx)));
      }
     
     
      public ButtonType ButtonType
      {
       get { return (ButtonType)GetValue(ButtonTypeProperty); }
       set { SetValue(ButtonTypeProperty, value); }
      }
     
      public static readonly DependencyProperty ButtonTypeProperty =
       DependencyProperty.Register("ButtonType", typeof(ButtonType), typeof(ButtonEx), new PropertyMetadata(ButtonType.Normal));
     
     
      public ImageSource Icon
      {
       get { return (ImageSource)GetValue(IconProperty); }
       set { SetValue(IconProperty, value); }
      }
     
      public static readonly DependencyProperty IconProperty =
       DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ButtonEx), new PropertyMetadata(null));
     
     
      public CornerRadius CornerRadius
      {
       get { return (CornerRadius)GetValue(CornerRadiusProperty); }
       set { SetValue(CornerRadiusProperty, value); }
      }
     
      public static readonly DependencyProperty CornerRadiusProperty =
       DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ButtonEx), new PropertyMetadata(new CornerRadius(0)));
     
     
      public Brush MouseOverForeground
      {
       get { return (Brush)GetValue(MouseOverForegroundProperty); }
       set { SetValue(MouseOverForegroundProperty, value); }
      }
     
      public static readonly DependencyProperty MouseOverForegroundProperty =
       DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
     
     
      public Brush MousePressedForeground
      {
       get { return (Brush)GetValue(MousePressedForegroundProperty); }
       set { SetValue(MousePressedForegroundProperty, value); }
      }
     
      public static readonly DependencyProperty MousePressedForegroundProperty =
       DependencyProperty.Register("MousePressedForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
     
     
      public Brush MouseOverBorderbrush
      {
       get { return (Brush)GetValue(MouseOverBorderbrushProperty); }
       set { SetValue(MouseOverBorderbrushProperty, value); }
      }
     
      public static readonly DependencyProperty MouseOverBorderbrushProperty =
       DependencyProperty.Register("MouseOverBorderbrush", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
     
     
      public Brush MouseOverBackground
      {
       get { return (Brush)GetValue(MouseOverBackgroundProperty); }
       set { SetValue(MouseOverBackgroundProperty, value); }
      }
     
      public static readonly DependencyProperty MouseOverBackgroundProperty =
       DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
     
     
      public Brush MousePressedBackground
      {
       get { return (Brush)GetValue(MousePressedBackgroundProperty); }
       set { SetValue(MousePressedBackgroundProperty, value); }
      }
     
      public static readonly DependencyProperty MousePressedBackgroundProperty =
       DependencyProperty.Register("MousePressedBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
     }
     
     public enum ButtonType
     {
      Normal,
      Icon,
      Text,
      IconText
     }
    

    为不同类型按钮设置样式,代码如下:

    
    
    <Style TargetType="{x:Type local:ButtonEx}">
      <Style.Triggers>
       <Trigger Property="ButtonType" Value="Normal">
        <Setter Property="Background" Value="#43a9c7"/>
        <Setter Property="MouseOverBackground" Value="#2f96b4"/>
        <Setter Property="MousePressedBackground" Value="#2a89a4"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="MouseOverForeground" Value="White"/>
        <Setter Property="MousePressedForeground" Value="White"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
         <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:ButtonEx}">
           <Border x:Name="border" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True">
            <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
           </Border>
           <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
             <Setter TargetName="border" Property="Background" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource TemplatedParent}}"/>
             <Setter TargetName="txt" Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}"/>
             <Setter TargetName="border" Property="BorderBrush" Value="{Binding MouseOverBorderbrush,RelativeSource={RelativeSource TemplatedParent}}"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
             <Setter TargetName="border" Property="Background" Value="{Binding MousePressedBackground,RelativeSource={RelativeSource TemplatedParent}}"/>
             <Setter TargetName="txt" Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}"/>
              
            </Trigger>
           </ControlTemplate.Triggers>
          </ControlTemplate>
         </Setter.Value>
        </Setter>
       </Trigger>
       <Trigger Property="ButtonType" Value="Icon">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
         <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:ButtonEx}">
           <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
            <Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{TemplateBinding Icon}" Stretch="None"/>
           </Border>
           <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
             <Setter Property="Opacity" Value="0.8"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
             <Setter Property="Opacity" Value="0.9"/>
            </Trigger>
           </ControlTemplate.Triggers>
          </ControlTemplate>
         </Setter.Value>
        </Setter>
       </Trigger>
       <Trigger Property="ButtonType" Value="Text">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Foreground" Value="#002c99"/>
        <Setter Property="MouseOverForeground" Value="#FF2c99"/>
        <Setter Property="MousePressedForeground" Value="#002c99"/>
        <Setter Property="Template">
         <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:ButtonEx}">
           <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
           <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
             <Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
             <Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/>
            </Trigger>
           </ControlTemplate.Triggers>
          </ControlTemplate>
         </Setter.Value>
        </Setter>
       </Trigger>
       <Trigger Property="ButtonType" Value="IconText">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Foreground" Value="#555"/>
        <Setter Property="MouseOverForeground" Value="#555"/>
        <Setter Property="MousePressedForeground" Value="#555"/>
        <Setter Property="Template">
         <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:ButtonEx}">
           <Border>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
             <Image Source="{TemplateBinding Icon}" Stretch="None"/>
             <TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </StackPanel>
           </Border>
           <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
             <Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
             <Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/>
            </Trigger>
           </ControlTemplate.Triggers>
          </ControlTemplate>
         </Setter.Value>
        </Setter>
       </Trigger>
      </Style.Triggers> 
     </Style>
    
    

    然后就可以引用该控件了:

    <Grid>
      <WrapPanel>
       <local:ButtonEx Content="信息" Width="75" Height="25" Margin="10" ButtonType="Normal"/>
       <local:ButtonEx Icon="/Images/button1.png" Margin="10" ButtonType="Icon"/>
       <local:ButtonEx Content="文字按钮" Margin="10" ButtonType="Text"/>
       <local:ButtonEx Content="图文按钮" Icon="/Images/adshut.png" Margin="10" ButtonType="IconText"/>
      </WrapPanel>
     </Grid>
    

    效果如下:

    至此已经完成Button控件的扩展功能,如果想要添加动画或者设置图标的位置和边距等,可以自己另外添加依赖属性来扩展。

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家的支持。

    展开全文
  • wpf 使用style

    2020-10-13 14:14:32
    demo 示例演示如何在wpf 项目中使用style 来设置控件的样式及行为。代码参考深入浅出wpf 书中代码,是书中相关学笔记摘要
  • WPFStyle样式

    千次阅读 2018-01-04 15:59:27
    WPF基础样式使用方法: 使用x:Key命名样式名,通过静态或动态的形式调用样式 Style=”{StaticResource lin}” //静态调用样式 Style=”{DynamicResource lin2}” //动态调用样式 Style TargetType=...
  • bootstrap-wpf-style-master 样式代码 。。。。。。。。
  • wpf 使用style 设置样式

    千次阅读 2020-10-13 14:07:53
    wpfstyle 构成style最重要的两种元素: setter 和trigger setter类帮助我们设置控件的静态外观风格,Trigger类帮助我们设置控件的行为风格 Setter setter 类的Property属性用来指明你想为目标的哪个属性赋值;...
  • WPF 点击按钮切换Style

    2021-01-13 10:10:15
    <Window.Resources> <Style x:Key="One" TargetType="{x:Type Grid}"> "Background" Value="AliceBlue"> Style> <Style x:Key="Two" TargetType="{x:Type Grid}"> "Background" Value="Black"> Style> <Style x:Key=...
  • WPF 样式 style 滑动开关 实现的效果像checkbo好看的开关一样
  • 查看WPF Control的默认样式,有时候需要修改,可以参考默认样式,然后再作出相应的修改。 主要是代码是: var style = Application.Current.FindResource(typeof(ComboBox)); using (System.IO.MemoryStream ...
  • 学习在WPF当中如何使用Style定制TabControl的样式,包含TabControl的页面选项切换的简单动画效果。原始代码网上找的,我改了一些代码。
  • WPF开发的软件在个别电脑系统下安装后无法启动,报异常:设置属性“System.Windows.FrameworkElement.Style”时引发了异常。 原因: 在设置控件样式时引用了电脑C盘下的PresentationFramework.Aero2.dll,用了...
  • WPF中的Style样式设置

    千次阅读 2018-12-04 09:32:57
    1、使用Style设置控件的某些属性,并在指定的范围内起作用: 下面是样式定义: &amp;lt;Window.Resources&amp;gt; &amp;lt;Style TargetType=&quot;Button&quot;&amp;gt; &amp;lt;...
  • WPF中的Style

    千次阅读 2019-06-17 21:01:56
    构成Style最重要的两种元素是Setter和Trigger,Setter类帮助我们设置控件的静态外观风格,Trigger类则帮助我们设置控件的行为风格。 Style作用: 为了设计多种外观形式和动作行为。 Style中的Setter Setter...
  • wpf中使用style的时候,有时需要有一些小修改,外形是相同的但颜色不一样,或者形状相同大小不一样等等。如果为上述的情况排列组合定个大量的style,那style也就失去了原本的意义,还不如直接将样式写在页面上。...
  • 开发工具与关键技术:WPF C# 作者:黄济民 撰写时间:2021年10月15日 1、Setter,设置器。什么的设置器呢?属性值的。我们给属性赋值的时候一般都采用“属性名=属性值”的形式。Setter类的Property属性用来指明你想...
  • wpf_外部引用style

    2013-09-17 18:46:52
    详细又简单的wpf引用外部style样式文件的例子
  • <Style x:Key="btnstyle" TargetType="Button"> //设定 <!--所有Control控件都有Style和Template属性,前者用来控制控件的原有属性;后者用来定义控件的内部结构,对控件外观和形状...
  • WPFstyle文件的引用

    2019-02-26 19:43:48
    WPFstyle文件的引用  总结一下WPFStyle样式的引用方法。 一、内联样式:  直接设置控件的Height、Width、Foreground、HorizontalAlignment、VerticalAlignment等属性。  以设置一个Botton控件的样式为例,...
  • WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而不必分别设置...
  • wpf Style里面的Trigger

    2021-08-02 17:28:34
    <Window x:Class="WpfApp04.TestWin01" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d=... x.
  • Wpf中 使用 Expander 的样式 ,如果需要绑定自己的属性可以继承Expander 并 添加自己需要的属性 ,如果属性较多可以只绑定一个类,注意增加通知。 最后在样式中使用TempleteBinding 来帮顶自己设置的值,不要忘了 要...
  • 最后项目中美工给出了一套设计方案,需要修改Textbox控件的样式,于是修改一下默认...<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#7278FB"/> <Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}"> ...
  • var result = new Style(type, style); result.Setters.Add(new Setter(FontSizeProperty, (double)size)); result.Setters.Add(new Setter(ForegroundProperty, new SolidColorBrush(color))); if (CurrentBold)...
  • 如题,如果不了解这个东西请参考这个作者写的[WPF]控件应用多个样式 后台代码设置 WpfMultiStyle.Apply.SetMultiStyle(this.laBt1, "FooterButtons SingleBt HomeBt");//控件名和style的key值,不同的key值用空格区...
  • Wpf TabControl Style

    2017-05-16 19:06:21
    Wpf TabControl 样式

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,145
精华内容 6,458
关键字:

styletwpf