社畜ねこのお勉強会

WPFの勉強ブログです。


【WPF】3回目:画面の中心で、HelloWorldを叫ぶ

もくもく16歳、まだ誰のものでもありません。
嘘です。

そろそろ開発的なことをしたいので、
画面の真ん中に「Hello World」と出力させてみましょう。

※完成イメージ図
f:id:shachiku_cat:20180525225214p:plain

ラベルの設置

WPFのデザインはXAMLで書く」って聞いた時に、
コントロールは自分で全部タグ書いて設置しなくちゃいけないと思ったんですよね。
WindowsFormと同様、マウス操作でも設置できるので安心しました。
ただ、WindowsFormと違って、コード記述でも簡単に設置可能ってのは嬉しい点です。
WindowsFormのコードは「触らないでエッチ!」って態度で近寄りがたかったですね。

VisualStudioの左側にある「ツールボックス」タブを開きます。
(なかったら、[表示] > [ツールボックス] または [Ctrl] + [Alt] + [X])

文字を設置したいので、「TextBox」をダブルクリックします。
※ドラッグ&ドロップでも設置できます。

完成イメージに合わせて編集

XAMLのコードの方を見ると、TextBoxタグが追加されています。

<TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>

色々なプロパティが付いてますが、ニンジャでも分かる英語なので割愛。
VisualStudioの右側に出ている「プロパティ」タブを見ると、これ以外にも色々ありました。
(なかったら、[表示] > [プロパティ ウィンドウ] または [F4])

では完成イメージに従って、中央に寄せて文字列を変えて…実行!
f:id:shachiku_cat:20180525225404p:plain

 <TextBox HorizontalAlignment="Center" Height="23" TextWrapping="Wrap" Text="Hello World!" VerticalAlignment="Center" Width="120" TextAlignment="Center"/>

う~ん、大体イメージ通りですが、何で枠が出てるんだろう。



f:id:shachiku_cat:20180525225529g:plain

素で間違えました。
こういうときは「TextBlock」ですね、すみません。
XAMLのいいところ(?)は、タグ名書き換えれば概ねオッケーなところですね。
直しました。
f:id:shachiku_cat:20180525225548p:plain

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Hello World!" VerticalAlignment="Center" TextAlignment="Center" FontSize="72"/>

今度こそできました。

何だか初心に帰ったというか、C言語で初めてHello Worldを出力したときの気持ちを思い出しましたね。



「しょっぼ」


4回目、更新しました!
shachiku-cat.hateblo.jp

補足:Label と TextBlockの違い

TextBlock?いえ、知らない子ですね。

そう、WindowsFormでTextBlockというものを見たことがない。
こういう文字列を表示したいときは「Label」というコントロールを使っていました。
別にWPFでLabelが無くなってTextBlockに変わったわけではなく、Labelコントロールもあるんですよね。

両社の違いはずばり、

  • Label:Controlクラスを継承している
  • TextBlock:Controlクラスを継承していない

はぁ…それで?って感じですね。

下のサイトの説明が普通に分かりやすかったので、具体的にはこちらを見てください。
NeaRael「TextBlockとLabelの違い」

ちなみにTextBlockは「テキスト表示」に特化させている分、Labelより表示が早いそうです。