WPF多个按钮点击切换样式

最新推荐文章于 2025-06-20 12:35:54 发布
原创 最新推荐文章于 2025-06-20 12:35:54 发布 · 8k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#WPF #button #radiobutton #IValueConverter #TemplateSelector

本文介绍在WPF中实现按钮点击切换样式的多种方法，包括使用RadioButton、模板选择器及依赖属性，适用于从简单到复杂场景，涉及按钮背景、图片与文字颜色的动态变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

WPF多个按钮点击切换样式

本文主要讲述WPF中多个按钮，点击状态为一个样式，未点击状态为一个样式，两种样式通过点击这个动作会发生改变，点击另一个按钮，当前已点击的按钮样式也改变的情况。

不复杂样式的多个按钮

主要做法就是将按钮使用radiobutton来代替，然后各个radiobutton的GroupName取名为同一个，如本例中就是取名为“button1”。

<RadioButton Foreground="White" Background="#586c88" HorizontalContentAlignment = "Center" VerticalContentAlignment = "Center" Padding="0" GroupName="button1">
    <RadioButton.Template>
        <ControlTemplate TargetType="RadioButton">
            <Border Name="bd" BorderThickness="4" CornerRadius="4" BorderBrush="#586c88" Background="#586c88">
                <ContentPresenter Content="{Binding Position}" HorizontalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="bd" Property="Background" Value="#21b4de" />
                    <Setter TargetName="bd" Property="BorderBrush" Value="#21b4de" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </RadioButton.Template>
</RadioButton>

不复杂样式的多个按钮
上图A1代表点击的，B1代表没点击的，其他都是其他样式，使用触发器，当radiobutton的ischeck属性改变的时候更改他的颜色

复杂样式的多个按钮

上图只是改个颜色那么上述的代码已经足够实现了，但是，假如这个按钮是拥有UI设计的，那么就点击状态有一个图片，未点击状态为另一个图片，然后文字或者字体颜色也可能发生变化，比如当背景颜色变为纯黑的时候，字体为黑色就看不到了，就要改为白色，当背景颜色变为纯白的时候，字体为白色就看不到了，就要改回黑色。那么这种时候就要更改Button的Background了，本例决定使用模板选择器来更改样式。
前端xaml代码

<Button x:Name="btnCaptureChipImage" Height="34" Padding="0" VerticalAlignment="Center" IsEnabled="{Binding ChipAnalysisButtonEnabled}"  Click="btnCaptureChipImage_Click" BorderThickness="0" Cursor="Hand">
    <ContentPresenter Content="{Binding ChipBtn}">
        <ContentPresenter.ContentTemplateSelector>
            <local:ChipBtnTemplateSelector>
                <local:ChipBtnTemplateSelector.WhiteTemplate>
                    <DataTemplate>
                        <Grid Height="34" MinWidth="97">
                            <Grid.Background>
                                <ImageBrush ImageSource="/Images/BlueButton.png"  Stretch="Fill" TileMode="None" />
                            </Grid.Background>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="/Images/Camera_White.png" Width="16" Height="16" Margin="10,0,0,0"/>
                                <TextBlock Text="{DynamicResource Res_C_ExecWork}" TextWrapping="Wrap" FontSize="16" Foreground="White" VerticalAlignment="Center" Margin="5,0,5,0"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </local:ChipBtnTemplateSelector.WhiteTemplate>
                <local:ChipBtnTemplateSelector.BlackTemplate>
                    <DataTemplate>
                        <Grid Height="34" MinWidth="97">
                            <Grid.Background>
                                <ImageBrush ImageSource="/Images/WhiteButton.png"  Stretch="Fill" TileMode="None" />
                            </Grid.Background>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="/Images/Camera_Black.png" Width="16" Height="16" Margin="10,0,0,0"/>
                                <TextBlock Text="{DynamicResource Res_C_ExecWork}" TextWrapping="Wrap" FontSize="16" Foreground="Black" VerticalAlignment="Center" Margin="5,0,5,0"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </local:ChipBtnTemplateSelector.BlackTemplate>
            </local:ChipBtnTemplateSelector>
        </ContentPresenter.ContentTemplateSelector>
    </ContentPresenter>
