首页
登录 | 注册

WPF 自定义RadioButton ,仿照360


自定义的 RadioButton ,这个是已经封装的。如果嫌太麻烦。或者就想写一种样式。那就不需要依赖属性,后台代码。只需要将样式中的3种颜色写死就可以了、

图片看起来是不是不全? 是我宽度设置的小了。其实可以不设置宽度。会自动增长


WPF 自定义RadioButton ,仿照360



一、关于样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--选中背景-->
    <SolidColorBrush x:Key="CheckedColor">#15922E</SolidColorBrush>
    <!--未选中背景-->
    <SolidColorBrush x:Key="UnCheckedColor">Transparent</SolidColorBrush>
    <!--鼠标选中背景-->
    <SolidColorBrush x:Key="MouseOverColor">#2ABF1D</SolidColorBrush>
    
    <Style TargetType="RadioButton" x:Key="RadioButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Border Background="Transparent" BorderThickness="0" >
                        <StackPanel Orientation="Horizontal">
                            <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
                                <Ellipse x:Name="Border" Margin="2"  Fill="Transparent" StrokeThickness="1" Stroke="{TemplateBinding BorderBrush}"></Ellipse>
                                <Ellipse x:Name="CheckArea" Margin="7" Fill="{DynamicResource CheckedColor}"></Ellipse>
                            </Grid>
                            <TextBlock VerticalAlignment="Center" Margin="2,0,0,0" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"></TextBlock>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="CheckArea" Property="Fill" Value="{DynamicResource CheckedColor}"></Setter>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter TargetName="CheckArea" Property="Fill" Value="{DynamicResource UnCheckedColor}"></Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Stroke" Value="{DynamicResource MouseOverColor}"></Setter>
                            <Setter TargetName="CheckArea" Property="Fill" Value="{DynamicResource MouseOverColor}"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

二、关于后台代码。主要是通过依赖属性对资源进行改写达到动态修改样式。如果仅仅需要一种样式,完全可以将上面的样式代码写死


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace DialogEx.Controls
{
    public class RadioButton360 : RadioButton
    {
        public static readonly DependencyProperty CheckedColorProperty = DependencyProperty.Register("CheckedColor", typeof(Brush), typeof(RadioButton360), new PropertyMetadata(Brushes.White));
        public static readonly DependencyProperty UnCheckedColorProperty = DependencyProperty.Register("UnCheckedColor", typeof(Brush), typeof(RadioButton360), new PropertyMetadata(Brushes.Transparent));
        public static readonly DependencyProperty MouseOverColorProperty = DependencyProperty.Register("MouseOverColor", typeof(Brush), typeof(RadioButton360), new PropertyMetadata(Brushes.LightGray));

        /// <summary>
        /// 选中颜色
        /// </summary>
        public Brush CheckedColor
        {
            get { return (Brush)GetValue(CheckedColorProperty); }
            set { SetValue(CheckedColorProperty, value); }
        }

        /// <summary>
        /// 未选中颜色
        /// </summary>
        public Brush UnCheckedColor
        {
            get { return (Brush)GetValue(UnCheckedColorProperty); }
            set { SetValue(UnCheckedColorProperty, value); }
        }

        /// <summary>
        /// 鼠标移动颜色
        /// </summary>
        public Brush MouseOverColor
        {
            get { return (Brush)GetValue(MouseOverColorProperty); }
            set { SetValue(MouseOverColorProperty, value); }
        }

        public RadioButton360()
        {

            Loaded += (sender, args) =>
            {
                try
                {
                    this.Resources.Source = new Uri("DialogEx;Component/Controls/RadioButton360.xaml", UriKind.RelativeOrAbsolute);
                }
                catch
                {
                    throw new Exception("未找到:DialogEx;Component/Controls/RadioButton360.xaml");
                }
                this.Resources["CheckedColor"] = CheckedColor;
                this.Resources["UnCheckedColor"] = UnCheckedColor;
                this.Resources["MouseOverColor"] = MouseOverColor;
                this.Style = this.Resources["RadioButtonStyle"] as Style;
            };
        }
    }
}


三、关于使用、体现出来依赖属性的好处了,为了统一多个RadioButton使用同一个样式 又对基本样式实现了继承


xmlns:MyControls="clr-namespace:DialogEx.Controls;assembly=DialogEx"
<Window.Resources>
        <Style TargetType="MyControls:RadioButton360">
            <Setter Property="BorderBrush" Value="Gray"></Setter>
            <Setter Property="CheckedColor" Value="#15922E"></Setter>
            <Setter Property="UnCheckedColor" Value="Transparent"></Setter>
            <Setter Property="MouseOverColor" Value="#2ABF1D"></Setter>
        </Style>
    </Window.Resources>
<MyControls:RadioButton360 Width="auto" Height="20" Margin="10,20,0,0" IsChecked="{Binding StartUp}">开机启动</MyControls:RadioButton360>


以上做法虽然有点舍近求远的样子。有点绕,但是这个是封装在DLL中的。由于每个RadioButton控件都需要加载资源字典,,,所以封装DLL时请注意。总不能一百个RadioButton 需要加载资源100次吧???


关于依赖属性实时跟新问题请见 

http://blog.csdn.net/lvguoshan/article/details/47835957



2020 jeepxie.net webmaster#jeepxie.net
10 q. 0.007 s.
京ICP备10005923号