SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

処理コードの作成

 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デベロッパーセンター

製品情報

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5471 2010/09/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング