Home About
WPF , .NET

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

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

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

WPF-1

事前準備

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 が生成されるので、これを実行。

WPF-0

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

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 が生成されるので、これを実行。

WPF-1

できた。

まとめ

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