WPF 控件 (三、切换按钮)

已于 2023-04-02 00:34:46 修改
阅读量977 收藏 2
点赞数
文章标签： wpf ui
于 2023-04-01 23:31:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LyRics1996/article/details/129904245
版权

一、点击状态切换

1. Iconbutton

包含两个Icon 分别用来显示不同点击和默认的状态

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.Media;
using System.Windows.Shapes;

namespace lyrics.ui.Controls.ButtonCustom
{
    public class IconButton:Button
    {
        static IconButton()
        {
           DefaultStyleKeyProperty.OverrideMetadata(typeof(IconButton), new FrameworkPropertyMetadata(typeof(IconButton)));
        }

        #region Icon 
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(Geometry), typeof(IconButton), new PropertyMetadata(default(Geometry)));

        public Geometry Icon
        {
            get => (Geometry)GetValue(IconProperty);
            set => SetValue(IconProperty, value);
        }
        public static readonly DependencyProperty Icon2Property =
    DependencyProperty.Register("Icon2", typeof(Geometry), typeof(IconButton), new PropertyMetadata(default(Geometry)));

        public Geometry Icon2
        {
            get => (Geometry)GetValue(Icon2Property);
            set => SetValue(Icon2Property, value);
        }
        public static readonly DependencyProperty IconWidthProperty =
    DependencyProperty.Register("IconWidth", typeof(double), typeof(IconButton), new PropertyMetadata(default(double)));

        public double IconWidth
        {
            get => (double)GetValue(IconWidthProperty);
            set => SetValue(IconWidthProperty, value);
        }

        public static readonly DependencyProperty IconHeightProperty =
DependencyProperty.Register("IconHeight", typeof(double), typeof(IconButton), new PropertyMetadata(default(double)));

        public double IconHeight
        {
            get => (double)GetValue(IconHeightProperty);
            set => SetValue(IconHeightProperty, value);
        }
        #endregion
    }
}

2. style

点击时切换 图标和文字显示状态
没有单独写第二个依赖属性来显示文字 用Name替代

    <Style x:Key="CheckBtn" TargetType="cbtn:IconButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="cbtn:IconButton">
                    <Border Background="{TemplateBinding Background}" CornerRadius="10">
                        <StackPanel Orientation="Horizontal">
                            <Path x:Name="icon1" Data="{TemplateBinding Icon}" Width="{TemplateBinding IconWidth}" Height="{TemplateBinding IconHeight}" Fill="{TemplateBinding Foreground}" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" SnapsToDevicePixels="True" Stretch="Uniform"/>
                            <Path x:Name="icon2" Data="{TemplateBinding Icon2}" Width="{TemplateBinding IconWidth}" Height="{TemplateBinding IconHeight}" Fill="{TemplateBinding Foreground}"  Stroke="{TemplateBinding Foreground}" StrokeThickness="1" SnapsToDevicePixels="True" Stretch="Uniform"/>
                            <TextBlock x:Name="tb" Text="{TemplateBinding Name}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center"/>
                            <ContentPresenter x:Name="contentPresenter" RecognizesAccessKey="True" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="icon1" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="icon2" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="tb" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="contentPresenter" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="False">
                            <Setter TargetName="icon1" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="icon2" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="tb" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="contentPresenter" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
               
            </Setter.Value>
        </Setter>
    </Style>

3. icon

 <Geometry o:Freeze="True" x:Key="DownGeometry">M512 801.6896L5.12 282.0096l58.1632-59.5968L512 682.3936l448.7168-460.0832 58.1632 59.5968-506.88 519.7824z</Geometry>
    <Geometry o:Freeze="True" x:Key="UpGeometry">M50.000001,0 L100,51.262779 94.262627,57.141584 50.000001,11.767713 5.7373757,57.151686 0,51.27288 z</Geometry>

4. demo

 <cbtn:IconButton Content="checkBtn" x:Name="checkBtn2" Width="80" Height="30" Background="Black" Foreground="White" Style="{StaticResource CheckBtn}"
                                     Icon="{StaticResource UpGeometry}" Icon2="{StaticResource DownGeometry}" IconWidth="20" IconHeight="20"/>

5. 效果

