Windows phone 自定义用户控件(UserControl)——ColorPicker

时间:2024-10-02 19:35:56

编码前

学习Windows phone自定义用户控件,在《WPF编程宝典》学习的小例子。并根据windows phone稍微的不同,做了点修改。ColorPicker(颜色拾取器):拥有三个Slider代表颜色中的RGB的值,可以进行调节各自的值。还有一个显示颜色的区域,它的值可以设置,也可以随着三个Slider值得变化而变化。其中每个Slider值也要根据颜色区域而变化。还要提供一个能由外部看到的可注册事件。

依赖属性:

设置四个依赖属性:分别为ColorProperty,RedProperty,GreenProperty,BlueProperty。

标准属性:为了访问容易,添加标准的属性封装器,并且好在xaml中使用绑定。分别为Color,Red,Green,Blue。

路由事件:为了当颜色变化时,控件外可以捕捉到,定义了一个路由事件。

编码

  1. 创建用户自定义控件(UserControl),命名为ColorPicker
  2. 插入四个依赖属性以及一般属性:
  1. public static readonly DependencyProperty ColorProperty = DependencyProperty.Register(  
  2.     "Color", typeof (Color), typeof (ColorPicker), new PropertyMetadata(default(Color),OnColorChanged));  
  3. public Color Color  
  4. {  
  5.     get { return (Color) GetValue(ColorProperty); }  
  6.     set { SetValue(ColorProperty, value); }  
  7. }  
  8. public static readonly DependencyProperty RedProperty = DependencyProperty.Register(  
  9.     "Red", typeof (byte), typeof (ColorPicker), new PropertyMetadata(default(byte),OnColorRGBChanged));  
  10. public byte Red  
  11. {  
  12.     get { return (byte) GetValue(RedProperty); }  
  13.     set { SetValue(RedProperty, value); }  
  14. }  
  15. public static readonly DependencyProperty BlueProperty = DependencyProperty.Register(  
  16.     "Blue", typeof(byte), typeof(ColorPicker), new PropertyMetadata(default(Byte),OnColorRGBChanged));  
  17. public byte Blue  
  18. {  
  19.     get { return (Byte) GetValue(BlueProperty); }  
  20.     set { SetValue(BlueProperty, value); }  
  21. }  
  22. public static readonly DependencyProperty GreenProperty = DependencyProperty.Register(  
  23.     "Green", typeof (byte), typeof (ColorPicker), new PropertyMetadata(default(byte),OnColorRGBChanged));  
  24. public byte Green  
  25. {  
  26.     get { return (byte) GetValue(GreenProperty); }  
  27.     set { SetValue(GreenProperty, value); }  
  28. }  
  1. 每个属性更改的时候有一个回掉函数。RGB值更改时使用同一个回掉函数
  1. private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)  
  2. {  
  3.     ColorPicker colorPicker = (ColorPicker) d;  
  4.     Color newColor = (Color)e.NewValue;  
  5.     Color oldColor = (Color) e.OldValue;  
  6.     colorPicker.Red = (byte) newColor.R;  
  7.     colorPicker.Green = (byte) newColor.G;  
  8.     colorPicker.Blue = (byte) newColor.B;  
  9. }  
  10. private static void OnColorRGBChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)  
  11. {  
  12.     ColorPicker colorPicker = (ColorPicker)d;  
  13.     Color newColor = colorPicker.Color;  
  14.     if (e.Property == RedProperty)  
  15.         newColor.R = (byte)e.NewValue;  
  16.     else if (e.Property == BlueProperty)  
  17.         newColor.B = (byte)e.NewValue;  
  18.     else if (e.Property == GreenProperty)  
  19.         newColor.G = (byte)e.NewValue;  
  20.     colorPicker.Color = newColor;  
  21. }  

