F6 Team

之前有寫一篇"利用ASP.NET AJAX的SliderExtender來做一個Color Picker的小工具"

今天教大家如何利用Silverlight的Slider控制項來做Color Picker小工具

ColorPicker.xaml

<UserControl x:Class="SilverlightApplication1.ColorPicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="0.117*"/> <RowDefinition Height="0.133*"/> <RowDefinition Height="0.13*"/> <RowDefinition Height="0.137*"/> <RowDefinition Height="0.483*"/> </Grid.RowDefinitions> <Slider HorizontalAlignment="Left" Margin="72,8,0,8" Width="106" Minimum="0" Maximum="255" x:Name="sliAlpha" ValueChanged="Slider_ValueChanged"/> <Slider HorizontalAlignment="Left" Margin="72,8,0,10" Width="106" Minimum="0" Maximum="255" Grid.Row="1" x:Name="sliR" ValueChanged="Slider_ValueChanged" /> <Slider HorizontalAlignment="Left" Margin="72,8,0,8" Width="106" Minimum="0" Maximum="255" Grid.Row="2" x:Name="sliG" ValueChanged="Slider_ValueChanged" /> <TextBox Margin="182,8,128,0" Grid.Row="4" Text="#00000000" TextWrapping="Wrap" VerticalAlignment="Top" Height="27" x:Name="txtColor"/> <Rectangle HorizontalAlignment="Left" Margin="8,8,0,54" Width="170" Grid.Row="4" Fill="#00000000" Stroke="#FF000000" x:Name="recColor" /> <Slider HorizontalAlignment="Left" Margin="72,8,0,10" Width="106" Minimum="0" Maximum="255" x:Name="sliB" ValueChanged="Slider_ValueChanged" Grid.Row="3" /> <TextBlock HorizontalAlignment="Left" Margin="8,8,0,8" Width="51" Text="Alpha" TextWrapping="Wrap" TextAlignment="Right"/> <TextBlock HorizontalAlignment="Left" Margin="8,8,0,13" Width="51" Text="R" TextWrapping="Wrap" Grid.Row="1" TextAlignment="Right"/> <TextBlock HorizontalAlignment="Left" Margin="8,8,0,12" Width="51" Text="G" TextWrapping="Wrap" Grid.Row="2" TextAlignment="Right"/> <TextBlock HorizontalAlignment="Left" Margin="8,8,0,14" Width="51" Text="B" TextWrapping="Wrap" Grid.Row="3" TextAlignment="Right"/> <TextBox Margin="182,4,172,4" Text="0" TextWrapping="Wrap" x:Name="txtAlpha" /> <TextBox Margin="182,6,172,7" Text="0" TextWrapping="Wrap" x:Name="txtR" Grid.Row="1"/> <TextBox Margin="182,6,172,6" Text="0" TextWrapping="Wrap" x:Name="txtG" Grid.Row="2"/> <TextBox Margin="182,6,172,8" Text="0" TextWrapping="Wrap" x:Name="txtB" Grid.Row="3"/> </Grid> </UserControl>

ColorPicker.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 SilverlightApplication1 { public partial class ColorPicker : UserControl { public ColorPicker() { InitializeComponent(); } private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { switch (((Slider)sender).Name) { case "sliAlpha": this.txtAlpha.Text = (Convert.ToInt32(this.sliAlpha.Value)).ToString(); break; case "sliR": this.txtR.Text = (Convert.ToInt32(this.sliR.Value)).ToString(); break; case "sliG": this.txtG.Text = (Convert.ToInt32(this.sliG.Value)).ToString(); break; case "sliB": this.txtB.Text = (Convert.ToInt32(this.sliB.Value)).ToString(); break; } Color c = Color.FromArgb((byte)this.sliAlpha.Value, (byte)this.sliR.Value, (byte)this.sliG.Value, (byte)this.sliB.Value); this.recColor.Fill = new SolidColorBrush(c); this.txtColor.Text = c.ToString(); } } }

執行結果：

我在網路上也有找到一個寫的更強的Color Picker小工具,如下圖所示:

資料來源:
http://pagebrooks.com/archive/2008/02/25/building-a-silverlight-color-picker-control.aspx