ボタンを追加する
画面にボタンも追加してみましょう。後ほど、そのボタンがクリックされたときにコードビハインドのメソッドを呼び出すようにしてみます。
Gridコントロールの既定のプロパティであるChildrenプロパティには、いくつでもコントロールをセットできます。XAMLの見た目で言えば、Gridコントロールの中に複数のコントロールを配置できます。TextBlockコントロールの下に、次のコードのようにしてButtonコントロールを追加してみましょう。
<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デザイナー](https://cz-cdn.shoeisha.jp/static/images/article/11809/Fig10s.png)
Gridを上下に分割する
このまま実行すると、次の画像のようにボタンが文字列の上にかぶさってしまいます。
![文字列とボタンが重なってしまった](https://cz-cdn.shoeisha.jp/static/images/article/11809/Fig17.png)
画面を上下に分割して、上に文字列、下にボタンを入れましょう。上下に分割するには、GridコントロールのコンテンツにGrid.RowDefinitions要素を追加し、ButtonコントロールにGrid.Row属性を追加します(次のコード)。Grid.Row属性の「1」は、ゼロ始まりのインデックスで上から2番目のRow(=行)であることを指定しています。TextBlockコントロールにはGrid.Row属性を追加していませんが、既定値である「0」(上から1番目、つまり上側のRow)だとみなされます。なお、この修正も、デバッグ実行中にホットリロードできます。
<Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock x:Name="Text1" FontSize="64">Hello, WPF !</TextBlock> <Button Grid.Row="1" ……省略…… >Click</Button> </Grid>
実行すると次の画像のようになります。文字列とボタンが上下に配置されました。
![文字列とボタンが上下に配置された](https://cz-cdn.shoeisha.jp/static/images/article/11809/Fig18.png)
なお、Gridコントロールなどを使ってコントロールをレイアウトする方法や、Grid.RowDefinitions
のようにドットでつないだ要素名や属性名の書き方については、また回を改めて説明します。