WPF C# RadioButton单选图标按钮

最新推荐文章于 2024-08-11 12:05:48 发布

有技巧搬砖

最新推荐文章于 2024-08-11 12:05:48 发布

阅读量2k

点赞数

分类专栏： MVVM UI设计 c# WPF 文章标签： wpf c# html5

本文链接：https://blog.csdn.net/liaohaiyin/article/details/119938681

版权

MVVM 同时被 3 个专栏收录

92 篇文章 18 订阅

订阅专栏

UI设计

92 篇文章 9 订阅

订阅专栏

c# WPF

92 篇文章 24 订阅

订阅专栏

有一组单选按钮，选中不同的按钮切换到不同功能。按钮通过矢量图显示，当选中按钮变暗，先看一下效果：

单选按钮需要增加几个依赖属性：CornerRadius，Icon，IconWidth，IconHeight。

public class IconButton : RadioButton
    {
        public CornerRadius CornerRadius
        {
            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(IconButton), new PropertyMetadata(null));


        /// <summary>
        /// 图标
        /// </summary>
        public Geometry Icon
        {
            get { return (Geometry)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(Geometry), typeof(IconButton), new PropertyMetadata(null));



        /// <summary>
        /// 图标宽度
        /// </summary>
        public double IconWidth
        {
            get { return (double)GetValue(IconWidthProperty); }
            set { SetValue(IconWidthProperty, value); }
        }
        public static readonly DependencyProperty IconWidthProperty =
            DependencyProperty.Register("IconWidth", typeof(double), typeof(IconButton), new PropertyMetadata(12.0));



        /// <summary>
        /// 图标高度
        /// </summary>
        public double IconHeight
        {
            get { return (double)GetValue(IconHeightProperty); }
            set { SetValue(IconHeightProperty, value); }
        }
        public static readonly DependencyProperty IconHeightProperty =
            DependencyProperty.Register("IconHeight", typeof(double), typeof(IconButton), new PropertyMetadata(12.0));


    }

依赖属性类设计完，需要在样式中把这些属性绑定。

<Style TargetType="{x:Type local:IconButton}">
        <Setter Property="Width" Value="28" />
        <Setter Property="Height" Value="24" />
        <Setter Property="BorderThickness" Value="1,1,1,1" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:IconButton}">
                    <Border
                        x:Name="bg"
                        Background="White"
                        BorderBrush="#E5E5E5"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        UseLayoutRounding="True">
                        <Path
                            x:Name="Content"
                            Width="{TemplateBinding IconWidth}"
                            Height="{TemplateBinding IconHeight}"
                            Data="{TemplateBinding Icon}"
                            Fill="#888888"
                            Stretch="Fill"
                            UseLayoutRounding="True" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                        </MultiTrigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="bg" Property="Background" Value="{StaticResource ButtonHighlightBackColor}" />
                            <Setter TargetName="bg" Property="BorderThickness" Value="0" />
                            <Setter TargetName="Content" Property="Fill" Value="White" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

继承类和样式都写好了，直接在代码中调用就行了。