标签：style io color ar 使用 for sp strong div
编码前
学习Windows phone自定义用户控件，在《WPF编程宝典》学习的小例子。并根据windows phone稍微的不同，做了点修改。ColorPicker（颜色拾取器）：拥有三个Slider代表颜色中的RGB的值，可以进行调节各自的值。还有一个显示颜色的区域，它的值可以设置，也可以随着三个Slider值得变化而变化。其中每个Slider值也要根据颜色区域而变化。还要提供一个能由外部看到的可注册事件。
依赖属性：
设置四个依赖属性：分别为ColorProperty，RedProperty，GreenProperty，BlueProperty。
标准属性：为了访问容易，添加标准的属性封装器，并且好在xaml中使用绑定。分别为Color，Red，Green，Blue。
路由事件：为了当颜色变化时，控件外可以捕捉到，定义了一个路由事件。
编码
- 创建用户自定义控件（UserControl），命名为ColorPicker
- 插入四个依赖属性以及一般属性：
-
public static readonly DependencyProperty ColorProperty = DependencyProperty.Register(
-
"Color", typeof (Color), typeof (ColorPicker), new PropertyMetadata(default(Color),OnColorChanged));
-
public Color Color
-
{
-
get { return (Color) GetValue(ColorProperty); }
-
set { SetValue(ColorProperty, value); }
-
}
-
-
public static readonly DependencyProperty RedProperty = DependencyProperty.Register(
-
"Red", typeof (byte), typeof (ColorPicker), new PropertyMetadata(default(byte),OnColorRGBChanged));
-
public byte Red
-
{
-
get { return (byte) GetValue(RedProperty); }
-
set { SetValue(RedProperty, value); }
-
}
-
-
public static readonly DependencyProperty BlueProperty = DependencyProperty.Register(
-
"Blue", typeof(byte), typeof(ColorPicker), new PropertyMetadata(default(Byte),OnColorRGBChanged));
-
public byte Blue
-
{
-
get { return (Byte) GetValue(BlueProperty); }
-
set { SetValue(BlueProperty, value); }
-
}
-
-
public static readonly DependencyProperty GreenProperty = DependencyProperty.Register(
-
"Green", typeof (byte), typeof (ColorPicker), new PropertyMetadata(default(byte),OnColorRGBChanged));
-
public byte Green
-
{
-
get { return (byte) GetValue(GreenProperty); }
-
set { SetValue(GreenProperty, value); }
-
}
|
- 每个属性更改的时候有一个回掉函数。RGB值更改时使用同一个回掉函数
-
private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-
{
-
ColorPicker colorPicker = (ColorPicker) d;
-
Color newColor = (Color)e.NewValue;
-
Color oldColor = (Color) e.OldValue;
-
-
colorPicker.Red = (byte) newColor.R;
-
colorPicker.Green = (byte) newColor.G;
-
colorPicker.Blue = (byte) newColor.B;
-
-
}
-
private static void OnColorRGBChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-
{
-
ColorPicker colorPicker = (ColorPicker)d;
-
Color newColor = colorPicker.Color;
-
-
if (e.Property == RedProperty)
-
newColor.R = (byte)e.NewValue;
-
else if (e.Property == BlueProperty)
-
newColor.B = (byte)e.NewValue;
-
else if (e.Property == GreenProperty)
-
newColor.G = (byte)e.NewValue;
-
-
colorPicker.Color = newColor;
-
}
|
此时的公开属性已经写完了，如果RGB属性或是Color属性变化，也会引起另一方值得改变
- 定义路由事件
-
public event RoutedPropertyChangedEventHandler<Color> ColorChanged;
-
-
protected void RaiseColorChanged(Color oldColor,Color newColor)
-
{
-
RoutedPropertyChangedEventHandler<Color> temp = ColorChanged;
-
-
if (temp != null)
-
{
-
temp(this, new RoutedPropertyChangedEventArgs<Color>(oldColor, newColor));
-
}
-
}
-
|
此处的ColorChanged就是控件公开的路由事件。当一个对象订阅了事件，RaiseColorChanged可以对象相应的操作。在什么时候引发RaiseColorChanged，我们将其放在OnColorChanged函数中，及当颜色变化时，查看是否有对象注册了事件，有的话则执行相应的操作。
-
private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-
{
-
ColorPicker colorPicker = (ColorPicker) d;
-
Color newColor = (Color)e.NewValue;
-
Color oldColor = (Color) e.OldValue;
-
-
colorPicker.Red = (byte) newColor.R;
-
colorPicker.Green = (byte) newColor.G;
-
colorPicker.Blue = (byte) newColor.B;
-
-
colorPicker.RaiseColorChanged (newColor,oldColor);
-
}
|
ColorPicker的属性，事件已经定义好了。下面来设计一下他的外观。
- 在ColorPicker.xaml中来设计控件的外观。
-
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
-
<Grid.RowDefinitions>
-
<RowDefinition Height="Auto"/>
-
<RowDefinition Height="Auto"/>
-
<RowDefinition Height="Auto"/>
-
</Grid.RowDefinitions>
-
<Grid.ColumnDefinitions>
-
<ColumnDefinition Width="*"/>
-
<ColumnDefinition Width="Auto"/>
-
</Grid.ColumnDefinitions>
-
<Slider Minimum="0" Maximum="255" Value="{Binding Red,Mode=TwoWay}"/>
-
<Slider Grid.Row="1" Minimum="0" Maximum="255" Value="{Binding Blue,Mode=TwoWay}"/>
-
<Slider Grid.Row="2" Minimum="0" Maximum="255" Value="{Binding Green,Mode=TwoWay}"/>
-
<Rectangle Grid.Column="1" Grid.RowSpan="3" Width="100" Height="100" Stroke="White" StrokeThickness="2">
-
<Rectangle.Fill>
-
<SolidColorBrush Color="{Binding Color}"/>
-
</Rectangle.Fill>
-
</Rectangle>
-
</Grid>
|
其中三个Slider的值设为0——255（一个字节可以接受的数值）。绑定的模式为TwoWay，也就是说颜色变化会影响到Slider值得变化，同样当改变Slider值得时候，颜色相应RGB值也将改变，从而改变颜色。
- 使用ColorPicker，在使用前要引入控件所在的命名空间。例如是定义在StudyTest空间下，因为和MainPage在同一个程序集中，所以引入命名空间映射到MainPage.xaml中即可：
-
xmlns:local="clr-namespace:StudyTest">
|
若是在不同的程序集中，还要加上程序集信息，例如：
|
xmlns:local="clr-namespace:StudyTest;assembly=...">
|
- 使用控件：
-
<local:ColorPicker Margin="12" Color="Turquoise" ColorChanged="ColorPicker_OnColorChanged"/>
|
-
private void ColorPicker_OnColorChanged(object sender, RoutedPropertyChangedEventArgs<Color> e)
-
{
-
if(this.block!=null)
-
this.block.Text=(string.Format("OldColor:{0}\n NewColor:{1}", e.OldValue, e.NewValue));
-
}
|
使用到了路由事件ColorChanged，并在一个Textblock中显示颜色的相关信息
编码后
- 上面定义的用户控件是固定外观的，下面可以将其改成无外观的控件（外观可以通过改变他的可视化树来进行自定义），以获得更大的灵活性。（下一篇会写到）
- 上面的路由事件可以使用一般的事件进行处理，包括设计你想控件使用者会获得的哪些信息
Windows phone 在自定义用户控件（UserControl）——ColorPicker
标签：style io color ar 使用 for sp strong div
原文地址：http://www.cnblogs.com/Monte/p/4056905.html