此时的公开属性已经写完了,如果RGB属性或是Color属性变化,也会引起另一方值得改变

  1. 定义路由事件
  1. public event RoutedPropertyChangedEventHandler<Color> ColorChanged;  
  2. protected void RaiseColorChanged(Color oldColor,Color newColor)  
  3. {  
  4.     RoutedPropertyChangedEventHandler<Color> temp = ColorChanged;  
  5.     if (temp != null)  
  6.     {  
  7.         temp(thisnew RoutedPropertyChangedEventArgs<Color>(oldColor, newColor));  
  8.     }  
  9.  }  

此处的ColorChanged就是控件公开的路由事件。当一个对象订阅了事件,RaiseColorChanged可以对象相应的操作。在什么时候引发RaiseColorChanged,我们将其放在OnColorChanged函数中,及当颜色变化时,查看是否有对象注册了事件,有的话则执行相应的操作。

  1. private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)  
  2. {  
  3.     ColorPicker colorPicker = (ColorPicker) d;  
  4.     Color newColor = (Color)e.NewValue;  
  5.     Color oldColor = (Color) e.OldValue;  
  6.     colorPicker.Red = (byte) newColor.R;  
  7.     colorPicker.Green = (byte) newColor.G;  
  8.     colorPicker.Blue = (byte) newColor.B;  
  9.     colorPicker.RaiseColorChanged (newColor,oldColor);  
  10.  }  

ColorPicker的属性,事件已经定义好了。下面来设计一下他的外观。

  1. 在ColorPicker.xaml中来设计控件的外观。
  1. <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="Auto"/>  
  4.         <RowDefinition Height="Auto"/>  
  5.         <RowDefinition Height="Auto"/>  
  6.     </Grid.RowDefinitions>  
  7.     <Grid.ColumnDefinitions>  
  8.         <ColumnDefinition Width="*"/>  
  9.         <ColumnDefinition Width="Auto"/>  
  10.     </Grid.ColumnDefinitions>  
  11.     <Slider Minimum="0" Maximum="255" Value="{Binding Red,Mode=TwoWay}"/>  
  12.     <Slider Grid.Row="1" Minimum="0" Maximum="255" Value="{Binding Blue,Mode=TwoWay}"/>  
  13.     <Slider Grid.Row="2" Minimum="0" Maximum="255" Value="{Binding Green,Mode=TwoWay}"/>  
  14.     <Rectangle Grid.Column="1" Grid.RowSpan="3" Width="100" Height="100" Stroke="White" StrokeThickness="2">  
  15.         <Rectangle.Fill>  
  16.             <SolidColorBrush Color="{Binding Color}"/>  
  17.         </Rectangle.Fill>  
  18.     </Rectangle>  
  19. </Grid>

其中三个Slider的值设为0——255(一个字节可以接受的数值)。绑定的模式为TwoWay,也就是说颜色变化会影响到Slider值得变化,同样当改变Slider值得时候,颜色相应RGB值也将改变,从而改变颜色。

  1. 使用ColorPicker,在使用前要引入控件所在的命名空间。例如是定义在StudyTest空间下,因为和MainPage在同一个程序集中,所以引入命名空间映射到MainPage.xaml中即可:
  1. xmlns:local="clr-namespace:StudyTest">  

若是在不同的程序集中,还要加上程序集信息,例如:

xmlns:local="clr-namespace:StudyTest;assembly=...">

  1. 使用控件:
  1. <local:ColorPicker Margin="12"  Color="Turquoise" ColorChanged="ColorPicker_OnColorChanged"/>  
  1. private void ColorPicker_OnColorChanged(object sender, RoutedPropertyChangedEventArgs<Color> e)  
  2. {  
  3.     if(this.block!=null)  
  4.         this.block.Text=(string.Format("OldColor:{0}\n NewColor:{1}", e.OldValue, e.NewValue));  
  5. }  

使用到了路由事件ColorChanged,并在一个Textblock中显示颜色的相关信息

编码后

  1. 上面定义的用户控件是固定外观的,下面可以将其改成无外观的控件(外观可以通过改变他的可视化树来进行自定义),以获得更大的灵活性。(下一篇会写到)
  2. 上面的路由事件可以使用一般的事件进行处理,包括设计你想控件使用者会获得的哪些信息