WPF C# RadioButton单选图标按钮

92 篇文章 9 订阅
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>

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

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值