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

ComponentOne StudioのColorPicker for Silverlightを使った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

C#

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

C#

        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;
            }
        }

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

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

まとめ

　カラーピッカーは、Webページのカラーをユーザー独自の設定にしたり、グラフィック系のアプリケーションなど対話型で色情報を扱う際に便利ですね。ColorPicker for Silverlightは、そのような機能をWebページに実装するのにもってこいのコントロールです。

参考文献

　Microsoft Silverlightデベロッパーセンター

製品情報

• ComponentOne Studio