WPF自定义控件开发实例 - ColorPicker
开发环境:Win10 + VS2017 + .Net4.5
这个 ColorPicker 是<<WPF编程宝典:使用C#2012和.NET4.5>>这本书中的例子.这里我记录一下,主要是为了加深印象,防止以后要开发自定义控件的时候忘记一些基本的步骤,可以随时来查一下.
调到博文的最后可以先查看一下效果图.
-
建立ColorPicker类继承自 Control类
为什么继承自 Control,Control类继承自UIElement -> FrameworkElement -> ColorPicker,同时 Control 类提供了 Template 功能. -
通知WPF,将为控件提供新的样式.
方法是在静态构造函数中调用 OverrideMetadata()方法.static ColorPicker() { DefaultStyleKeyProperty.OverrideMetadata( typeof(ColorPicker), new FrameworkPropertyMetadata(typeof(ColorPicker))); } -
编写控件逻辑,添加一些必要的属性|事件|方法 ...
-
重写 OnApplyTemplate 方法,为模板中的元素添加数据绑定或者关联事件处理程序
-
ColorPicker类的完整代码:
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Controls.Primitives; using System.Windows.Data; using System.Windows.Media;namespace Demo.DIYControl.Controls.DeepInDIY
{
[TemplatePart(Name = RedSliderName,Type = typeof(RangeBase))]
[TemplatePart(Name = GreenSliderName, Type = typeof(RangeBase))]
[TemplatePart(Name = BlueSliderName, Type = typeof(RangeBase))]
[TemplatePart(Name = PreviewBrushName, Type = typeof(SolidColorBrush))]
public class ColorPicker:Control
{
private const string RedSliderName = "PART_RedSlider";
private const string GreenSliderName = "PART_GreenSlider";
private const string BlueSliderName = "PART_BlueSlider";
private const string PreviewBrushName = "PART_PreviewBrush";private Brush _initializeBorderBrush;
public const byte RGBMaxValue = 255;
public byte Red
{
get { return (byte)GetValue(RedProperty); }
set { SetValue(RedProperty, value); }
}
// Using a DependencyProperty as the backing store for Red. This enables animation, styling, binding, etc...
public static readonly DependencyProperty RedProperty =
DependencyProperty.Register(
nameof(Red), typeof(byte), typeof(ColorPicker),
new FrameworkPropertyMetadata(OnColorRGBChanged));public byte Green
{
get { return (byte)GetValue(GreenProperty); }
set { SetValue(GreenProperty, value); }
}
// Using a DependencyProperty as the backing store for Green. This enables animation, styling, binding, etc...
public static readonly DependencyProperty GreenProperty =
DependencyProperty.Register(
nameof(Green), typeof(byte), typeof(ColorPicker),
new FrameworkPropertyMetadata(OnColorRGBChanged));public byte Blue
{
get { return (byte)GetValue(BlueProperty); }
set { SetValue(BlueProperty, value); }
}
// Using a DependencyProperty as the backing store for Blue. This enables animation, styling, binding, etc...
public static readonly DependencyProperty BlueProperty =
DependencyProperty.Register(
nameof(Blue), typeof(byte), typeof(ColorPicker),
new FrameworkPropertyMetadata(OnColorRGBChanged));public Color Color
{
get { return (Color)GetValue(ColorProperty); }
set { SetValue(ColorProperty, value); }
}
// Using a DependencyProperty as the backing store for Color. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ColorProperty =
DependencyProperty.Register(nameof(Color), typeof(Color),
typeof(ColorPicker), new FrameworkPropertyMetadata(Colors.Black,OnColorChanged));public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
}
// Using a DependencyProperty as the backing store for CornerRadius. This enables animation, styling, binding, etc...
public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ColorPicker),
new FrameworkPropertyMetadata(default(CornerRadius)));public bool UseDynamicBorder
{
get { return (bool)GetValue(UseDynamicBorderProperty); }
set { SetValue(UseDynamicBorderProperty, value); }
}
// Using a DependencyProperty as the backing store for UseDynamicBorder. This enables animation, styling, binding, etc...
public static readonly DependencyProperty UseDynamicBorderProperty =
DependencyProperty.Register(
"UseDynamicBorder", typeof(bool), typeof(ColorPicker),
new FrameworkPropertyMetadata(true, OnUseDynamicBorderChanged));public static readonly RoutedEvent ColorChangedEvent = EventManager.RegisterRoutedEvent(
"ColorChangedEvent", RoutingStrategy.Bubble,
typeof(RoutedPropertyChangedEventHandler<Color>), typeof(ColorPicker));
public event RoutedPropertyChangedEventHandler<Color> ColorChanged
{
add { AddHandler(ColorChangedEvent, value); }
remove { RemoveHandler(ColorChangedEvent, value); }
}static ColorPicker()
{
DefaultStyleKeyProperty.OverrideMetadata(
typeof(ColorPicker), new FrameworkPropertyMetadata(typeof(ColorPicker)));
}public ColorPicker()
{
Loaded += (sender, args) =>
{
_initializeBorderBrush = BorderBrush; //save initial borderbrush
BorderBrush = UseDynamicBorder? new SolidColorBrush(Color) : BorderBrush;
};
}private static void OnColorRGBChanged(DependencyObject sender,
DependencyPropertyChangedEventArgs args)
{
ColorPicker colorPicker = sender as ColorPicker;
colorPicker = colorPicker ?? throw new ArgumentException();Color color = colorPicker.Color;
if (args.Property == RedProperty)
color.R = (byte)args.NewValue;
else if (args.Property == GreenProperty)
color.G = (byte)args.NewValue;
else if (args.Property == BlueProperty)
color.B = (byte)args.NewValue;colorPicker.Color = color;
}private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
ColorPicker colorPicker = d as ColorPicker;
d = d ?? throw new ArgumentException();
colorPicker.Red = colorPicker.Color.R;
colorPicker.Green = colorPicker.Color.G;
colorPicker.Blue = colorPicker.Color.B;//set border color
if (colorPicker.UseDynamicBorder)
colorPicker.BorderBrush = new SolidColorBrush(colorPicker.Color);colorPicker.RaiseEvent(
new RoutedEventArgs(ColorChangedEvent, e.NewValue));
}private static void OnUseDynamicBorderChanged(
DependencyObject d, DependencyPropertyChangedEventArgs args)
{
ColorPicker colorPicker = d as ColorPicker;
colorPicker = colorPicker ?? throw new ArgumentException();colorPicker.BorderBrush = (bool)args.NewValue ? new SolidColorBrush(colorPicker.Color) : colorPicker._initializeBorderBrush;
}public override void OnApplyTemplate()
{
base.OnApplyTemplate();RangeBase slider = GetTemplateChild("PART_RedSlider") as RangeBase;
if (slider != null)
{
Binding binding = new Binding()
{
Path = new PropertyPath("Red"),
Source = this,
Mode = BindingMode.TwoWay
};
slider.SetBinding(RangeBase.ValueProperty, binding);
slider.Maximum = RGBMaxValue;
}slider = GetTemplateChild("PART_GreenSlider") as RangeBase;
if (slider != null)
{
Binding binding = new Binding()
{
Path = new PropertyPath(nameof(Green)),
Source = this,
Mode = BindingMode.TwoWay
};
slider.SetBinding(RangeBase.ValueProperty, binding);
slider.Maximum = RGBMaxValue;
}slider = GetTemplateChild("PART_BlueSlider") as RangeBase;
if (slider != null)
{
Binding binding = new Binding()
{
Path = new PropertyPath(nameof(Blue)),
Source = this,
Mode = BindingMode.TwoWay
};
slider.SetBinding(RangeBase.ValueProperty, binding);
slider.Maximum = RGBMaxValue;
}SolidColorBrush brush = GetTemplateChild("PART_PreviewBrush") as SolidColorBrush;
if (brush != null)
{
Binding bd = new Binding
{
Path = new PropertyPath(nameof(brush.Color)),
Source = brush,
Mode = BindingMode.OneWayToSource
};
SetBinding(ColorPicker.ColorProperty, bd);
}
}}
} -
差不多就是这样一个简单的ColorPicker就出来了.另外增加一个UseDynamicBorder,来控制控件边框的颜色是否动态改变.
看一下效果图
浙公网安备 33010602011771号