カラーピッカーで色を選択できるSilverlightアプリケーションの作成

ComponentOne StudioのColorPicker for Silverlightを使ったWebページの作成

2010/09/28 14:00

ポスト

ダウンロードサンプルソース（C#） (1.1 MB)
ダウンロードサンプルソース（VB） (1.1 MB)

　ComponentOne StudioのColorPicker for Silverlightを使えば、Windowsアプリケーションでよく使われているカラーピッカーと同様、カラーパレットを表示させ、その中から色を選択できるインターフェースを簡単に実装できます。今回は、このC1ColorPickerコントロールを使って、Webページ上の四角形オブジェクトのグラデーションカラー2色を、自由に変更できるアプリケーションを作成しました。

ポスト

はじめに

　Sliverlightアプリケーションの特徴の1つは、綺麗な色使いをXAMLの各要素に施すことができることです。これにより、従来のHTMLを使ったWebページに比べ、格段に見栄えの良いページをデザインできます。

　ComponentOne Studio for Silverlightに収録されているC1ColorPickerコントロールは、Webページ実行時にパレットから色を選択可能にする機能を提供するSilverlightコンポーネントです。

　Windowsアプリケーションで使われるカラーピッカーと同様、1670万色のカラーパレットから任意の色を選択したり、Microsoft Office 2007で使われているカラーテーマに基づくパレットを表示してその中から選ぶこともできます。

　今回は、このC1ColorPickerコントロールを使って、Webページ上の四角形オブジェクトのグラデーションカラー2色を、自由に変更できるアプリケーションを作成しました。

2種類のカラーパレットからグラデーションの色を2つ選択できる（基本タイプ）

左側のパレットでグラデーションの左上の色を、右側のパレットで右下の色を選択する（拡張タイプ）

基本タイプは、リストからカラーパレットを選んで、入れ替えも可能

対象読者

　Visual Basic／Visual C# 2008を使ってプログラムを作ったことのある人。また、SilverlightおよびXAMLに対する基礎的な知識が必要になります。

必要な環境

　Visual Basic 2008、Visual C# 2008、Visual Studio 2008でプログラムが作れる環境。また、Visual Studio 2008 Silverlight Tools 3.0をインストールしていることが必須条件です。

　なお、本プログラムはWindows Vista上で動作するVisual Studio 2008およびVisual Studio 2008 Silverlight Tools 3.0を使用して作成し、Internet Explorer 8で動作確認を行っています。

コンポーネントのインストール

　ComponentOne Studio for Silverlightを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2010Jをインストールする必要があります。

　インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

C1ColorPickerコントロールについて

　ComponentOne Studio for SilverlightのC1ColorPickerコントロールは、Windowsフォームの色のダイアログボックスと同じような、対話式の色選択インターフェースを提供するコントロールです。透過性、16進数色表記、RGB（Red Green Blue）とHLS（Hue Saturation Lightness）のカラーモデルのサポートを含む豊富なビジュアル色入力インターフェースも備えています。

C1ColorPickerコントロールの表示モードについて

　C1ColorPickerコントロールには、基本型（Basic）と拡張型（Advance）の2種類の表示形態があります。基本型（Basic）は、Microsoft Office 2007で使用されているカラーテーマと同様の20以上の定義済みカラーパレットを表示し、その中から色を選択するタイプです。各パレットの色はテーマに沿って調和がとれており、使用することで洗練された外観のアプリケーションを作成できます。

　拡張型（Advance）は、カラーエディタを表示して、その中から色を選んでもらうタイプです。現在のパレットにない色を作成できます。

　また、基本型と拡張型を2つとも表示させることも可能です。

基本型（Basic）、拡張型（Advance）、および2つとも表示させた場合

基本型（Basic）C1ColorPickerコントロールの構成要素

　基本型（Basic）C1ColorPickerコントロールは、次の要素から構成されています。

基本型（Basic）の構成要素（※ヘルプファイルより抜粋）

ドロップダウン矢印

