[WPF][C#] 一起來玩色吧!!~在C#中使用不同的方式來設定顏色

2011-04-27

8955
0
C#
2013-07-15

通常負責程式設計的工程師和負責使用者介面設計的設計師在對顏色的定義上應該有極大的差異(眼前的黑是哪個黑?你說的白是什麼白?天空藍?)
這個時候，能有一個共通的語言或是溝通方式就顯得特別的重要啦~而設計師們習慣使用的，一般應該都是HTML色碼；剛好在XAML中也是使用類似HTML色碼的格式，只是多了一個Alpha Channel，但是要透過C#呢?
所以，這次就來介紹怎麼在C#中，讓程式設計師也能輕鬆的使用各種不同的方式來設定顏色!!

通常負責程式設計的工程師和負責使用者介面設計的設計師在對顏色的定義上應該有極大的差異(眼前的黑是哪個黑?你說的白是什麼白?天空藍?)

這個時候，能有一個共通的語言或是溝通方式就顯得特別的重要啦~而設計師們習慣使用的，一般應該都是HTML色碼；剛好在XAML中也是使用類似HTML色碼的格式，只是多了一個Alpha Channel，但是要透過C#呢?

所以，這次就來介紹怎麼在C#中，讓程式設計師也能輕鬆的使用各種不同的方式來設定顏色!!

先來看看下面的範例：

(*若無法正常瀏覽本文WPF版範例，煩請參考[Windows7]使用IE9、FireFox與Chrome瀏覽WPF Browser Application(.XBAP)的方式一文調整瀏覽器設定)

接著來看看原始碼，透過原始碼來了解其中的奧妙吧~

Page1.xaml


<Page x:Class="Wpf_ColorConverter.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="640"
        ShowsNavigationUI="False" Title="Page1">
    <Border BorderThickness="2" CornerRadius="10" Background="White" BorderBrush="#FF646464">
        <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="ColorConverter &amp; BrushConverter 範例" 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,48.106,0" Grid.Row="1" FontSize="18.667" FontWeight="Bold"
                    Foreground="#FF646464" Text="不使用任何Converter" d:LayoutOverrides="Width" Grid.ColumnSpan="3" />
            <TextBlock TextWrapping="Wrap" Text="使用ColorConverter" VerticalAlignment="Top" Margin="10,10,55.096,0" Grid.Row="2" FontSize="18.667"
                    FontWeight="Bold" Foreground="#FF646464" d:LayoutOverrides="Width" Grid.ColumnSpan="3" />
            <TextBlock TextWrapping="Wrap" VerticalAlignment="Top" Margin="10,10,52.546,0" Grid.Row="3" FontSize="18.667" FontWeight="Bold"
                    Foreground="#FF646464" Text="使用BrushConverter" d:LayoutOverrides="Width" Grid.ColumnSpan="3" />
            <UniformGrid Margin="25,0,10,20" Grid.Row="1" VerticalAlignment="Bottom" Rows="2" Columns="4">
                <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" />
                <TextBlock TextWrapping="Wrap" Text="Green" FontWeight="Bold" FontSize="16" Foreground="#FF646464" HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                <TextBlock TextWrapping="Wrap" Text="Blue" FontWeight="Bold" FontSize="16" Foreground="#FF646464" HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                <TextBox x:Name="txtColor1_Alpha" TextWrapping="Wrap" Height="32" FontSize="16" Width="45" Text="FF" />
                <TextBox x:Name="txtColor1_Red" TextWrapping="Wrap" Height="32" FontSize="16" Width="45" Text="00" />
                <TextBox x:Name="txtColor1_Green" TextWrapping="Wrap" Height="32" FontSize="16" Width="45" Text="00" />
                <TextBox x:Name="txtColor1_Blue" TextWrapping="Wrap" Height="32" FontSize="16" Width="45" Text="00" />
            </UniformGrid>
            <StackPanel Orientation="Vertical" Grid.Row="2" VerticalAlignment="Bottom" Margin="30,0,20,20">
                <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>
            <StackPanel Margin="30,0,20,20" Orientation="Vertical" Grid.Row="3" 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="White" />
            </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 x:Name="recColor3" Fill="White" Grid.Row="3" 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" />
            <Rectangle Fill="#FF646464" Height="2" VerticalAlignment="Bottom" Margin="10,0" Grid.Row="2" Grid.ColumnSpan="3" />
            <Button x:Name="btnApplyColor1" Content="套用顏色 -&gt;" 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="套用顏色 -&gt;" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.Row="2" Width="120"
                    Height="32" FontWeight="Bold" FontSize="14.667" Click="btnApplyColor2_Click" Grid.Column="1" Margin="0,0,0,30" />
            <Button x:Name="btnApplyColor3" Content="套用顏色 -&gt;" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.Row="3" Width="120"
                    Height="32" FontWeight="Bold" FontSize="14.667" Click="btnApplyColor3_Click" Grid.Column="1" Margin="0,0,0,30" />
        </Grid>
    </Border>
</Page>

重頭戲在下面，這次分別介紹三種顏色轉換的方式!!

Page1.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;


namespace Wpf_ColorConverter
{
    /// <summary>
    /// Interaction logic for Page1.xaml
    /// </summary>
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
        }

        private void btnApplyColor1_Click( object sender , RoutedEventArgs e )
        {
            try
            {
                //不使用任何Converter的話，可以透過ARGB的16進位色碼，透過Convert.ToByte方法，轉換字串為Byte
                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( Exception )
            {
                MessageBox.Show( "色碼或顏色設定錯誤" );
            }
        }

        private void btnApplyColor2_Click( object sender , RoutedEventArgs e )
        {
            try
            {
                //使用ColorConverter的話，可以直接輸入ARGB色碼
                recColor2.Fill = new SolidColorBrush( ( System.Windows.Media.Color ) System.Windows.Media.ColorConverter.ConvertFromString( txtColor2.Text ) );
            }
            catch( Exception )
            {
                MessageBox.Show( "色碼或顏色設定錯誤" );
            }
        }

        private void btnApplyColor3_Click( object sender , RoutedEventArgs e )
        {
            try
            {
                BrushConverter brushConverter = new BrushConverter();

                //使用BrushConverter的話，可以直接輸入System.Windows.Media.Colors中的色票名稱
                recColor3.Fill = brushConverter.ConvertFromString( txtColor3.Text ) as Brush;
            }
            catch( Exception )
            {
                MessageBox.Show( "色碼或顏色設定錯誤" );
            }
        }
    }
}

透過上面的程式碼，應該很輕鬆的就可以發現，透過ColorConverter和BrushConverter來轉換色碼和色票名稱，遠比透過Convert.ToByte方法硬轉色碼來得輕鬆愉快，有需要的朋友們就請多多善加利用吧!!

專案原始檔如下，請自行服用：

回首頁