WPF 实现切换按钮

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

WPF 实现切换按钮

示例一：
Xaml代码：

<Window x:Class="WPF0315a.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPF0315a"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:SizeConverter x:Key="MyConverter"></local:SizeConverter>
        <Style TargetType="ToggleButton" x:Key="DefaultButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Rectangle Name="ButtonRectangle" Width="{TemplateBinding Width}"
                                       Height="{TemplateBinding Height,Converter={StaticResource MyConverter}}" 
                                       Fill="{TemplateBinding Background}" 
                                       RadiusX="{Binding Path=Height,Converter={StaticResource MyConverter}, RelativeSource={RelativeSource Self}}"
                                       RadiusY="{Binding Path=RadiusX,RelativeSource={RelativeSource Self}}">  
                            </Rectangle>
                            <Ellipse Name="ButtonEllipse" Height="{TemplateBinding Height}"
                                     Width="{Binding RelativeSource={RelativeSource Self}, Path=Height}"
                                     Fill="White" Stroke="Gray"></Ellipse>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter TargetName="ButtonEllipse" Property="HorizontalAlignment" Value="Right"></Setter>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="false">
                                <Setter Property="Fill" TargetName="ButtonRectangle" Value="Gray"></Setter>
                                <Setter TargetName="ButtonEllipse" Property="HorizontalAlignment" Value="Left"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="DarkSeaGreen"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <ToggleButton Width="120" Height="70" Content="GOOD" Style="{StaticResource DefaultButton}"></ToggleButton>
    </Grid>
</Window>

添加一个转换器类的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WPF0315a
{
    class SizeConverter:System.Windows.Data.IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return (double)value / 2;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }
    }
}

运行效果：
在这里插入图片描述

示例二：
添加一个自定义控件FlatToggleButton，Generic.xaml代码：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WPF0316b">

    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDBB377" />
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070" />
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD" />
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1" />
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6" />
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B" />
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4" />
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5" />
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383" />

    <SolidColorBrush x:Key="Button.Checked.Foreground" Color="#FF76E8A6" />

    <Style TargetType="{x:Type local:FlatToggleButton}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Background" Value="{StaticResource Button.Pressed.Background}" />
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}" />
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Width" Value="43" />
        <Setter Property="Height" Value="20" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:FlatToggleButton}">
                    <Grid>
                        <Border x:Name="border"
                                Background="{StaticResource Button.Pressed.Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="10" SnapsToDevicePixels="true" UseLayoutRounding="True" />
                        <Border x:Name="InnerBd" Width="15" Height="15" Margin="3,0"
                                HorizontalAlignment="Left" VerticalAlignment="Center" Background="White" CornerRadius="100"
                                RenderTransformOrigin="0.5,0.5">
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform />
                                    <SkewTransform />
                                    <RotateTransform />
                                    <TranslateTransform />
                                </TransformGroup>
                            </Border.RenderTransform>
                        </Border>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InnerBd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase EasingMode="EaseOut" />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="22">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase EasingMode="EaseOut" />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>

                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0:0:0" Value="#FFC4E5F6">
                                                <EasingColorKeyFrame.EasingFunction>
                                                    <CircleEase EasingMode="EaseOut" />
                                                </EasingColorKeyFrame.EasingFunction>
                                            </EasingColorKeyFrame>
                                            <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF3399FF">
                                                <EasingColorKeyFrame.EasingFunction>
                                                    <CircleEase EasingMode="EaseOut" />
                                                </EasingColorKeyFrame.EasingFunction>
                                            </EasingColorKeyFrame>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InnerBd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="22">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase EasingMode="EaseIn" />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase EasingMode="EaseIn" />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimation BeginTime="00:00:00" Duration="0:0:0.2" From="#FF3399FF" 
                                                        Storyboard.TargetName="border"
                                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                        To="#FFC4E5F6" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

FlatToggleButton.cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPF0316b
{
    public class FlatToggleButton : ToggleButton
    {
        static FlatToggleButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(FlatToggleButton), new FrameworkPropertyMetadata(typeof(FlatToggleButton)));
        }
    }
}

主窗体代码：

<Window x:Class="WPF0316b.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:WPF0316b"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:FlatToggleButton Width="43" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center" IsChecked="True"/>
    </Grid>
</Window>

运行效果图：
在这里插入图片描述

