飴屋

WPF / 日記9

コントロールの配置

3D関連はキー操作で前後左右にアバタを移動できるようになったところでとりあえず終了として、次はチャットを行うのに必要な「文字をやりとりする」インターフェイスを実装していこうと思います。まずは、テキストの入力欄を設置してみることにしました。XAMLではリッチテキストを扱えるコントロールも用意されているようですが、とりあえずシンプルなテキストを扱うTextBoxを設置してみます。また、テキストの色ぐらい変えられてもいいかなと思いますので、ラジオボタン(RadioButton)で色を選択できるようにしてみたいと思います。

<StackPanel Grid.Row="1" Margin="10">
<RadioButton Margin="5" Foreground="Black" Checked="ChangeColor">黒</RadioButton>
<RadioButton Margin="5" Foreground="Red" Checked="ChangeColor">赤</RadioButton>
<RadioButton Margin="5" Foreground="Blue" Checked="ChangeColor">青</RadioButton>
<TextBox x:Name="Input" Padding="4"></TextBox>
</StackPanel>

3D空間を表示するViewport3Dタグの下に上記のようなパネルを加えます。RadioButtonには赤、青、黒の3色の選択肢を用意し、それぞれのForegroundプロパティをいじって見出しの色を変えておきます。また、ボタンがチェックされた場合のイベント処理をChangeColorに渡しています。ChangeColorは未定義なので、文字上で右クリックして「イベント ハンドラへ移動」をクリックしてメソッドを追加します。

private void ChangeColor(object sender, RoutedEventArgs e)
{
Input.Foreground = ((RadioButton)sender).Foreground;
}

ChangeColorメソッドでは、クリックされたRadioButtonの色(Foreground)をチャット用のテキスト入力欄の色(Foreground)に適用するようにしてみました。Inputっていうのは、テキスト入力欄につけた名前(x:Name)です。この色の選択状態も、入力されたテキストと一緒にサーバに送信してやらないといけないので、後で変数に入れるように変更しないといけませんね。

グリッドの本領発揮

パネルを追加したのはいいのですが、画面のレイアウトが今のままでは問題ありです。よそのサンプルコードから始まったこのXAMLファイルは、元々で囲まれていたので、これを使ってレイアウトを定義することにしてみます。

<Grid.RowDefinitions>
<RowDefinition Height="390" />
<RowDefinition Height="130" />
</Grid.RowDefinitions>

Gridの中にRowDefinitionsプロパティを書いてみます。これはGridの表が何行から構成され、それぞれの行がどんな挙動をするか定義するタグになっています。とりあえず、2行分のそれぞれの高さを定義してやります。そして、要素ごとにどの行に含めるのか指定してやらないといけません。Gridの中身は3D表示矩形(Viewport3D)とコントロール配置用のパネル(StackPanel)の二つだったので、それぞれにGrid.Rowプロパティを設定してやります。

//1行目 - Grid.Row="0"
<Viewport3D x:Name="ChatWorld" Focusable="True" Grid.Row="0">
...
</Viewport3D>
//2行目 - Grid.Row="1"
<StackPanel Grid.Row="1" Margin="10">
...
</StackPanel>

結果、図のような感じになりました。

WPF

Last-Modified