默认状态
在这里插入图片描述
点击状态
在这里插入图片描述

二、 选中状态切换

1. CheckButton

与IconButton 基本一样 继承ToggleButton 是为了获得check属性

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace lyrics.ui.Controls.ButtonCustom
{
    public class CheckButton:ToggleButton
    {
        static CheckButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CheckButton), new FrameworkPropertyMetadata(typeof(CheckButton)));
        }

        #region Icon 
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(Geometry), typeof(CheckButton), new PropertyMetadata(default(Geometry)));

        public Geometry Icon
        {
            get => (Geometry)GetValue(IconProperty);
            set => SetValue(IconProperty, value);
        }
        public static readonly DependencyProperty Icon2Property =
    DependencyProperty.Register("Icon2", typeof(Geometry), typeof(CheckButton), new PropertyMetadata(default(Geometry)));

        public Geometry Icon2
        {
            get => (Geometry)GetValue(Icon2Property);
            set => SetValue(Icon2Property, value);
        }
        public static readonly DependencyProperty IconWidthProperty =
    DependencyProperty.Register("IconWidth", typeof(double), typeof(CheckButton), new PropertyMetadata(default(double)));

        public double IconWidth
        {
            get => (double)GetValue(IconWidthProperty);
            set => SetValue(IconWidthProperty, value);
        }

        public static readonly DependencyProperty IconHeightProperty =
DependencyProperty.Register("IconHeight", typeof(double), typeof(CheckButton), new PropertyMetadata(default(double)));

        public double IconHeight
        {
            get => (double)GetValue(IconHeightProperty);
            set => SetValue(IconHeightProperty, value);
        }
        #endregion
    }
}

2. style

    <Style x:Key="CheckBtn" TargetType="cbtn:CheckButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="cbtn:CheckButton">
                    <Border Background="{TemplateBinding Background}" CornerRadius="10">
                        <StackPanel Orientation="Horizontal">
                            <Path x:Name="icon1" Data="{TemplateBinding Icon}" Width="{TemplateBinding IconWidth}" Height="{TemplateBinding IconHeight}" Fill="{TemplateBinding Foreground}" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" SnapsToDevicePixels="True" Stretch="Uniform"/>
                            <Path x:Name="icon2" Data="{TemplateBinding Icon2}" Width="{TemplateBinding IconWidth}" Height="{TemplateBinding IconHeight}" Fill="{TemplateBinding Foreground}"  Stroke="{TemplateBinding Foreground}" StrokeThickness="1" SnapsToDevicePixels="True" Stretch="Uniform"/>
                            <TextBlock x:Name="tb" Text="{TemplateBinding Name}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center"/>
                            <ContentPresenter x:Name="contentPresenter" RecognizesAccessKey="True" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="icon1" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="icon2" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="tb" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="contentPresenter" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter TargetName="icon1" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="icon2" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="tb" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="contentPresenter" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Opacity" Value="0.4"/>
            </Trigger>
        </Style.Triggers>
    </Style>

3. demo

<cbtn:CheckButton Content="checkBtn" x:Name="checkBtn2" Width="80" Height="30" Background="Black" Foreground="White" Style="{StaticResource CheckBtn}"
                                     Icon="{StaticResource UpGeometry}" Icon2="{StaticResource DownGeometry}" IconWidth="20" IconHeight="20"/>

4. 效果

未选中
在这里插入图片描述
选中
在这里插入图片描述

三、带动画的切换

1.Style

<Style x:Key="CheckBtn2" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border x:Name="br" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" CornerRadius="20">
                        <StackPanel>
                            <Ellipse Name="ep" Width="{TemplateBinding Height}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left">
                                <Ellipse.RenderTransform>
                                    <TranslateTransform X="0"/>
                                </Ellipse.RenderTransform>
                            </Ellipse>
                            <ContentPresenter x:Name="contentPresenter" Visibility="Collapsed"/>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation To="50"  Duration="0:0:0:0.5" Storyboard.TargetName="ep" Storyboard.TargetProperty="(UIElement.RenderTransform).X"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation  Duration="0:0:0:0.5" Storyboard.TargetName="ep" Storyboard.TargetProperty="(UIElement.RenderTransform).X"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                   
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Opacity" Value="0.4"/>
            </Trigger>
        </Style.Triggers>
    </Style>

