情况:鼠标移到按钮上,默认情况是按钮背景色会改变的,网上也能搜到很多如何自定义改变的背景色。

需求:现在需求反过来,想要鼠标移到按钮上,保持按钮的背景色不改变。

一种思路:在样式文件中,使用MultiTrigger来定义按钮的【鼠标悬浮+不被选中/被选中】同时满足的状态时的背景色。

解决:自定义一个ToggleButton的样式文件。
MyToggleButton.xaml:

<ResourceDictionary  x:Class="HomeDecorationPSD.Presentation.Style.MyToggleButton"
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:HomeDecorationPSD.Presentation.Style"
mc:Ignorable="d"> <Style x:Key="myToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="20"/>
<!-- 替换掉默认的模板 -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="3" BorderThickness="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- 更改三态的背景颜色 -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" Value="#FFA1C3F3"/>
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter Property="Background" Value="#FF14B3FD"/>
</Trigger>
<!-- 鼠标悬浮时,背景颜色不变 -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="true"/>
<Condition Property="IsChecked" Value="true"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="#FFA1C3F3"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="true"/>
<Condition Property="IsChecked" Value="false"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="#FF14B3FD"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>

给ToggleButton使用这个样式:

<UserControl
x:Class="HomeDecorationPSD.Presentation.Views.SpaceView"
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:vm="clr-namespace:HomeDecorationPSD.Applications.ViewModels"
mc:Ignorable="d" MinWidth="300" MinHeight="500"
>
<!-- 引入样式文件 -->
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Presentation/Style/MyToggleButton.xaml" /><!-- 是工程的相对路径 -->
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources> <DockPanel Margin="10" >
<StackPanel Orientation="Vertical">
<WrapPanel Orientation="Horizontal" Margin="5">
<ToggleButton Content="客餐厅" IsChecked="True" Style="{StaticResource myToggleButton}" Margin="5"/>
<ToggleButton Content="客厅" Style="{StaticResource myToggleButton}" Margin="5"/>
<ToggleButton Content="餐厅" Style="{StaticResource myToggleButton}" Margin="5"/>
<ToggleButton Content="卧室" Style="{StaticResource myToggleButton}" Margin="5"/>
<ToggleButton Content="测试" Style="{StaticResource myToggleButton}" Margin="5"/>
</WrapPanel>
</StackPanel>
</DockPanel>
</UserControl>

运行效果:

小结:

  1. 如果不给Style指定一个x:Key值,则所有的ToggleButton都会变成使用该样式。为了避免这种情况,使用x:Key值来指定用哪个样式,否则是默认样式。
    关于WPF样式的学习参考这篇文章:http://www.cnblogs.com/zhouyinhui/archive/2007/03/27/690431.html
  2. 为什么要用上Template模板,居然在某度知道看到答案:https://zhidao.baidu.com/question/2137628503185830468.html

2018.3.25更新:

参考这个办法:https://blog.csdn.net/qian_f/article/details/28886021

【WPF】样式与模板:鼠标移入/悬浮时按钮的背景色不改变的更多相关文章

  1. CSS3 - 鼠标移入移出时改变样式

    1,使用伪类实现样式切换伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现.比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可.当 ...

  2. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

  3. WPF样式、模板、装饰器学习

    [代码]

  4. 利用Jquey.hover来实现 鼠标移入出现删除按钮,鼠标移出删除消失

    Html代码 <div class="box"><div class="bmbox" onclick="$('.box:first' ...

  5. Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template

    在上一篇,介绍了Visual State Manager视觉状态管理器,其中涉及到控件的样式(Style)和模板(Template),本篇将详细介绍样式(Style)和模板(Template)在Sil ...

  6. html中如何实现表格移入移出时背景颜色改变?(两种方法)

    html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...

  7. 样式和模板快速入门Style,Template

    http://www.cnblogs.com/jv9/archive/2010/04/14/1711520.html 样式(Style)和模板(Template)的定义 在Silverlight中,样 ...

  8. 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  9. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

随机推荐

  1. nginx中的502错误

    遇到这种情况,首先看一下慢日志 [17-Aug-2015 13:13:43] WARNING: [pool www] child 27780, script '/data/s.com/index.ph ...

  2. caffe与MATLAB连接踩的坑

    刚来公司用的服务器,分配给自己账号,安装了caffe,配好了Makefile.config中的MATLAB dir. 之后问题来了 解决方法: 在Makefile里面,大约第410行那一句话CXXFL ...

  3. [转载]linux 文件改名,移动

    原文地址:linux 文件改名,移动作者:我的足迹 文件改名命令mv(DOS下为REN或rename),在linux中用mv命令给文件改名,例:     mv /mntfloppy p相当于 ren ...

  4. 【转】排名前十位的Linux发行版介绍

    Linux Distributions众多,据说有350个之多.distrowatch.com网站评出了排名前十位的Linux发行版.它们是:1.Ubuntu,当前最新版本是10.10:2.Fedor ...

  5. 标头“Vary:Accept-Encoding”指定方法[转]

    现在的新浏览器都支持压缩了,因此如果网站启用了GZip,可以无需再指定“Vary: Accept-Encoding”标头,不过指定“Vary: Accept-Encoding”标头会有更高的保险,而它 ...

  6. 利用腾讯云免费证书打造全https站

    什么是https? 超文本传输安全协议(Hypertext Transfer Protocol Secure,缩写为HTTPS)是一种网络安全传输协议http是HTTP协议运行在TCP之上,所有传输的 ...

  7. HDFS权限管理用户指南

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_permissions_guide.html 概述 用户身份 理解系统的实现 文件系统API变更 S ...

  8. JMeter学习笔记--JMeter常用测试元件

    JMeter测试计划有一个被称为“函数测试模式”的选项,如果被选择,它会使Jmeter记录来自服务器返回的每个取样的数据.如果你在测试监听器中选择一个文件,这个数据将被写入文件.如果你尝试一个较小的测 ...

  9. view变化监听器ViewTreeObserver介绍

      A view tree observer is used to register listeners that canbe notified of global changes in the vi ...

  10. GDI+ 怎样将图片绘制成圆形的图片

    大概意思就是不生成新的图片,而是将图片转换为圆形图片. 实现代码例如以下: private Image CutEllipse(Image img, Rectangle rec, Size size) ...