【WPF】4回目：ボタンクリックイベントの実装

ちょっとエッチな美新人娘(ミルキーっこ)、もくもくです。
嘘です。

今回はイベントの実装です。
とりあえず、
　①ボタン押す
　②メッセージボックスが出る
くらいの簡素なものから始めます。

※完成イメージ図

コントロールの設置

[ツールボックス]から[TextBlock]を1つ、[Button]を2つ設置します。
※Gridタグ内のコードだけ載せていきます。

<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Margin="30,30,0,0"/>
<Button Content="Button" HorizontalAlignment="Center" Margin="0,200,0,0" VerticalAlignment="Top" Width="75"/>
<Button Content="Button" HorizontalAlignment="Center" Margin="0,250,0,0" VerticalAlignment="Top" Width="75"/>

前回は気づきませんでしたが、XY座標ではなくマージン(欄外余白)で位置調整を行うようです。
ちょっと慣れるのに時間が掛かりそうです。

表示値の変更

表示値のプロパティは、TextBlockは「Text」、Buttonは「Content」です。
前回の余談で調べた「LabelとTextBlockの違い」で、TextとContentの微妙な違いの話出てましたね。
ButtonもControl属性を継承しているので、Labelと共通してContentプロパティなんですね。

早速設定…と思いましたが、改行ってどうやるんですか？
というわけで調べたところ、改行の前に衝撃の事実。

<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="30,30,0,0">
    Q.浅野ゆう子のキャッチコピー「ジャンプする○○」。○○に入る動物は？
</TextBlock>

タグに文字列を挟んでもいいんですね！
HTML開発とのシンパシー感じてきました。

で、肝心の改行ですが、LineBreakタグというものを使用します。
HTMLでいうbrタグですね。
brタグより名前が長くて仰々しいですが、読んで字の如くなので分かりやすいといえばそうですね。
（brって「line break」の略なんですね、初めて知りました。）
をぶろぐ「WPF: XAML, C# で TextBlock などの要素内の文字列を改行させる」

サイズも調整し、トータルの変更結果がこちら。

<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="30,30,0,0" FontSize="36">
    Q.浅野ゆう子のキャッチコピー「ジャンプする○○」。<LineBreak/>
    ○○に入る動物は？
</TextBlock>
<Button HorizontalAlignment="Center" Margin="0,200,0,0" VerticalAlignment="Top" FontSize="36" Width="150">
    カモシカ
</Button>
<Button HorizontalAlignment="Center" Margin="0,290,0,0" VerticalAlignment="Top" FontSize="36" Width="150">
    ビーバー
</Button>

イベントの実装

おそらくWindowsFormと同様のやり方で実装できると思っているのですが、
その前に一つ気になってることがあります。

こいつらオブジェクト名付いてないな？

WindowsFormではデフォルトでコントロールの種類が、オブジェクトの名前として初期設定されていました。
(ButtonControlなら「button」みたいな)
プロパティ見ても「<名前なし>」になっちゃってるけど、オブジェクト名無しでコンパイルできるんすなぁ。

まぁでも無いとC#と連携できないのは確定的に明らかなのでつけましょう。

<TextBlock x:Name="tbQuestion" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="30,30,0,0" FontSize="36">
    Q.浅野ゆう子のキャッチコピー「ジャンプする○○」。<LineBreak/>
    ○○に入る動物は？
</TextBlock>
<Button x:Name="btnChoice1" HorizontalAlignment="Center" Margin="0,200,0,0" VerticalAlignment="Top" FontSize="36" Width="150">
    カモシカ
</Button>
<Button x:Name="btnChoice2" HorizontalAlignment="Center" Margin="0,290,0,0" VerticalAlignment="Top" FontSize="36" Width="150">
    ビーバー
</Button>

名前を付けたところで、今度こそイベントの設定をしましょう。

カモシカのボタンを選択した状態で[プロパティ]タブを見ます。
そこの稲妻型のボタン()を押すと、Buttonが持っているイベントがずらーーーっと出てきました。
今回実装したいのは「Clickイベント」なので、「Click」のテキストボックスをダブルクリックします。
すると、CSファイルにイベントメソッドが追加されました。
この辺はやっぱりWindowsFormと変わらないですね。

メッセージボックスを表示する処理を書きます。

private void btnChoise1_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("正解！", "答え");
}

ビーバーのボタンにも同じようにイベントを付けます。

private void btnChoise2_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("不正解！\nビーバーは香坂みゆきでした。\n「飛び出せビーバー14才」", "答え");
}

できた！

実行する

以前、後輩が「プログラム出来ました！」って言うので実行してもらったら、ビルドエラー出たことがありました。
彼は「書き上がった」と言いたかったみたいです。プログラムの「出来た」は曖昧ですね。

では動作確認していきます。

出来てますね。ﾔｯﾀｰ!

ね、もう自信作です。早速お客さんに見せてみましょう。

コントロールのデザイン

余談：オブジェクト名のプロパティ、「x:Name」について

コイツ見た時に「何で『x:』とかカッコつけてんだろ…」と思いました。

この『x:』は、2回目に登場した「xmlns」の中の「xmlns:x」の定義だよ～ということを示してます。

基本のユーザーコントロールは「Name」というプロパティを持っているのですが、
全てのコントロールがデフォ持ちしてるわけではないそうです。今は実感としてよくわかりませんが。
そういうヤツらに「x:Name（xmlns:xにセットした定義のNameプロパティ）」をセットするんだそうです。

「Name」で書いても機能的には「x:Name」と変わらないので、全部「x:Name」でいいんじゃないですかね。
実際、プロパティタブから名前を設定したら、Buttonは「Name」持ってるくせに「x:Name」で生成されてましたしね。

皆さんはコントロールの命名規則ってどうしてますかね。
うちは英語読めないニンジャ多いのに英単語で命名する習慣があるのでちょっとした地獄ですね。