浅尝辄止WPF自定义用户控件(实现颜色调制器)

主要利用用户控件实现一个自定义的颜色调制控件，实现一个小小的功能，具体实现界面如下。

首先自己新建一个wpf的用户控件类，我就放在我的wpf项目的一个文件夹下面，因为是一个很小的东西，所以就没有用mvvm的模式去编写代码，直接把控件的逻辑写在了cs文件中。废话不多说上代码。

1.首先是三个滑动条（值为0-255，各自代表三原色，红蓝绿）和一个右边的显示区域的依赖属性的注册

        public static DependencyProperty ColorProperty;

        public static DependencyProperty RedProperty;

        public static DependencyProperty GreenProperty;

        public static DependencyProperty BlueProperty;

        public ColorPickerControl()

        {

            InitializeComponent();

        }

        static ColorPickerControl()

        {

            //注册属性

            ColorProperty = DependencyProperty.Register("Color", typeof(Color), typeof(ColorPickerControl), new FrameworkPropertyMetadata(Colors.Black, new PropertyChangedCallback(OnColorChanged)));

            RedProperty = DependencyProperty.Register("Red", typeof(byte), typeof(ColorPickerControl), new FrameworkPropertyMetadata(new PropertyChangedCallback(OnRGBChanged)));

            GreenProperty = DependencyProperty.Register("Green", typeof(byte), typeof(ColorPickerControl), new FrameworkPropertyMetadata(new PropertyChangedCallback(OnRGBChanged)));

            BlueProperty = DependencyProperty.Register("Blue", typeof(byte), typeof(ColorPickerControl), new FrameworkPropertyMetadata(new PropertyChangedCallback(OnRGBChanged)));

        }

2.对于依赖属性所注册的名称，也就是对外显示的属性进行get,set设置

        public Color Color

        {

            get { return (Color)GetValue(ColorProperty); }

            set { SetValue(ColorProperty, value); }

        }

        public byte Red

        {

            get { return (byte)GetValue(RedProperty); }

            set { SetValue(RedProperty, value); }

        }

        public byte Green

        {

            get { return (byte)GetValue(GreenProperty); }

            set { SetValue(GreenProperty, value); }

        }

        public byte Blue

        {

            get { return (byte)GetValue(BlueProperty); }

            set { SetValue(BlueProperty, value); }

        }

3.属性更改回调方法一个是右边颜色更改的回调，另外一个是三个滑动条的值变化的回调

//颜色变更的回调

        private static void OnColorChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)

        {

            ColorPickerControl pickerControl = (ColorPickerControl)obj;

            Color newColor = (Color)e.NewValue;

            Color oldColor = (Color)e.OldValue;

            pickerControl.Red = newColor.R;

            pickerControl.Blue = newColor.B;

            pickerControl.Green = newColor.G;

            pickerControl.OnColorChange(newColor,oldColor);//这边调用的是第四步的注册事件的方法！！！

        }

        //三个代表三原色滑动条的回调

        private static void OnRGBChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)

        {

            ColorPickerControl pickerControl = (ColorPickerControl)obj;

            Color color = pickerControl.Color;

            if (e.Property == RedProperty)

            {

                color.R = (byte)e.NewValue;

            }

            else if (e.Property == GreenProperty)

            {

                color.G = (byte)e.NewValue;

            }

            else

            {

                color.B = (byte)e.NewValue;

            }

            pickerControl.Color = color;

        }

4.注册事件，这里主要是颜色变化的时候，修改下面的一个textblock,从而做到显示当前颜色代码的提示

  //注册修改颜色的路由事件

         public static readonly RoutedEvent ColorEventRoutedEvent = EventManager.RegisterRoutedEvent("ColorChange",RoutingStrategy.Bubble,typeof(RoutedPropertyChangedEventHandler<Color>),typeof(ColorPickerControl));

         //事件包装,移除和添加事件

         public event RoutedPropertyChangedEventHandler<Color> ColorChange

         {

             add { AddHandler(ColorEventRoutedEvent,value); }

             remove { RemoveHandler(ColorEventRoutedEvent,value); }

         }

         private void OnColorChange(Color newColor,Color oldColor)

         {

             RoutedPropertyChangedEventArgs<Color> args = new RoutedPropertyChangedEventArgs<Color>(newColor,oldColor);

             args.RoutedEvent = ColorEventRoutedEvent;

             RaiseEvent(args);

         }

这里是用户空间的xaml代码

<UserControl x:Class="WpfApp1.UserControls.ColorPickerControl"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             mc:Ignorable="d"

             d:DesignHeight="300" d:DesignWidth="300"

             Name="colorPicker">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Slider Grid.Row="0" Name="RedSilder" Value="{Binding ElementName=colorPicker,Path=Red}" Minimum="0" Maximum="255"/>

        <Slider Grid.Row="1" Name="GreenSilder" Value="{Binding ElementName=colorPicker,Path=Green}" Minimum="0" Maximum="255"/>

        <Slider Grid.Row="2" Name="BlueSilder" Value="{Binding ElementName=colorPicker,Path=Blue}" Minimum="0" Maximum="255"/>

        <Rectangle Grid.Column="1" Grid.RowSpan="3" Stroke="Black" StrokeThickness="1" Width="50">

            <Rectangle.Fill>

                <SolidColorBrush Color="{Binding ElementName=colorPicker,Path=Color}"/>

            </Rectangle.Fill>

        </Rectangle>

    </Grid>

</UserControl>

最后其他地方添加这个空间的命名空间就可以使用这个控件了！

这里主要是简单的使用了自定义空间的相关知识实现了一个比较简单的功能，wpf的精髓还是太多太多，自定义控件这样的多元开放的编程实在是有意思。

巴特西

浅尝辄止WPF自定义用户控件(实现颜色调制器)

最新文章

热门文章