　C1ColorPickerコントロールのウィンドウを開きます。ドロップダウンウィンドウを表示する場所を、コントロールの上下、および状況ごとに自動的に切り替わるように指定できます。

［Basic］タブ

　C1ColorPickerコントロールの表示モードを切り替えるタブです。

Selected Color

　現在選択されている色がカラーピッカーのウィンドウに表示されます。

Picked Color

　マウスでピックされた色が、カラーリストに赤色の境界線付きで表示されます。

Palette Colors

　基本型（Basic）では、設定されたカラーパレットの色が反映されます。

Header Palette

　パレットの基本色を表します。

Standard Colors

　10色の標準色が表示されます。

Recent Colors

　最近選択した色が最大10色まで表示されます。

拡張型（Advance）C1ColorPickerコントロールの構成要素

　拡張型（Advance）C1ColorPickerコントロールは、次の要素から構成されています。

拡張型（Advance）C1ColorPickerコントロールの構成要素（※ヘルプファイルより抜粋）

Color Slider

　色スペクトルから色を選択するスライダです。

Color Field／Picked Color

　［Picked Color］は、現在選択されている色を示します。［Color Slider］を移動して色合いを変えてから、［Color Field］で選択した色を調整します。

Transparency Slider

　色の透過性を設定するスライダです。色は、不透過にすることも、部分的または完全な透過にすることもできます。

Color Preview

　現在選択している色をプレビューします。

Transparency Value

　色の透過性を数値で設定できます。透過性は、0（完全に透過）と255（完全に不透過：デフォルト）の間の整数に設定できます。

RGB Color

　3つの数値ボックスにより、RGBカラーモデルを使って色を選択できます。

HSL Color

　3つの数値ボックスにより、HSLカラーモデルを使って色を選択できます。

Hexadecimal Color

　8桁の数値が表示されている場合、最初の2桁はFF（不透過）から00（透過）までの色の透過性を表し、下6桁は標準の16進数色の選択値を表します。ShowAlphaChannelプロパティがFalseに設定されていると、下6桁のみが表示されます（透過値は表示されません）。

Selected Color

　現在選択されている色がカラーピッカーのウィンドウに表示されます。

ドロップダウン矢印

　C1ColorPickerコントロールのウィンドウを開きます。

［Advanced］タブ

　C1ColorPickerコントロールの表示モードを切り替えるタブです。

カラーパレットについて

　C1ColorPickerコントロールの表示モードが基本（Basic）モードの場合、前述のとおり、Microsoft Office 2007で使用されている20以上のカラーテーマの定義済みパレットを使うことができます。

　カラーパレットを変更するには、Paletteプロパティに「Office2007ColorTheme列挙体」のメンバを指定します。Office2007ColorTheme列挙体メンバとして利用できるカラーパレットは次のとおりです。

利用できるカラーパレットの一覧
メンバ名	値	説明
Standard	0	標準カラーテーマ
Highlight	1	ハイライトカラーテーマ
Office	2	オフィスカラーテーマ
GrayScale	3	グレースケールカラーテーマ
Apex	4	ひらめきカラーテーマ
Aspect	5	シックカラーテーマ
Civic	6	クールカラーテーマ
Concourse	7	ビジネスカラーテーマ
Equity	8	ジャパネスクカラーテーマ
Flow	9	リゾートカラーテーマ
Foundry	10	エコロジーカラーテーマ
Median	11	デザートカラーテーマ
Metro	12	メトロカラーテーマ
Module	13	モジュールカラーテーマ
Opulent	14	キュートカラーテーマ
Oriel	15	スパイスカラーテーマ
Origin	16	アースカラーテーマ
Paper	17	ペーパーカラーテーマ
Solstice	18	フレッシュカラーテーマ
Technic	19	テクノロジーカラーテーマ
Trek	20	トラベルカラーテーマ
Urban	21	アーバンカラーテーマ
Verve	22	ネオンカラーテーマ

