[UWPアプリ] 画面のデザイン

前回作成したプロジェクトを開いて、画面のデザインをしてみます。

最初に、ソリューションエクスプローラーからMainPage.xamlをダブルクリックして表示します。

もし、MainPage.xamlが正常に表示されない場合は、開発者モードを有効にしていないことが考えられます。この場合は、前回の記事を参考に開発者モードを有効にしてください。それでもエラーになる場合は、一度MainPage.xamlを閉じてソリューションをクリーン/ビルドしてから再度表示してみてください。

MainPage.xamlを開いたときの画面は以下のように、既定でWIndows Phoneサイズの画面になっています。

MainPage.xaml

このまま開発しても問題ないですが、デスクトップアプリケーションを軸として開発できるよう、ここでは「23” Desktop(1920×1080) 100%スケール」を選択してみましょう。

画面サイズの変更

それでは、画面へコントロールを貼り付けてみましょう。

コントロールは「ツールボックス」にあります。「ツールボックス」が表示されていない場合は、Visual Studioのメニューで[表示]-[ツールボックス]を選択します。

ツールボックスには様々なコントロールがあります。

今回は、ButtonとTextBlockを配置してみましょう。

TextBlockとは、文字列を表示するためのコントロールです。クラシックアプリケーションでいうLabelコントロールと思えばよいでしょう。

ツールボックスからButtonとTextBlockを画面にドラッグ&ドロップしましょう。

あとは任意の位置へ移動して配置します。

画面へのコントロールの配置

ほかにも様々な部品がありますが、配置方法は同じです

次回はボタンクリックのイベントを作成してみましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.