.net column

.NET開発者のためのブログメディア
アプリケーション作成

XAMLとVisual Studioを使ってStackPanelを編集する

2020年04月16日

WPFでアプリケーションを構築する場合、画面作成で多く使用される言語はXAMLになります。そのXAMLで使用するコントロールで重宝されるのが「StackPanel」です。StackPanelを使うことで上下または左右に要素を並べることができます。

SE
StackPanelを活用すればおしゃれな画面とか作れそうですね。でも本当に使う必要性はあるのでしょうか?
PL
もちろんあります!ボタンやラベルなどのコントロールを複数配置する場合、StackPanelを活用すると、保守性やデザイン面などでメリットがあります。

StackPanelの概要について

Visual StudioにはWPFでアプリケーションを構築するためのコントロールが準備されています。それらをドラッグ・アンド・ドロップで配置するだけで、初心者でも簡単に画面を作成できます。

配置する時には赤いガイドラインが表示されますので、それらに従って配置すれば、ボタンなどのコントロールが揃った画面ができたように感じます。しかし、コントロールをただ配置しただけでは、後々のメンテナンス作業などがとても大変です。配置したコントロールが1個や2個なら問題ありませんが、10個、20個となるとWidthやHeightの数字を一律で変更するだけで労力が必要です。

後々のことも考慮して、かつコントロールがきれいに揃った画面を作成するのに役立つのがStackPanelです。StackPanelではデフォルト値として垂直方向にコントロールを並べることができます。水平方向に並べる場合はプロパティでOrientation=”Horizontal”を設定します。水平・垂直方向ともに配置したい場合は、StackPanelを入れ子にしてコーディングすることも可能です。

XAMLでStackPanelの編集方法について

StackPanelの使用方法について、実際のコーディングサンプルを例にして紹介します。

XAMLでの画面開発 StackPanelを使用してのレイアウト確認(ソース編)

XAMLでの画面開発 StackPanelを使用してのレイアウト確認(デザイン編)

StackPanelを使用してのレイアウト確認

XAMLでの画面開発 StackPanelを使用しての実行例

Visual Studioの「開始」ボタンを押下して、作成した画面をテスト実行します。
StackPanelを使用しての実行例

SE
複数のボタンをきれいに配置したいときは、今回学んだStackPanelを活用してみようと思います。
PL
画面はユーザーが見るとても大事な部分です。WPFにはStackPanelという素晴らしいコントロールがあらかじめ搭載されていますので、積極的に利用していきましょう。

XAMLを学ぶ際にはStackPanelの勉強も忘れずに

StackPanelはVisual StudioでWPFアプリケーションを作成する際に、とても重宝されるコントロールです。開発現場で活用されることもありますので、XAMLを学ぶ際にはあわせて作成方法などを確認するようにしましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)