SHOEISHA iD

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

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

ComponentZine(ComponentOne)

WPFアプリケーションにカラーピッカーを実装する

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

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

GUIの作成

 では、さっそくアプリケーションを作成していきます。

 前回作成した、グリッドに配置したテキストブロックをマウスでドラッグして移動できるようにしたアプリケーションに、カラーピッカーで氏名のテキストブロックの背景色を変更できるようにします。

 動作としては、まずカラーピッカーで色を選択し、次にテキストブロックを右ボタンでクリックして背景色を入れ替えるようにします。

 追加するコントロールは、TextBlockコントロールとC1ColorPickerコントロールです。

 また、配置してあるテキストブロックに名前を付け、右ボタンクリックで処理を実行できるようにイベントハンドラを追加します。

ウィンドウのレイアウト
ウィンドウのレイアウト

コントロールの配置とXAMLの修正

 最初に、コントロールのレイアウトを修正します。これまではグリッドだけでしたが、テキストブロックとカラーピッカーを追加するので、スタックパネルを追加しグリッドとTextBlock、C1ColorPickerコントロールを縦に並べます。

 ① Grid要素全体をStackPanel要素で囲みます。そして、タイトル文字のテキストブロックをその下に移動します。

<StackPanel Height="464" Width="633">
    <TextBlock Grid.ColumnSpan="4" Height="32" Name="TextBlock1" Text="今週のシフト設定" Width="103" />
    <Grid x:Name="Grid1" Background="#FFCDE6FA" ShowGridLines="True" Width="466" Height="326" >

 ② 氏名用TextBlockコントロールに名前を付け、イベントハンドラ「MouseRightButtonDown」を追加します。イベントハンドラは共通のもので、「TextBlock_MouseRightButtonDown」という名前にします。

<TextBlock Text="加藤" FontSize="14" Grid.Row="1" Grid.Column="2" Background="Aqua" MouseRightButtonDown="TextBlock_MouseRightButtonDown"  Name="TextBlock2"/>
            <TextBlock Text="清水" FontSize="14" Grid.Row="3" Grid.Column="1" Background="PaleGreen" MouseRightButtonDown="TextBlock_MouseRightButtonDown"  Name="TextBlock3"/>
            <TextBlock Text="山本" FontSize="14" Grid.Row="4" Grid.Column="6" Background="LightCoral" MouseRightButtonDown="TextBlock_MouseRightButtonDown"  Name="TextBlock4"/>
            <TextBlock Text="阿部" FontSize="14" Grid.Row="5" Grid.Column="2" Background="#FFE5AA64" MouseRightButtonDown="TextBlock_MouseRightButtonDown"  Name="TextBlock5"/>
            <TextBlock Text="木下" FontSize="14" Grid.Row="3" Grid.Column="3" Background="LightYellow" MouseRightButtonDown="TextBlock_MouseRightButtonDown" Name="TextBlock6"/>
            <TextBlock Text="長谷川" FontSize="14" Grid.Row="2" Grid.Column="5" Background="#FF98A7FB" MouseRightButtonDown="TextBlock_MouseRightButtonDown"  Name="TextBlock7"/>

 ③ Grid要素の下に、TextBlock、C1ColorPickerコントロールを配置します。

イベントハンドラの処理

 イベントハンドラでは、カラーピッカーで選ばれた色で氏名用テキストブロックの背景色を設定します。

 まず、C1ColorPickerコントロールのSelectedColorプロパティで選択された色を取得します。次に、それをTextBlockコントロールのbackgroundプロパティに代入しますが、このプロパティは値がBrush型なので、SolidColorBrushオブジェクトに変換してから設定します。

Visual Basic
Imports C1.WPF
Imports C1.WPF.Extended

Private Sub TextBlock_MouseRightButtonDown(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs)
    sender.background = New SolidColorBrush(C1ColorPicker1.SelectedColor)
End Sub
C#
using C1.WPF;
using C1.WPF.Extended;

private void TextBlock_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
    TextBlock tb = (TextBlock)sender;
    tb.Background = new SolidColorBrush(c1ColorPicker1.SelectedColor);
}

 以上で出来上がりです。

まとめ

 このように、カラーピッカーの実装はとても簡単です。C1ColorPickerコントロールは、デフォルトでも十分な機能を使うことができ、色情報の取得もSelectedColorプロパティを参照するだけですから、既存のアプリケーションへの実装もすぐに行えます。

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング