【WPF】鼠标移入/悬浮时按钮的背景色不改变

2016-12-10 11:20:21来源:CSDN作者:qq_18995513人点击

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

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

一种思路:在样式文件中,使用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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台