2. Demo

 <ToggleButton  x:Name="checkBtn3" Width="80" Height="30" Background="Black" Foreground="White" Style="{StaticResource CheckBtn2}"/>

3.效果

选中前
在这里插入图片描述
选中后 白色圆形慢慢滚动到右边
在这里插入图片描述

四、选中后切换颜色

1. style

    <Style x:Key="CheckBtn3" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                        <Ellipse Name="ep" Width="{TemplateBinding Height}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background }"/>

                        <Ellipse Name="ep2" Width="0" Height="{TemplateBinding Height}" Fill="{TemplateBinding Foreground }" />

                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                           
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation To="0" Storyboard.TargetName="ep" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <DoubleAnimation To="30" Storyboard.TargetName="ep2" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <DoubleAnimation To="0" Storyboard.TargetName="ep" Duration="0:0:0:0.5" Storyboard.TargetProperty="Opacity"/>
                                        <DoubleAnimation To="1" Storyboard.TargetName="ep2" Duration="0:0:0:0.5" Storyboard.TargetProperty="Opacity"/>
                                        <ColorAnimation To="Black"  Storyboard.TargetName="ep" Duration="0:0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                        <ColorAnimation To="Red"  Storyboard.TargetName="ep2" Duration="0:0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation  Storyboard.TargetName="ep" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <DoubleAnimation  Storyboard.TargetName="ep2" Duration="0:0:0:0.5" Storyboard.TargetProperty="Width"/>
                                        <DoubleAnimation  Storyboard.TargetName="ep" Duration="0:0:0:0.5" Storyboard.TargetProperty="Opacity"/>
                                        <DoubleAnimation  Storyboard.TargetName="ep2" Duration="0:0:0:0.5" Storyboard.TargetProperty="Opacity"/>
                                        <ColorAnimation  To="Black" Storyboard.TargetName="ep" Duration="0:0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                        <ColorAnimation  Storyboard.TargetName="ep2" Duration="0:0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                   
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

2. demo

<ToggleButton  x:Name="checkBtn3" Width="30" Height="30" Background="Black" Foreground="Red" Style="{StaticResource CheckBtn3}"/>

3. 效果

选中前
在这里插入图片描述
选中后
在这里插入图片描述

