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オブジェクトに変換してから設定します。
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
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プロパティを参照するだけですから、既存のアプリケーションへの実装もすぐに行えます。
