Windows phone 在自定义用户控件（UserControl）——ColorPicker

编码前

学习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.     
  9. public static readonly DependencyProperty RedProperty = DependencyProperty.Register(  
  10.     "Red", typeof (byte), typeof (ColorPicker), new PropertyMetadata(default(byte),OnColorRGBChanged));  
  11. public byte Red  
  12. {  
  13.     get { return (byte) GetValue(RedProperty); }  
  14.     set { SetValue(RedProperty, value); }  
  15. }  
  16.     
  17. public static readonly DependencyProperty BlueProperty = DependencyProperty.Register(  
  18.     "Blue", typeof(byte), typeof(ColorPicker), new PropertyMetadata(default(Byte),OnColorRGBChanged));  
  19. public byte Blue  
  20. {  
  21.     get { return (Byte) GetValue(BlueProperty); }  
  22.     set { SetValue(BlueProperty, value); }  
  23. }  
  24.     
  25. public static readonly DependencyProperty GreenProperty = DependencyProperty.Register(  
  26.     "Green", typeof (byte), typeof (ColorPicker), new PropertyMetadata(default(byte),OnColorRGBChanged));  
  27. public byte Green  
  28. {  
  29.     get { return (byte) GetValue(GreenProperty); }  
  30.     set { SetValue(GreenProperty, value); }  
  31. }  
  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.     
  7.     colorPicker.Red = (byte) newColor.R;  
  8.     colorPicker.Green = (byte) newColor.G;  
  9.     colorPicker.Blue = (byte) newColor.B;  
  10.       
  11. }  
  12. private static void OnColorRGBChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)  
  13. {  
  14.     ColorPicker colorPicker = (ColorPicker)d;  
  15.     Color newColor = colorPicker.Color;  
  16.     
  17.     if (e.Property == RedProperty)  
  18.         newColor.R = (byte)e.NewValue;  
  19.     else if (e.Property == BlueProperty)  
  20.         newColor.B = (byte)e.NewValue;  
  21.     else if (e.Property == GreenProperty)  
  22.         newColor.G = (byte)e.NewValue;  
  23.     
  24.     colorPicker.Color = newColor;  
  25. }  

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

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

此处的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.     
  7.     colorPicker.Red = (byte) newColor.R;  
  8.     colorPicker.Green = (byte) newColor.G;  
  9.     colorPicker.Blue = (byte) newColor.B;  
  10.     
  11.     colorPicker.RaiseColorChanged (newColor,oldColor);  
  12.  }  

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. 上面的路由事件可以使用一般的事件进行处理，包括设计你想控件使用者会获得的哪些信息
时间： 2024-10-13 11:38:49

Windows phone 在自定义用户控件（UserControl）——ColorPicker的相关文章

Windows Phone 8.1中自定义用户控件及如何调用用户控件

对于有些强迫症的我,还是作为程序员,在自己编程的世界里,凡事都要按照自己的意愿来安排布局或者设计动画等 等.虽说微软已经给我们封装了太多太多的控件和模板,但是难免有时候不会符合我们的意愿和要求,在这个时候就 需要我们自己来设计用户自定义控件. 首先需要在VS中创建自定义控件,所以需要在项目名右击->添加->新建项->选择User Control(用户控件)->添加 结合之前一篇提及到的XAML语法和开头的定义的说明,这边借自定义用户控件和引用自定义控件进一步说明. 之前博客中见到X

(九)ASP.NET自定义用户控件(2)

http://www.cnblogs.com/SkySoot/archive/2012/09/04/2670678.html 用户控件 在 .NET 里,可以通过两种方式把自己的控件插入到 Web 窗体框架中: 用户控件:它是一小段页面,可以包括静态 HTML 代码和 Web 服务器控件.用户控件的好处是一旦创建了它,就可以在同一个 Web 应用程序的多个页面重用它.用户控件可以加入自己的属性,事件和方法. 自定义服务器控件:它是被编译的类,它通过编程生成自己的 HTML .服务器控件总是预编译

Android自定义用户控件简单范例(一)

一款优秀的移动应用需要具有自己独特统一的风格,通常情况下UI设计师会根据产品需求和使用人群的特点,设计整体的风格,界面的元素和控件的互效果.而原生态的Android控件为开发人员提供的是最基本的积木元素,如果要准确地传递统一的视觉效果和交互体验,对控件的自定义使用是非常有必要的. 这篇文章通过一个简单的从Java后台程序中进行创建的示例来说明Android自定义控件的运行原理. <LinearLayout xmlns:android="http://schemas.android.com/

Android自定义用户控件简单范例(二)

对于完全由后台定制的控件,并不是很方便其他人的使用,因为我们常常需要看到控件放到xml界面上的效果,并根据效果进行布局的调整,这就需要一个更加标准的控件制作流程: 我们的自定义控件和其他的控件一样,应该写成一个类,而这个类的属性是是有自己来决定的. 我们要在res/values目录下建立一个attrs.xml的文件,并在此文件中增加对控件的属性的定义. 使用AttributeSet来完成控件类的构造函数,并在构造函数中将自定义控件类中变量与attrs.xml中的属性连接起来. 在自定义控件类中使

用户控件(UserControl)

简介 "用户控件"继承自UserControl,而UserControl继承自ContentControl,也就是内容控件UserControl和Window是一个层次上的,都有xaml和cs文件 流程 创建用户控件 写好用户控件 <UserControl x:Class="WpfDemo.UserControlDemo.OwnUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xa

在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件

在很多时候,我们做一些非常规化的界面的时候,往往需要创建一些用户控件,在其中绘制好一些基础的界面块,作为后续重复使用的一个单元,用户控件同时也可以封装处理一些简单的逻辑.在开发Winform各种类型项目,我都时不时需要定制一些特殊的用户控件,以方便在界面模块中反复使用.我们一般是在自定义的用户控件里面,添加各种各样的界面控件元素,或者封装一些特殊的函数处理共外部调用等.本篇随笔主要介绍基于DevExpress的Winform开发经验,介绍一个类似看板信息的用户控件,并在TabelLayout和S

Windows.Forms Panel 动态加载用户控件 UserControl

创建好一个Windows Forms程序,在创建好的程序中Form1添加一个Panel控件 如图: 然后再程序中添加一个用户控件 添加好以后再目录看见 就是创建好了,然后在用户控件随便拉几个按钮(为了主函数加载的时候显示效果) 然后再主函数的 Form1_Load 先在命名空间加上 :using UserControlTest.Controel.tabControel; 在New一个用户控件的类, private void Form1_Load(object sender, EventArgs

用户控件UserControl图片资源定位

MEF编程实现巧妙灵活松耦合组件化编程,一些细节需要花费不小心思去处理: 其中组件中若包含用户控件,且需要访问图片资源,那么需要做以下设置 1. 用户控件(usercontrol)所在工程目录下,创建图片目录,假设创建images文件夹,然后添加1.png图片 2. 设置1.png图片属性-->生成操作-->Resource 3. 创建一个目录Views,扔个用户控件a.xaml,拖放图片控件ImageBrush 4. 那么ImageBrush的图片资源属性应如下设置: <ImageBr

(八)ASP.NET自定义用户控件（1）

http://blog.csdn.net/laodao1/article/details/5897366 ASP.NET自定义控件组件开发 第一章:从一个简单的控件谈起 起始开发ASP.NET自定义控件不是那么的高深,当初我开始学的时候还有点恐惧,但是慢慢就好了.学习控件的开发技术,并不一定说以后要从事控件的开发,而是让我们深入的理解掌握ASP.NET内部的机理.你会发觉,当学习完控件开发技术后,你以后开发网站时有种得心应手的感觉.我不希望一上来就讲控件开始多么多么难啊,我会用一个演化的方法来讲