dotnet コマンドでつくる WPF Application HelloWorld! その２

WPFアプリケーションを Visual Studio を使わないで、dotnet コマンドとエディタだけでつくる覚え書き。

前回は、MainWindow に直接 TextBlock を配置して Hello, World! していたが、 今回は、ユーザーコントロールを経由して Hello, World! する。

事前準備

Windows11 WSL 上で作業します。 dotnet 5.0 SDK などはインストール済であることが前提。

MyApp プロジェクトの作成

ソリューションに該当するディレクトリ my-app を作成する。 その中に、MyApp プロジェクトを作成する。

mkdir my-app
cd my-app
dotnet.exe new wpf --target-framework-override net5.0 --name MyApp

WSL上で作業しているので、dotnet コマンドには exe をつけて実行する必要あり。

この段階で MyApp プロジェクトをビルドして作動を確かめる。

dotnet.exe build MyApp/MyApp.csproj

./MyApp/bin/Debug/net5.0-windows/MyApp.exe が生成されるので、これを実行。

空の状態のウインドウが表示されました。

UserControl1 を作成

MyApp ディレクトリ内に、 UserControl1.xaml と UserControl1.xaml.cs を用意します。

UserControl1.xaml:

<UserControl x:Class="MyApp.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyApp"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock
            FontSize="30"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">Hello, World!</TextBlock>
    </Grid>
</UserControl>

Grid 要素の子要素として TextBlock 要素を配置して Hello, World! できるようにしています。

UserControl1.xaml.cs:

using System.Windows.Controls;

namespace MyApp
{
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }
    }
}

これで UserControl1 という名前の Hello, World! するユーザーコントロールができました。

MainWindow に UserControl1 を追加

MainWindow.xaml に追記します。

MainWindow.xaml:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:UserControl1 />
    </Grid>
</Window>

Grid の子要素に local:UserControl1 要素を追加しました。

この段階での my-app ディレクトリ以下のプロジェクト構成を確認します。

.
└── MyApp
    ├── App.xaml
    ├── App.xaml.cs
    ├── AssemblyInfo.cs
    ├── MainWindow.xaml
    ├── MainWindow.xaml.cs
    ├── MyApp.csproj
    ├── UserControl1.xaml
    └── UserControl1.xaml.cs

それでは、再び MyApp をビルドします。

dotnet.exe build MyApp/MyApp.csproj

./MyApp/bin/Debug/net5.0-windows/MyApp.exe が生成されるので、これを実行。

できた。

まとめ

UserControl1.xaml と UserControl1.xaml.cs の雛形を生成してくれる dotnet.exe コマンドがあるのかと思ったが、 わからなかった。 手動で作成しても知れているので、これでよい。