Danny_hi
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
示例：WPF按钮背景切换
12-30
在WPF中，Button控件的背景图片更换的示例代码。查了不少资料，然后走了不少弯路，终于找到了一个可行的解决方案。写了一个简单的示例，里面添加了详细的注释。如果你正好在想办法给控件动态换背景，这个就正好适合...
WPF实现拖动控件功能（类似从工具箱拖出工具）
qq_39055391的博客
03-15 696
下面代码只是简单示例，未使用MVVM模式编写。
wpf自定义按钮控件传值改按钮文本
qq690452074的专栏
11-29 440
wpf自定义按钮控件传值改按钮文本
【WPF应用19】WPF中的Button控件详解
最新发布
qq_35320456的博客
03-28 1455
WPF中的Button控件详解
WPF 控件 (三、切换按钮)
LyRics1996的博客
04-01 940
与IconButton 基本一样 继承ToggleButton 是为了获得check属性。包含两个Icon 分别用来显示不同点击和默认的状态。没有单独写第二个依赖属性来显示文字 用Name替代。点击时切换 图标和文字显示状态。选中后 白色圆形慢慢滚动到右边。
WPF-DragDrop拖拽文字、文件、图片...
rwo_bear的博客
09-02 1869
是否允许作为拖拽目标：进入容器边缘触发：拖拽放下触发。
WPF教学｜WPF也能轻松搞定晴天黑夜切换按钮！GitHub精简源代码已上传｜NuGet下载直接使用
VickyQu214的博客
11-04 122
你可以通过NuGet包来下载这个控件，并且可以通过GitHub仓库来执行包含原始源代码和使用方法的演示项目。今天分享的是wpf版本的晴天黑夜切换按钮使用的方法和具体编程的部分。
wpf的button控件，实现窗口以及页面的切换
2302_81250899的博客
12-29 1113
当你在WPF中需要实现页面切换时，可以按照以下详细步骤进行操作： 1. **创建WPF项目**： - 打开Visual Studio或其他适用的IDE。 - 创建一个新的WPF应用程序项目。
WPF 自定义ToggleButton样式
热门推荐
anjingyatou的专栏
12-19 1万+
废话不多说！ 样式显示如图 源代码奉上：
wpf中英文切换
07-04
上面的按钮切换成英文，下面的按钮切换成中文。
示例：WPF动态窗口内容切换
12-30
WPF窗口内容动态切换。我第一次喜欢上WPF的原因是WPF窗口切换，操作超级简单、超级方便。从此，就成了WPF的铁粉，WPF中的每一项新的特征，都会让你拍案叫绝。这个示例中，在一个窗口中，通过点击按钮，三个窗口内容...
wpf图片按钮
07-11
可以通过一个按钮样式，动态赋值图片路径的方式，实现鼠标单击时按钮图片间的切换。
wpf页面切换特效
07-26
wpf制作的页面切换特效
WPF ToggleButton自定义样式
Boris的专栏
01-03 6782
<Window 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:m
C# WPF 自定义控件 滑块控件 开关控件 ToggleButton Switcher
shizu11zz的博客
09-24 3124
滑块效果演示如图： 源码下载地址https://download.csdn.net/download/shizu11zz/24417299https://download.csdn.net/download/shizu11zz/24417299 直接贴源码，有帮助的话求点个赞，不过分吧： 【MainWindow.Xaml】 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
WPF ToggleButton 主题切换动画按钮
菜鸟程序员
11-10 1782
WPF ToggleButton 主题切换动画按钮,仿造最近看到的html中的一个效果，大致思路是文章这样，感觉还可以再雕琢一下。
WPF布局按钮切换
qq_37343780的博客
03-15 575
WPF布局按钮切换，效果和代码如下 <Window x:Class="HtmlToXamlDemo.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/express
WPF 控件专题 Button控件详解
^@^lemon tea^@^
07-15 5446
WPF 控件专题 Button控件详解
WPF自定义开关切换按钮
qq_44544363的博客
06-07 2454
WPF自定义开关切换按钮 突发奇想先要自己写一个开关按钮，说干就开干了，以下为View视图布局代码，开关按钮的样式就直接在这里定义了，主要呢通过定义触发器来完成按钮的切换。 ```csharp <Window x:Class="DEMO.View.StatusWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsof
wpf material 按钮切换
07-25
要在WPF中实现按钮的材质切换，您可以使用以下步骤： 1. 首先，确保您已经添加了Material Design的相关资源到您的项目中您可以通过NuGet包管理器安装MaterialDesignThemes和MaterialDesignColors。 2. 在XAML中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值