</Button>

后台 模板选择器代码

/// <summary>
/// 版型设计页面四个按钮模板选择器
/// </summary>
public class ChipBtnTemplateSelector : DataTemplateSelector
{
    public DataTemplate WhiteTemplate { get; set; }
    public DataTemplate BlackTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == null)
            return null;
        Button button = container.GetParentObject() as Button;
        ChipBtn chipBtn = (ChipBtn)item;
        if(button.Name == "btnCaptureChipImage")
        {
            if (chipBtn == ChipBtn.Camera)
                return WhiteTemplate;
            else
                return BlackTemplate;
        }
        else if(button.Name == "btnExecChipAnalysis")
        {
            if (chipBtn == ChipBtn.Analysis)
                return WhiteTemplate;
            else
                return BlackTemplate;
        }
        else if(button.Name == "btnExecAllChipAnalysis")
        {
            if (chipBtn == ChipBtn.AllAnalysis)
                return WhiteTemplate;
            else
                return BlackTemplate;
        }
        else if(button.Name == "btnImportChipImage")
        {
            if (chipBtn == ChipBtn.Import)
                return WhiteTemplate;
            else
                return BlackTemplate;
        }
        return null;
    }
}

//按钮Click事件更改ChipBtn枚举值。
private void btnCaptureChipImage_Click(object sender, RoutedEventArgs e)
{
    ViewModel.ChipBtn = ChipBtn.Camera;
}

复杂样式的多个按钮
上图左一按钮代表点击的，其他三个代表没点击的，使用模板选择器每次点击就更改VM中定义的ChipBtn，然后Button的ContentPresenter的Content binding的就是ChipBtn他一改变就进入了模板选择器的SelectTemplate方法，在该方法中通过查找当前按钮的Name与点击时改变的ChipBtn做匹配，匹配正确就A模板，匹配不正确就B模板。这个方法一共进四次（有几个按钮就进几次，有四个按钮，每个按钮进一次，因为每个按钮都绑定了ChipBtn）。

更加复杂的样式的多个按钮

多个按钮选中一个变色，选中其他的，这个变回，那个选中的变色，同时按钮是会变的，按钮中的左边图片跟文字颜色会随着后台另一个属性的变化而变化。那就不能用上面所说的模板选择器了。因为就算同是白的 也有不同的图片不同的文字颜色。那么如果还用模板选择器，那么每个按钮就要定义2*不同图片种类数（本次例子中为5个）就是10个了，上面所说的模板选择器已经很冗余了，这个更冗余了，就排除了，选择了下列方法，用了三个IValueConverter转换器改他的背景，按钮内左边的图片与文字颜色。
前端xaml代码

<Button x:Name="button1" Click="button1_Click" Height="34" Margin="10,0,0,0" Padding="0" Cursor="Hand">
    <Button.Background>
        <ImageBrush Stretch="Fill" TileMode="None">
            <ImageBrush.ImageSource>
                <MultiBinding Converter="{StaticResource ButtonBackgroundChanged}" FallbackValue="/Images/WhiteButton.png">
                    <Binding Path="AnalysisBtn"/>
                    <Binding Path="CurrentProject.TabItemName[0]"/>
                </MultiBinding>
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Button.Background>
    <StackPanel Orientation="Horizontal" MinWidth="97">
        <Image Width="16" Height="16" Margin="5,0,0,0">
            <Image.Source>
                <MultiBinding Converter="{StaticResource ButtonImageChanged}" FallbackValue="/Images/FAM_Black.png">
                    <Binding Path="AnalysisBtn"/>
                    <Binding Path="CurrentProject.TabItemName[0]"/>
                    <Binding ElementName="button1" Path="Name"/>
                </MultiBinding>
            </Image.Source>
        </Image>
        <TextBlock Text="{Binding CurrentProject.TabItemName[0],FallbackValue='FAM Scatter'}" TextWrapping="Wrap" FontSize="16" Margin="5,0,5,0" VerticalAlignment="Center">
            <TextBlock.Foreground>
                <MultiBinding Converter="{StaticResource TextForegroundChanged}" FallbackValue="Black">
                    <Binding Path="AnalysisBtn"/>
                    <Binding Path="CurrentProject.TabItemName[0]"/>
                </MultiBinding>
            </TextBlock.Foreground>
        </TextBlock>
    </StackPanel>