使用できるカラーパレット（※ヘルプファイルより抜粋）

選択された色情報の取得と基本的なプロパティ

　ユーザーがC1ColorPickerコントロールから色を選択すると、コントロールにはSelectedColorChangedイベントが発生し、C1ColorPickerコントロールのSelectedColorプロパティに選択した色がColor型で格納されます。

　また、SelectedColorプロパティに値を設定しておくと、その色がコントロールの選択色ウィンドウに設定されます。

今回作成するWebページの構成

　では、さっそくWebページを作成してみましょう。今回のプログラムでは、グリッドを使ってコントロールを配置します。

コントロールのレイアウト

　各コントロールの動作は、まず2つのC1ColorPickerコントロールを使ってグラデーションの開始色と終了色を選べるようにします。

　基本モードのC1ColorPickerコントロールでは、リストボックスから5つのカラーテーマのパレットを選べるようにします。

　C1ColorPickerコントロールで選んだ色は、すぐに四角形の塗りつぶしグラデーションに反映するように、C1ColorPickerコントロールのSelectedColorChangedイベントハンドラに処理を組み込みます。

Silverlightプロジェクトの作成

　まずは、Silverlightプロジェクトの作成からです。

Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクト作成すると、「プロジェクトの種類」に［Silverlight］が追加されています。これを選択し、「テンプレート」から［Silverlightアプリケーション］を選びます。

［Silverlightアプリケーション］を選ぶ

「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」リストから［ASP.NET Webサイト］を選びます。

リストから［ASP.NET Webサイト］を選ぶ

プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。

グリッドの作成

　今回は、まず上下2段（1列2行）のグリッドを設定し、2行目を2列のグリッドに分割します。

　グリッドに行を追加するには、RowDefinition要素を必要な行数分定義します。高さはHeightプロパティで指定します。また、列を設定するには、ColumnDefinitions要素を必要な列数分定義します。幅はWidthプロパティで指定します。

    <Grid x:Name="LayoutRoot">
    <!-- 最初に1列2行のグリッドを作成-->
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- 2行目のグリッドを2列に分割-->
    <Grid x:Name="PaletteLayout" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>
</Grid>

グリッドの設定（※「ShowGridLines="True"」にして枠線を見えるようにしている）

タイトル文字と四角形の描画

　1行目のグリッドにTextBlockとRectangleを作成し、タイトル文字と四角形を描画します。それぞれ、Effectプロパティを使ってドロップシャドウを設定します。

　RectangleはFillプロパティで塗りつぶしますが、この時、線形グラデーションブラシ（LinearGradientBrush）を作成し、左上から右下にかけてグラデーションになるように設定します。XAMLを記述するのは、<Grid.RowDefinitions>要素の下です。

<Grid x:Name="LayoutRoot" ShowGridLines="True">
    <!-- 最初に1列2行のグリッドを作成-->
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- 1行目のグリッドにTextBlockとRectangleを作成-->
    <TextBlock Margin="5" Grid.Row="0" Text="四角形のグラデーションの色を変更する" VerticalAlignment="Top"
             HorizontalAlignment="Center" FontSize="20" Foreground="Navy" ></TextBlock>
    <Rectangle x:Name="rc1" Grid.Row="0" Height="200" Width="600" 
               HorizontalAlignment="Center" VerticalAlignment="Center">
        <Rectangle.Fill>
            <LinearGradientBrush x:Name="colors">
                <GradientStop x:Name="col1" Color="Black" Offset="0" />
                <GradientStop x:Name="col2" Color="White" Offset="1" />
            </LinearGradientBrush>
        </Rectangle.Fill>
        <Rectangle.Effect>
            <DropShadowEffect Color="Black" BlurRadius="5" />
        </Rectangle.Effect>
    </Rectangle>

C1ColorPickerコントロールの作成

　さきほど2列に分割した2行目のグリッドの最初の列に、C1ColorPickerコントロールを2つ作成します。