LyRics1996
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Wpf日历控件
04-12
给单位做个小程序，需要日历中显示字符串，自己做了个WPF日历控件。完整源码，不多，略乱，自看。 按月显示，有公立和农历日期，农历的计算使用了网上找到的代码，在此感谢。 只做了按钮上月下月切换，没有做月和年的选择。有哪位感兴趣做了，请发给我一份，谢谢。
WPF ToggleButton
热门推荐
yulongguiziyao的专栏
07-25 2万+
ToggleButton就像拨动开关一样，把开关拨到一个位置，灯亮了；把开关拨到别一个位置，灯灭了。ToggleButton也是这样，按一下，其IsChecked属性变为True；再按一下，其IsChecked属性变为False。有时，我们需要维持三个状态，这时我们把IsThreeState属性设为True。在IsThreeState属性设为True时，IsChecked的属性值可能取三个值：Tr
WPF 动态切换按钮图片
CSDNcjy123的博客
05-27 2170
WPF动态切换按钮图片就是在鼠标移上去的时候显示另一张图片 首先先把三张图片放上去 第一张 第二张 第三张 然后给他们一个值，鼠标移上去的时候是true，显示图片，鼠标移开的时候显示false不显示图片，代码如下 效果 鼠标移上去的效果 ...
【C#】WPF窗体在同一个位置实现不同页面切换
最新发布
Z_W_H_的博客
03-06 1006
【附代码】
WPF多个按钮点击切换样式
小书童的博客
10-25 7508
WPF多个按钮点击切换样式 本文主要讲述WPF中多个按钮，点击状态为一个样式，未点击状态为一个样式，两种样式通过点击这个动作会发生改变，点击另一个按钮，当前已点击的按钮样式也改变的情况。 不复杂样式的多个按钮 主要做法就是将按钮使用radiobutton来代替，然后各个radiobutton的GroupName取名为同一个，如本例中就是取名为“button1”。 &amp;lt;RadioButton ...
Wpf自定义控件ToggleSwitch
11-23
从国外开源网站上找到的效果非常好的WPF自定义控件。切换开关控件(WpfToggleSwitch)。
开关类型WPF ToggleButton / RadioButton（打开/关闭）控件
04-02
替代的ToggleButton / RadioButton控件
WPF 自定义 ToggleButton 样式
weixin_48316521的博客
07-02 8783
UI 设计中经常会用到 Toggle Button，用于切换不同的状态。 UWP 中有 ToggleSwitch, 长这样： WPF 中有 ToggleButton, 长这样： 嗯？？？？？（黑人问号脸） =========== 分割线 =========== WPF 中需要给 ToggleButton 自定义控件模板，以实现 ToggleSwitch 的效果，先上效果图： Style: <ControlTemplate.Resources> <Storyboard x:Key="OnC
WPF 基础控件之 ToggleButton 样式
dotNET跨平台
05-31 2311
其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButtonToggleButton 实现下面的效果1）ToggleButton来实...
了解WPF控件：ToggleButton和Separator常用属性与用法（十三）
欢迎来到我的博客，这里记录了我学习、实践和探索过程中的心得体会！
01-27 1137
【代码】了解WPF控件：ToggleButton和Separator常用属性与用法（十三）
WPF ToggleButton 主题切换动画按钮
菜鸟程序员
11-10 1805
WPF ToggleButton 主题切换动画按钮,仿造最近看到的html中的一个效果，大致思路是文章这样，感觉还可以再雕琢一下。
WPF自定义分页控件
09-17
WPF自定义分页控件，压缩包包含源码，调用简单只需要注册对应的事件，在事件方法里刷新列表源数据。包含的功能有首页、尾页、上一页、下一页、页面跳转、单页显示条数切换，有7个动态生成的翻页按钮（可改）
示例：WPF按钮背景切换
12-30
在WPF中，Button控件的背景图片更换的示例代码。查了不少资料，然后走了不少弯路，终于找到了一个可行的解决方案。写了一个简单的示例，里面添加了详细的注释。如果你正好在想办法给控件动态换背景，这个就正好适合。
WPF TileManage 实现窗口控件交换位置的自定义控件示例源码
03-02
WPF实现的自定义控件，该控件实现3个窗口被包含在一个控件中，每个窗口可以互换位置，在互换位置时，有动画效果。该控件包含三部分（Tile），一个大窗口与2个小窗口。 例如：大窗口为窗口1,2个小窗口分别为窗口2、窗口3。可以将窗口2拖动到窗口1处，让窗口1与窗口2交换位置，此时大窗口就是窗口2，而小窗口变为窗口1
html+css3+jquery 点击按钮切换内容
还是用“Hello World！”吧
08-14 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点击按钮切换内容&lt;/title&gt; &lt;style type="text/css"&gt;
WPF 实现切换按钮
韬光养晦
03-15 1358
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" ...
WPF的RibbonComboBox中填充ToggleButton控件
巴拉巴拉变不出
05-25 505
在WPF的RibbonComboBox中填充ToggleButton控件需要使用RibbonGallery来实现。
WPF DataGrid 里面的ToggleButton点击不生效
风-的博客
12-08 830
已解决：根本原因是没写UpdateSourceTrigger=PropertyChanged。具体原因参考下面文章：鸣谢作者。
wpf的button控件，实现窗口以及页面的切换
2302_81250899的博客
12-29 1200
当你在WPF中需要实现页面切换时，可以按照以下详细步骤进行操作： 1. **创建WPF项目**： - 打开Visual Studio或其他适用的IDE。 - 创建一个新的WPF应用程序项目。
wpf datagrid 分页控件
09-16
DataGrid是WPF中的一个强大控件，可用于显示和编辑大量数据。 在WPF中，DataGrid默认不支持分页功能。但是可以通过自定义分页控件来实现这个功能。以下是一种实现WPF DataGrid分页控件的方法。 首先，我们可以创建...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值