</Button>

xmal代码中声明IValueConverter转换器

//声明三个转换器
<local:ButtonBackgroundChanged x:Key="ButtonBackgroundChanged"/>
<local:ButtonImageChanged x:Key="ButtonImageChanged"/>
<local:TextForegroundChanged x:Key="TextForegroundChanged"/>

后台IValueConverter转换器代码

//定义三个转换器
public class ButtonBackgroundChanged : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            if (values[1] == DependencyProperty.UnsetValue)
                return new System.Windows.Media.Imaging.BitmapImage(new Uri("pack://application:,,,/当前项目名称;component/Images/WhiteButton.png"));
            AnalysisBtn analysisBtn = (AnalysisBtn)values[0];
            string geneName = values[1].ToString().Substring(0, 3);
            if (geneName == analysisBtn.ToString())
                return new System.Windows.Media.Imaging.BitmapImage(new Uri("pack://application:,,,/当前项目名称;component/Images/BlueButton.png"));
            else
                return new System.Windows.Media.Imaging.BitmapImage(new Uri("pack://application:,,,/当前项目名称;component/Images/WhiteButton.png"));
        }
        catch(Exception)
        {
            throw;
        }
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

public class ButtonImageChanged : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            if (values[1] == DependencyProperty.UnsetValue)
            {
                if(values[2].ToString() == "button1")
                    return new System.Windows.Media.Imaging.BitmapImage(new Uri("pack://application:,,,/当前项目名称;component/Images/FAM_Black.png"));
                else
                    return new System.Windows.Media.Imaging.BitmapImage(new Uri("pack://application:,,,/当前项目名称;component/Images/VIC_Black.png"));
            }
            AnalysisBtn analysisBtn = (AnalysisBtn)values[0];
            string geneName = values[1].ToString().Substring(0, 3);
            if (geneName == analysisBtn.ToString())
                return new System.Windows.Media.Imaging.BitmapImage(new Uri(string.Format("pack://application:,,,/当前项目名称;component/Images/{0}_White.png",geneName)));
            else
                return new System.Windows.Media.Imaging.BitmapImage(new Uri(string.Format("pack://application:,,,/当前项目名称;component/Images/{0}_Black.png", geneName)));
        }
        catch (Exception)
        {
            throw;
        }
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

public class TextForegroundChanged : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            if (values[1] == DependencyProperty.UnsetValue)
                return new SolidColorBrush(Colors.Black);
            AnalysisBtn analysisBtn = (AnalysisBtn)values[0];
            string geneName = values[1].ToString().Substring(0, 3);
            if (geneName == analysisBtn.ToString())
                return new SolidColorBrush(Colors.White);
            else
                return new SolidColorBrush(Colors.Black);
        }
        catch (Exception)
        {
            throw;
        }
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

更加复杂的样式的多个按钮
为什么说这个图很复杂呢，明明跟上面的例子一模一样，主要是这个第二第三个按钮，他是动态的，不仅文字动态，他左边那个小图标“F”样子的那个也要变，而且点击了之后背景变了之后，这个小图标也要变，因为他是黑底的，要改为白底。

2019年11月7日更新

上面这种用模板的实现方式还是太复杂了，可以不要参考了，实际上，使用依赖属性就能做到，而且非常简单。我参考了WPF依赖属性的正确学习方法

