在上一章讲了单选框样式,单选框继承于RadioButton。然后在自定义样式,RadioButton中需要把GroupName设置为同一组名称即可。

复选框实现原理同单选框相同,主要区别继承ToggleButton类实现多选功能,此类每个按钮是可以单独复选。

先看一下实现效果:

10a20feee3049b2235eb8678a7a7da68.png

增加几项依赖属性和单选框一样。这里就不再多介绍。

/// <summary>    /// 多选框    /// </summary>    public class NbCheckBox : NbToggleButton    {        #region ctor        static NbCheckBox()        {            DefaultStyleKeyProperty.OverrideMetadata(typeof(NbCheckBox), new FrameworkPropertyMetadata(typeof(NbCheckBox)));        }        /// <summary>        ///        /// </summary>        public NbCheckBox()        {            IsHitTestVisibleInChrome = true;        }        #endregion ctor        public Brush OptionMarkBackground        {            get { return (Brush)GetValue(OptionMarkBackgroundProperty); }            set { SetValue(OptionMarkBackgroundProperty, value); }        }        // Using a DependencyProperty as the backing store for OptionMarkBackground.  This enables animation, styling, binding, etc...        public static readonly DependencyProperty OptionMarkBackgroundProperty =            DependencyProperty.Register("OptionMarkBackground", typeof(Brush), typeof(NbCheckBox), new PropertyMetadata(Brushes.Transparent));        public bool ShowOptionMark        {            get { return (bool)GetValue(ShowOptionMarkProperty); }            set { SetValue(ShowOptionMarkProperty, value); }        }        // Using a DependencyProperty as the backing store for ShowOptionMark.  This enables animation, styling, binding, etc...        public static readonly DependencyProperty ShowOptionMarkProperty =            DependencyProperty.Register("ShowOptionMark", typeof(bool), typeof(NbCheckBox), new PropertyMetadata(true));        public double OptionMarkHeight        {            get { return (double)GetValue(OptionMarkHeightProperty); }            set { SetValue(OptionMarkHeightProperty, value); }        }        // Using a DependencyProperty as the backing store for ShowOptionMarkHeight.  This enables animation, styling, binding, etc...        public static readonly DependencyProperty OptionMarkHeightProperty =            DependencyProperty.Register("OptionMarkHeight", typeof(double), typeof(NbCheckBox), new PropertyMetadata(16d));        public double OptionMarkWidth        {            get { return (double)GetValue(OptionMarkWidthProperty); }            set { SetValue(OptionMarkWidthProperty, value); }        }        // Using a DependencyProperty as the backing store for ShowOptionMarkWidth.  This enables animation, styling, binding, etc...        public static readonly DependencyProperty OptionMarkWidthProperty =            DependencyProperty.Register("OptionMarkWidth", typeof(double), typeof(NbCheckBox), new PropertyMetadata(16d));    }

复选框样式代码如下:

e30b2b37e1777a4dbd9b9f2f2fabb428.png

复选功能就实现了,接下来就是调用代码示例:

07f73ebd631b5df3cbbb6b837afa72b2.png

 

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