在[WPF][C#]一起來玩色吧!!~在C#中使用不同的方式來設定顏色一文中介紹了怎麼使用C#來設定顏色，但是回過頭來看看Silverlight~~
啥密!!?BrushConverter?沒有!!ColorConverter?沒有!!沒錯!!!!在Silverlight4裡面還沒有這些東西(而且目前我在Silverlight 5 Beta中也還找不到這兩個東西)~
既然原生的資源中沒有，身為一個把寫程式當家常便飯的工程師，那就自己來動手寫一個吧!!~
在[WPF][C#]一起來玩色吧!!~在C#中使用不同的方式來設定顏色一文中介紹了怎麼使用C#來設定顏色，但是回過頭來看看Silverlight~~
啥密!!?BrushConverter?沒有!!ColorConverter?沒有!!沒錯!!!!在Silverlight4裡面還沒有這些東西(而且目前我在Silverlight 5 Beta中也還找不到這兩個東西
)~
既然原生的資源中沒有，身為一個把寫程式當家常便飯的工程師，那就自己來動手寫一個吧!!~
如果不依靠Converter來完成任務的話，其實在Silverlihgt中和WPF中直接硬轉的作法是相同的。但是這次我要來介紹另外兩種作法~
第一個是自己實作一個以IValueConverter為基底的類別，來進行字串和Color類別的轉換，程式碼如下：
另一個方式，則是透過靜態方法，利用XAML產生物件，再從物件身上取出顏色，程式碼如下：
using System;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Shapes;
namespace SL_FunWithColors
{
public class XamlColorConverter
{
public static Color ConvertFromString( string colorString )
{
Color color;
try
{
//透過XamlReader讀入一段由程Xaml描述的Line物件，並對其設定填色
Line line = ( Line ) XamlReader.Load( "<Line xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" Fill=\""
+ colorString + "\" />" );
//反過來由Line物件取得填色屬性
color = ( Color ) line.Fill.GetValue( SolidColorBrush.ColorProperty );
}
catch
{
//若輸入不合法的值的話會回傳預設的顏色(透明的黑色)
color = new Color();
}
return color;
}
}
}
OK~有了這兩個好幫手，就可以做出下面的範例啦!!
不過這邊有一點要注意，透過Reflection取得Colors中顏色名稱的方式，顏色的大小寫必需要完全相符才行，但是透過XAML轉換則不用。
來看看範例的原始碼吧~
<UserControl x:Class="SL_FunWithColors.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"
xmlns:theme="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.ExpressionDark"
mc:Ignorable="d" Width="Auto" Height="Auto" d:DesignWidth="800" d:DesignHeight="600">
<theme:ExpressionDarkTheme Background="Transparent">
<Border BorderThickness="2" CornerRadius="10" BorderBrush="#FF646464" Background="White"
Margin="10">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.379*" />
<ColumnDefinition Width="0.252*" />
<ColumnDefinition Width="0.369*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="0.33*" />
<RowDefinition Height="0.33*" />
<RowDefinition Height="0.33*" />
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap"
Text="Silverlight自訂ColorConverter範例" VerticalAlignment="Center"
FontSize="24" FontWeight="Bold" Foreground="#FF646464" Grid.ColumnSpan="3" />
<Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="10,0"
Grid.ColumnSpan="3" />
<TextBlock TextWrapping="Wrap" VerticalAlignment="Top" Margin="10,10,0,0"
Grid.Row="1" FontSize="18.667" FontWeight="Bold" Foreground="#FF646464"
Text="不使用任何Converter" d:LayoutOverrides="Width" Grid.ColumnSpan="3" />
<TextBlock TextWrapping="Wrap" VerticalAlignment="Top" Margin="10,10,0,0"
Grid.Row="2" FontSize="18.667" FontWeight="Bold" Foreground="#FF646464"
d:LayoutOverrides="Width" Grid.ColumnSpan="3"><Run Text="使用" /><Run
Text="自訂的" /><Run Text="ColorConverter" /></TextBlock>
<Grid Margin="25,0,20,20" Grid.Row="1" VerticalAlignment="Bottom" Height="69">
<Grid.RowDefinitions>
<RowDefinition Height=".5*" />
<RowDefinition Height=".5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.25*" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Alpha" FontWeight="Bold" FontSize="16"
Foreground="#FF646464" HorizontalAlignment="Center"
VerticalAlignment="Center" />
<TextBlock TextWrapping="Wrap" Text="Red" FontWeight="Bold" FontSize="16"
Foreground="#FF646464" HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Column="1" />
<TextBlock TextWrapping="Wrap" Text="Green" FontWeight="Bold" FontSize="16"
Foreground="#FF646464" HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Column="2" />
<TextBlock TextWrapping="Wrap" Text="Blue" FontWeight="Bold" FontSize="16"
Foreground="#FF646464" HorizontalAlignment="Center"
VerticalAlignment="Center" Grid.Column="3" />
<TextBox x:Name="txtColor1_Alpha" TextWrapping="Wrap" FontSize="16" Text="FF"
Grid.Row="1" Margin="3,0" />
<TextBox x:Name="txtColor1_Red" TextWrapping="Wrap" FontSize="16" Text="00"
Grid.Column="1" Margin="3,0" Grid.Row="1" />
<TextBox x:Name="txtColor1_Green" TextWrapping="Wrap" FontSize="16" Text="00"
Grid.Column="2" Margin="3,0" Grid.Row="1" />
<TextBox x:Name="txtColor1_Blue" TextWrapping="Wrap" FontSize="16" Text="00"
Grid.Column="3" Margin="3,0" Grid.Row="1" />
</Grid>
<StackPanel Orientation="Vertical" Grid.Row="3" Margin="30,0,20,20"
d:LayoutOverrides="Height" VerticalAlignment="Bottom">
<TextBlock TextWrapping="Wrap" Text="色碼或色票名稱" VerticalAlignment="Center"
HorizontalAlignment="Center" FontWeight="Bold" FontSize="16"
Foreground="#FF646464" Margin="0,0,0,5" />
<TextBox x:Name="txtColor3" TextWrapping="Wrap" VerticalAlignment="Center"
Height="32" FontSize="16" Text="#FFFFFFFF" />
</StackPanel>
<Rectangle x:Name="recColor1" Fill="Black" Grid.Row="1" Stroke="Black"
Margin="20,30,20,10" RadiusX="10" StrokeThickness="3" RadiusY="10"
Grid.Column="2" />
<Rectangle x:Name="recColor2" Fill="Red" Grid.Row="2" Stroke="Black"
Margin="20,30,20,10" RadiusX="10" StrokeThickness="3" RadiusY="10"
Grid.Column="2" />
<Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="10,0"
Grid.Row="1" Grid.ColumnSpan="3" />
<Button x:Name="btnApplyColor1" Content="套用顏色 ->" HorizontalAlignment="Center"
VerticalAlignment="Bottom" Grid.Row="1" Width="120" Height="32"
FontWeight="Bold" FontSize="14.667" Click="btnApplyColor1_Click"
Grid.Column="1" Margin="0,0,0,30" />
<Button x:Name="btnApplyColor2" Content="套用顏色 ->" HorizontalAlignment="Center"
Grid.Row="2" Width="120" FontWeight="Bold" FontSize="14.667"
Click="btnApplyColor2_Click" Grid.Column="1" Margin="0,0,0,30" Height="32"
VerticalAlignment="Bottom" />
<Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="10,0"
Grid.Row="2" Grid.ColumnSpan="3" />
<TextBlock TextWrapping="Wrap" VerticalAlignment="Top" Margin="10,10,0,0"
Grid.Row="3" FontSize="18.667" FontWeight="Bold" Foreground="#FF646464"
Grid.ColumnSpan="3" d:LayoutOverrides="Width" Text="使用自訂的XamlColorConverter" />
<Button x:Name="btnApplyColor3" Content="套用顏色 ->" HorizontalAlignment="Center"
Grid.Row="3" Width="120" FontWeight="Bold" FontSize="14.667" Grid.Column="1"
Margin="0,0,0,30" Height="32" VerticalAlignment="Bottom"
Click="btnApplyColor3_Click" />
<Rectangle x:Name="recColor3" Fill="White" Grid.Row="3" Stroke="Black"
Margin="20,30,20,10" RadiusX="10" StrokeThickness="3" RadiusY="10"
Grid.Column="2" />
<StackPanel Orientation="Vertical" Grid.Row="2" Margin="30,0,20,20"
VerticalAlignment="Bottom">
<TextBlock TextWrapping="Wrap" Text="色碼或色票名稱" VerticalAlignment="Center"
HorizontalAlignment="Center" FontWeight="Bold" FontSize="16"
Foreground="#FF646464" Margin="0,0,0,5" />
<TextBox x:Name="txtColor2" TextWrapping="Wrap" VerticalAlignment="Center"
Height="32" FontSize="16" Text="#FFFF0000" />
</StackPanel>
</Grid>
</Border>
</theme:ExpressionDarkTheme>
</UserControl>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace SL_FunWithColors
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btnApplyColor1_Click( object sender , System.Windows.RoutedEventArgs e )
{
try
{
recColor1.Fill = new SolidColorBrush( Color.FromArgb(
Convert.ToByte( txtColor1_Alpha.Text , 16 ) ,
Convert.ToByte( txtColor1_Red.Text , 16 ) ,
Convert.ToByte( txtColor1_Green.Text , 16 ) ,
Convert.ToByte( txtColor1_Blue.Text , 16 ) ) );
}
catch
{
MessageBox.Show( "色碼或顏色設定錯誤" );
}
}
private void btnApplyColor2_Click( object sender , System.Windows.RoutedEventArgs e )
{
Color color = ( Color ) new ColorConverter().Convert( txtColor2.Text , null , null , null );
recColor2.Fill = new SolidColorBrush( color );
}
private void btnApplyColor3_Click( object sender , RoutedEventArgs e )
{
recColor3.Fill = new SolidColorBrush( XamlColorConverter.ConvertFromString( txtColor3.Text ) );
}
}
}
以上~希望能幫到有需要的人~
最後，奉上專案原始檔，請自行服用：