C1ColorPickerコントロールは、横に並ぶようにStackPanelを使用してレイアウトします。StackPanelは、グリッドの左側の列に作成します。
開始色用C1ColorPickerコントロールは、Modeプロパティを「Advanced」にして拡張型に設定します。
終了色用C1ColorPickerコントロールは、Modeプロパティを「Basic」にして基本型に設定します。
ドロップダウンの方向は、開始色用C1ColorPickerコントロールはDropDownDirectionプロパティを「AboveOrBelow」にして、コントロールの上側にカラーエディタが表示されるようにします。
終了色用C1ColorPickerコントロールはDropDownDirectionプロパティを「BelowOrAbove」にして、コントロールの下側にカラーエディタが表示されるようにします。
どちらのC1ColorPickerコントロールも、あらかじめ表示する選択色は「White」に設定し、イベントハンドラを作成しておきます。
また、C1ColorPickerコントロールはEffectプロパティが設定されていないので、StackPanelのEffectプロパティでドロップシャドウを付けます。

<!-- 2行目のグリッドを2列に分割-->
<Grid x:Name="PaletteLayout" Grid.Row="1" ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- 左の列に横向きのStackPanelを使ってC1ColorPickerを2つ作成-->
    <StackPanel Height="Auto" Width="Auto" Grid.Column="0" HorizontalAlignment="Right" 
                VerticalAlignment="Top" Orientation="Horizontal">

        <c1ext:C1ColorPicker x:Name="c1cp1" Width="80" Height="80" HorizontalAlignment="Center" 
                             VerticalAlignment="Center" Margin="5" DropDownDirection="AboveOrBelow" 
                             Mode="Both" SelectedColor="White" 
                             SelectedColorChanged="c1cp1_SelectedColorChanged">
         </c1ext:C1ColorPicker>
        <c1ext:C1ColorPicker x:Name="c1cp2" Width="80" Height="80" HorizontalAlignment="Center" 
                             VerticalAlignment="Center" Margin="5" DropDownDirection="BelowOrAbove" 
                             Mode="Basic"  SelectedColor="White"  
                             SelectedColorChanged="c1cp2_SelectedColorChanged">
        </c1ext:C1ColorPicker>
        
        <StackPanel.Effect>
            <DropShadowEffect Color="Black" BlurRadius="5" />
        </StackPanel.Effect>
    </StackPanel>

ListBoxの作成

　作成したStackPanelの下に、もう1つ縦向きのStackPanelを作成し、グリッドの右側の列に配置します。そして、StackPanelの中にTextBlockとListBoxを作成します。

　ListBoxは、リスト選択のイベントハンドラを作成し、ListBoxItemプロパティを使用してカラーパレットの5つのテーマ名を設定します。TextBlockとListBoxは、いずれもEffectプロパティでドロップシャドウを設定します。

                <!-- 右の列に縦向きのStackPanelを使ってTextBlockとListBoxを作成-->
    <StackPanel Height="Auto" Width="Auto" Grid.Column="1" 
                HorizontalAlignment="Left"  VerticalAlignment="Top"
                Orientation="Vertical">
        <TextBlock Margin="5" Text="カラーパレットの変更" Foreground="Blue" >
            <TextBlock.Effect>
                <DropShadowEffect Color="Black" BlurRadius="5" ShadowDepth="2" Opacity="70" />
            </TextBlock.Effect>
        </TextBlock>
        <ListBox x:Name="ListBox1" Grid.Column="1" Height="100" Width="120" 
                 HorizontalAlignment="Left" VerticalAlignment="Top" 
                 SelectionChanged="ListBox1_SelectionChanged" >                   
            <ListBoxItem Content="Apex" />
            <ListBoxItem Content="Office" />
            <ListBoxItem Content="Verve" />
            <ListBoxItem Content="Metro" />
            <ListBoxItem Content="リゾート" />
            <ListBox.Effect>
                <DropShadowEffect Color="Black" BlurRadius="5" />
            </ListBox.Effect>
        </ListBox>
    </StackPanel>
