Chapter 07

ステップ2-1: 使い捨てアプリ

Apterygiformes-zenn
Apterygiformes-zenn
2021.12.10に更新

概要

プログラムコードの動作確認などに使う、ボタン等を並べた、お手軽使い捨てアプリを作ります。

プロジェクトの作成

Visual Studioを起動して新しいプロジェクトの作成ボタンを押してください。
最近使用したプロジェクトテンプレートにステップ1で使用したWPFアプリケーションが表示されているため、選択して次へボタンを押します。

プロジェクト名TestApp1を入力し、次へボタンを押します。
フレームワーク.NET 6.0を選択し、作成ボタンを押します。

土台の作成

コントロールを配置する土台部分(コンテナー)を変更します。

デザイナー内の画面の白い部分(Grid)を右クリックし、レイアウトの種類の変更 > StackPanelを選択します。

見た目は変わっていませんが、XAMLを見るとGridタグがStackPanelに変わっています。

画面を縦長になるようサイズ変更します。
XAMLでWindowのタグを選択し、デザイナーで画面の右端中央のをドラッグします。

↓↓↓↓↓

コントロールの配置

ボタンの配置

ツールボックスから

ツールボックスからButtonを2つ、デザイナーの白い部分(StackPanel)にドラッグ&ドロップします。

ボタンが自動的に縦方向に整列して配置されます。

XAMLから

XAML上からボタンを増やしてみます。
コピーしたいButtonタグのある行にテキストカーソルを位置付けます。範囲選択はしないでよいです。
Ctrlキーを押しながらCを押します。これで現在行の内容がコピーされました。

Ctrlキーを押し続けたままVキーを3回押します。
これでButtonが3つ増えました。

テキストボックスの配置

ツールボックスからTextBoxを2つ、デザイナーのStackPanel部分にドラッグ&ドロップします。

TextBoxに幅が設定されているのでクリアします。
デザイナーでTextBoxを選択し、もう1つのTextBoxCtrlキーを押しながら選択します。
これで2つのTextBoxが選択状態になります。

選択状態になったTextBox上で右クリックし、レイアウト > すべてリセットを選択します。

XAMLからWidthの指定が消え、TextBoxが画面幅いっぱいに表示されました。