1.安装visual Studio 2008 简体中文版
http://www.twt.edu.cn/software/detail.php?id=4834 (天大校内)
http://www.weste.net/2008/8-12/10120982552.html (天大校外)
2.安装visual Studio 2008 sp1补丁包
http://www.weste.net/2008/8-12/10120982552.html
3.安装Silverlight3_sdk.exe
4.安装Silverlight3_Tools for visual studio 2008
5.安装Microsoft Expression Blend 2
6.安装Microsoft Expression Blend 2 sp1补丁包
7.打开visual Studio 2008,新建项目——Silverlight——Silverlight应用程序,填写项目名称为ColorPicker,选择项目路径,点击确定。
8.将MainPage.xaml改为如下内容:
<UserControl x:Class="ColorPicker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="260" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="1" x:Name="PreviewColor"
Fill="#FF6600" Margin="10" Stroke="#666666"
StrokeThickness="2" />
<StackPanel Grid.Row="1" Grid.Column="1">
<TextBlock FontSize="12">Color</TextBlock>
<TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600"
Margin="10,5" FontSize="11" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
VerticalAlignment="Center">
<TextBlock Text="Alpha" FontSize="12" Margin="10,15,0,0" />
<Slider x:Name="AlphaSlider" Margin="20,0,10,0" Maximum="255"
ValueChanged="RedSlider_ValueChanged"/>
<TextBlock Text="Red" FontSize="12" Margin="10,15,0,0" />
<Slider x:Name="RedSlider" Margin="20,0,10,0" Maximum="255"
ValueChanged="RedSlider_ValueChanged"/>
<TextBlock Text="Green" FontSize="12" Margin="10,15,0,0" />
<Slider x:Name="GreenSlider" Margin="20,0,10,0" Maximum="255"
ValueChanged="RedSlider_ValueChanged"/>
<TextBlock Text="Blue" FontSize="12" Margin="10,15,0,0" />
<Slider x:Name="BlueSlider" Margin="20,0,10,0" Maximum="255"
ValueChanged="RedSlider_ValueChanged"/>
</StackPanel>
</Grid>
</UserControl>
9.将MainPage.xaml.cs改为如下内容:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace ColorPicker
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.AlphaSlider.Value = 255;
this.RedSlider.Value = 255;
this.GreenSlider.Value = 102;
this.BlueSlider.Value = 0;
}
private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
Color color = new Color();
color = Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value,
(byte)GreenSlider.Value, (byte)BlueSlider.Value);
PreviewColor.Fill = new SolidColorBrush(color);
HexColor.Text = color.ToString();
}
}
}
10.点击F5,运行程序,运行效果如下图所示。
总结:本代码实现一个颜色拾取器,利用的技术有Grid布局,Slider控件,Color类等。
ps:Slider控件存在bug,当添加了ValueChanged处理函数后,其初始Value属性值的代码必须写在cs文件中,如写在xaml文件中会报异常。