.NET Core 3で始めるWPFアプリ開発――Hello, WPF!

.NET Core 3で始めるWPFアプリ開発 第1回

ボタンを追加する

　画面にボタンも追加してみましょう。後ほど、そのボタンがクリックされたときにコードビハインドのメソッドを呼び出すようにしてみます。

　Gridコントロールの既定のプロパティであるChildrenプロパティには、いくつでもコントロールをセットできます。XAMLの見た目で言えば、Gridコントロールの中に複数のコントロールを配置できます。TextBlockコントロールの下に、次のコードのようにしてButtonコントロールを追加してみましょう。

Buttonコントロールを追加する（MainWindow.xaml）

  <Grid>
    <TextBlock x:Name="Text1" FontSize="64">Hello, WPF !</TextBlock>
    <Button
            Background="ForestGreen" Foreground="#fff"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Margin="0,0,0,20" Padding="20,0"
            FontSize="32" FontWeight="Bold"
             >Click</Button>
  </Grid>

　おや？　先ほどコードビハインドからコントロールのプロパティを変更したときは何やら面倒なコードを書いたForeground／HorizontalAlignment／VerticalAlignmentプロパティですが、XAMLでは簡潔な文字列で指定できていますね。

　XAMLでは型コンバーターというものが使われて、文字列からプロパティに適した型へと自動的に変換されるのです。ですから、コードビハインドから設定するときにはオブジェクトを構築するコードを書かなければいけないプロパティでも、XAMLでは多くの場合に文字列を記述するだけで済むのです。

ボタンを追加した後のXAMLデザイナーの様子

Gridを上下に分割する

　このまま実行すると、次の画像のようにボタンが文字列の上にかぶさってしまいます。

文字列とボタンが重なってしまった

　画面を上下に分割して、上に文字列、下にボタンを入れましょう。上下に分割するには、GridコントロールのコンテンツにGrid.RowDefinitions要素を追加し、ButtonコントロールにGrid.Row属性を追加します（次のコード）。Grid.Row属性の「1」は、ゼロ始まりのインデックスで上から2番目のRow（＝行）であることを指定しています。TextBlockコントロールにはGrid.Row属性を追加していませんが、既定値である「0」（上から1番目、つまり上側のRow）だとみなされます。なお、この修正も、デバッグ実行中にホットリロードできます。

Gridを上下に分割する（MainWindow.xaml）

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <TextBlock x:Name="Text1" FontSize="64">Hello, WPF !</TextBlock>
    <Button Grid.Row="1"
            ……省略……
            >Click</Button>
  </Grid>

　実行すると次の画像のようになります。文字列とボタンが上下に配置されました。

文字列とボタンが上下に配置された

　なお、Gridコントロールなどを使ってコントロールをレイアウトする方法や、Grid.RowDefinitionsのようにドットでつないだ要素名や属性名の書き方については、また回を改めて説明します。