</Grid>

　以上で、Webページの作成は終了です。

処理コードの作成

　C1ColorPickerコントロールで選択した色を四角形のグラデーションに反映する処理と、ListBoxのリスト項目が選択された時の処理を作成します。いずれも、MainPage.xamlのビハインドコードとして作成します。

選択色のグラデーションへの反映

　C1ColorPickerコントロールで選択した色を四角形のグラデーションに反映するには、LinearGradientBrushクラスの下層にあるGradientStopクラスのColorプロパティを入れ替えます。

　C1ColorPickerコントロールで選択した色は、SelectedColorプロパティに格納されているので、これをGradientStopクラスのColorプロパティに代入するだけで、四角形のグラデーション色が変更されます。

　今回は、2つのC1ColorPickerコントロールで同じ処理を使うので、独自のメソッド「UpdateGradient」を作成し、ここに処理を作成します。作成したメソッド「UpdateGradient」は、それぞれのC1ColorPickerコントロールのSelectedColorChangedイベントハンドラで呼び出します。

Visual Basic

Imports C1.Silverlight
Imports C1.Silverlight.Extended

Partial Public Class MainPage
    Private Sub UpdateGradient()
        If c1cp1 IsNot Nothing And c1cp2 IsNot Nothing Then
            Me.col1.Color = Me.c1cp1.SelectedColor
            Me.col2.Color = Me.c1cp2.SelectedColor
        End If
    End Sub

    Private Sub c1cp2_SelectedColorChanged(ByVal sender As System.Object, ByVal e As C1.Silverlight.PropertyChangedEventArgs(Of System.Windows.Media.Color))
        UpdateGradient()
    End Sub

    Private Sub c1cp1_SelectedColorChanged(ByVal sender As System.Object, ByVal e As C1.Silverlight.PropertyChangedEventArgs(Of System.Windows.Media.Color))
        UpdateGradient()
    End Sub

using C1.Silverlight;
using C1.Silverlight.Extended;

namespace sl_colorpicker_cs
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        void UpdateGradient()
        {
            if (c1cp1 != null & c1cp2 != null)
            {
                this.col1.Color = this.c1cp1.SelectedColor;
                this.col2.Color = this.c1cp2.SelectedColor;
            }
        }

        private void c1cp1_SelectedColorChanged(object sender, C1.Silverlight.PropertyChangedEventArgs<Color> e)
        {
            UpdateGradient();
        }

        private void c1cp2_SelectedColorChanged(object sender, C1.Silverlight.PropertyChangedEventArgs<Color> e)
        {
            UpdateGradient();
        }

ListBoxコントロールのリスト選択の処理

　ListBoxコントロールに設定したテーマのカラーパレットを、基本型C1ColorPickerコントロール「c1cp2」に組み込むには、C1ColorPickerコントロールのPaletteプロパティを使います。

　このプロパティに、ColorPaletteクラスのGetColorPaletteメソッドを使って、Office2007ColorTheme列挙体のメンバを設定します。この処理は、ListBoxコントロールのSelectionChangedイベントハンドラで行います。

Visual Basic

    Private Sub ListBox1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs)
        Select Case ListBox1.SelectedIndex
            Case 0
                c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Apex)
            Case 1
                c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Office)
            Case 2
                c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Verve)
            Case 3
                c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Metro)
            Case 4
                c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Flow)
        End Select
    End Sub

        private void ListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            switch(ListBox1.SelectedIndex)
            {
                case 0:
                    c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Apex);
                    break;
                case 1:
                    c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Office);
                    break;
                case 2:
                    c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Verve);
                    break;
                case 3:
                    c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Metro);
                    break;
                case 4:
                    c1cp2.Palette = ColorPalette.GetColorPalette(Office2007ColorTheme.Flow);
                    break;
            }
        }

　これで、リストにあるテーマを選ぶと、カラーパレットが入れ替わります。以上で完成です。

テーマを選ぶとカラーパレットが入れ替わる