SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

ボタンを追加する

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

 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デザイナー
ボタンを追加した後の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のようにドットでつないだ要素名や属性名の書き方については、また回を改めて説明します。

次のページ
ボタンのイベントハンドラーを設定する

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
.NET Core 3で始めるWPFアプリ開発連載記事一覧
この記事の著者

biac(ばいあっく)

HONDA R&Dで自動車の設計をやっていた機械屋さんが、技術の進化スピードに魅かれてプログラマーに。以来30年ほど、より良いコードをどうやったら作れるか、模索の人生。わんくま同盟の勉強会(名古屋)で、よく喋ってたりする。2014/10~2019/6 Microsoft MVP (Windows Devel...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11809 2019/12/23 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング