Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/01/23 14:00
目次

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プロパティを参照するだけですから、既存のアプリケーションへの実装もすぐに行えます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5