先自定义一个MyButton继承Button

public class MyButton : Button
{
    public static readonly DependencyProperty ForeImageProperty = DependencyProperty.Register(nameof(ForeImage), typeof(string), typeof(MyButton), new PropertyMetadata(null));
    public static readonly DependencyProperty BackImageProperty = DependencyProperty.Register(nameof(BackImage), typeof(string), typeof(MyButton), new PropertyMetadata(null));
    public string ForeImage
    {
        get { return (string)GetValue(ForeImageProperty); }
        set { SetValue(ForeImageProperty, value); }
    }
    public string BackImage
    {
        get { return (string)GetValue(BackImageProperty); }
        set { SetValue(BackImageProperty, value); }
    }
}

然后定义一个style修改他的模板

<Style TargetType="{x:Type local:MyButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid Height="34" MinWidth="97" Name="dpBtn">
                    <Grid.Background>
                        <ImageBrush ImageSource="/Images/BlueButton.png" Stretch="Fill" TileMode="None" />
                    </Grid.Background>
                    <StackPanel Orientation="Horizontal">
                        <Image Name="img" Source="{Binding ForeImage, RelativeSource={x:Static RelativeSource.TemplatedParent}}" Width="16" Height="16" Margin="10,0,0,0"/>
                        <TextBlock Name="txt" Text="{Binding Content, RelativeSource={x:Static RelativeSource.TemplatedParent}}" TextWrapping="Wrap" FontSize="16" Foreground="White" VerticalAlignment="Center" Margin="5,0,5,0"/>
                    </StackPanel>
                </Grid>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver,RelativeSource={x:Static RelativeSource.Self}}" Value="True">
                        <Setter Property="Background" TargetName="dpBtn">
                            <Setter.Value>
                                <ImageBrush ImageSource="/Images/BlueButton.png" Stretch="Fill" TileMode="None" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Source" TargetName="img" Value="{Binding ForeImage, RelativeSource={x:Static RelativeSource.TemplatedParent}}"/>
                        <Setter Property="Foreground" TargetName="txt" Value="white"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsMouseOver,RelativeSource={x:Static RelativeSource.Self}}" Value="False">
                        <Setter Property="Background" TargetName="dpBtn">
                            <Setter.Value>
                                <ImageBrush ImageSource="/Images/WhiteButton.png" Stretch="Fill" TileMode="None" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Source" TargetName="img" Value="{Binding BackImage, RelativeSource={x:Static RelativeSource.TemplatedParent}}"/>
                        <Setter Property="Foreground" TargetName="txt" Value="black"/>
                    </DataTrigger>
                    <Trigger Property="IsEnabled" Value="true"/>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

主界面调用

<StackPanel x:Name="analysispanel" Orientation="Horizontal">
	<local:MyButton x:Name="bt1" ForeImage="/Images/Camera_White.png" BackImage="/Images/Camera_Black.png" Content="相机" Height="34" MinWidth="97"/>
	<local:MyButton x:Name="bt2" ForeImage="/Images/AllAnalysis_White.png" BackImage="/Images/AllAnalysis_Black.png" Content="全部分析" Height="34" MinWidth="97"/>
	<local:MyButton x:Name="bt3" ForeImage="/Images/Analysis_White.png" BackImage="/Images/Analysis_Black.png" Content="分析" Height="34" MinWidth="97"/>
	<local:MyButton x:Name="bt4" ForeImage="/Images/Import_White.png" BackImage="/Images/Import_Black.png" Content="导入" Height="34" MinWidth="97"/>
</StackPanel>

其他还可以参考微软官方的通过创建 ControlTemplate 自定义现有控件的外观

WPF 自定义各类按钮样式
韬光养晦
03-15 1万+
WPF 自定义按钮样式 Xaml代码： <Window x:Class="WPF0315b.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
WPF 点击按钮时更改按钮样式界面效果的 XAML 实现方法
lindexi
08-27 4010
在 WPF 中按钮 Button 将会吃掉路由事件，此时的 EventTrigger 如果通过 RoutedEvent 是 MouseLeftButtonDown 那么将会拿不到路由事件，也就触发不了，因此样式将不会变更。简单的解决方法就是通过 VisualStateManager 配合 VisualState 来实现 实现效果如下，所有代码都是 XAML 代码 实现方式为给 Butto...
WPF 点击按钮切换Style
qq_41946341的博客
01-13 1300
先看效果图 <Window x:Class="WpfApp1.FragmentWindow" 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"
C# WPF程序界面美化方法与详细步骤
最新发布
追赶时代的博客
06-20 554
wpf
WPF 控件 (三、切换按钮)
LyRics1996的博客
04-01 1519
与IconButton 基本一样 继承ToggleButton 是为了获得check属性。包含两个Icon 分别用来显示不同点击和默认的状态。没有单独写第二个依赖属性来显示文字 用Name替代。点击时切换 图标和文字显示状态。选中后 白色圆形慢慢滚动到右边。
WPF两个按钮来回切换样式
aanawvph916190的博客
05-20 806
<!-- 两个按钮来回切换样式 --> <Style x:Key="SwicthFunctionMetroToggleButton" TargetType="{x:Type ToggleButton}"> <Setter Property="Background" Value="White" /> ...
wpf的button样式
02-09
设置button的样式，内外发光，移动、点击、离开时产生不同的效果
C# 实现多界面之间切换（WPF）multiWindows.zip
01-02
例如，点击按钮时，可以触发一个事件，该事件处理程序负责切换到新的窗口或界面。 8. **资源和数据绑定** WPF的强项之一是数据绑定和样式/模板系统。通过数据绑定，可以轻松地更新界面以反映模型的变化，同时，...
WPF 按钮样式转变和多个按钮样式转变
01-21
在实际项目中，我们可以为每个样式分配一个唯一的Key，然后在按钮实例中通过`Style`属性引用这些样式，实现按钮样式的切换。例如： ```xml 普通按钮" Style="{StaticResource NormalButtonStyle}"/> 渐变按钮" ...
WPF 窗体最大化、最小化、还原 | WPF 最大化/最小化 按钮图标切换
06-28
本篇文章将详细讲解如何在WPF应用中实现这些功能，并处理最大化/最小化按钮图标的切换。 首先，我们需要了解WPF窗口的基础知识。一个WPF应用程序通常包含一个MainWindow.xaml文件，它是窗口的UI定义。在这个文件中...
WPF 图片滑动轮播，按钮滑动，左右滑动，下标点击定位
08-05
总之，实现WPF中的图片滑动轮播涉及数据绑定、样式设计、动画应用、事件处理以及性能优化等多个方面。通过熟练掌握这些技术，开发者可以创建出既美观又功能丰富的图片展示组件。在实际开发过程中，可以参考开源库或...
好看的WPF自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
wpf更改按钮样式
11-19
引用外部资源，动态更改按钮的样式....
WPF实现超酷样式按钮
12-31
WPF实现超酷样式按钮
WPF制作按钮效果
07-24
按钮透明效果边框不透明制作按钮动画，在鼠标移入按钮后会产生部分区域变色过程
WPF 代码里替换按钮样式
11-26 444
WPF 代码里替换按钮样式
wpf 自定义按钮四态样式
随笔
12-15 877
wpf 自定义按钮四态样式
WPF Button的样式模板
06-30 852
wpf样式模板的继承
WPF动态创建多行多列Button
qq_43026206的博客
12-03 2114
动态添加多行多列数据： XAML代码： &lt;Window x:Class="GameDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:...
多个按钮，点击后切换选中状态效果
热门推荐
LonelySnow的博客
11-14 1万+
&lt;ul class="buttonList"&gt; &lt;li class="ative"&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; active是选中状态的样式。只需给ul下的li切换active样式即可。 给li添加以下点击
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值