はじめに

WinUI 3のアプリケーションではウィンドウのデザインはXAMLファイルを編集して作成する必要があります。 Visual StudioのXAMLデザイナーはWPFアプリやUWPアプリ用のため、WinUI 3には対応していないです。

最近は、GitHub CopilotやChat GPTの登場で、LLMでコードを生成する方法もあります。 今回はFigmaで画面をデザインして、WinUI 3のXAMLコードを生成する方法が利用できるか試してみます。

画面のデザイン

はじめにFigmaを利用してフォームのデザインを作成します。今回は下図のフォームをデザインしました。
どんなウィンドウコントロールかがわかるように、箱の中にTextBoxやButtonの文字を入力しておきます。

フレームを選択して、エクスポートします。PNGファイルでエクスポートします。

下図の画像がエクスポートできました。

WinUI 3アプリケーションの作成

Visual StudioでWinUI 3アプリケーションを作成します。 手順の詳細はこちらの記事を参照してください。


実行します。下図のウィンドウが表示されました。からのアプリケーションのため、何も表示されていない状態です。

XAMLファイルの修正

WinUI 3アプリケーションが実行できることが確認出来たら、フォームのMainWindow.xamlファイルを修正します。

MainWindow.xamlファイルを開きます。GitHub Copilot チャットのウィンドウも開きます。


先に作成したデザインの画像をGitHub Copilotのチャットに添付します。 チャットの指示(プロンプト)には以下を記述します。

チャットウィンドウの下部の[質問]の部分をクリックします。ドロップダウンリストが表示されますので、[エージェント]を選択します。


エージェントに変更できました。エージェントのモードにするとGitHub Copilotが直接ソースコードを修正するモードになります。

GitHub Copilotチャットにメッセージを送信して実行します。MainWindow.xamlファイルが編集された状態になります。


[保持] ボタンをクリックして変更されたコードを保持します。

変更後のXAMLのコード

編集されたMainWindow.xamlのコードは以下です。Gridを利用したレイアウトになっています。

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="FormDesignFromFigma.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FormDesignFromFigma"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="FormDesignFromFigma">

    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid Padding="24" ColumnSpacing="24" RowSpacing="16">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="420" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Input1 Row -->
        <TextBlock Grid.Row="0" Grid.Column="0" Text="Input1" VerticalAlignment="Center" />
        <TextBox Grid.Row="0" Grid.Column="1" x:Name="Input1TextBox" Text="TextBox" HorizontalAlignment="Left" Width="420" />

        <!-- Input2 Row -->
        <TextBlock Grid.Row="1" Grid.Column="0" Text="Input2" VerticalAlignment="Center" />
        <TextBox Grid.Row="1" Grid.Column="1" x:Name="Input2TextBox" Text="TextBox" HorizontalAlignment="Left" Width="420" />

        <!-- Button Row -->
        <Button Grid.Row="2" Grid.Column="1" x:Name="ActionButton" Content="Button" HorizontalAlignment="Left" />

        <!-- Result Row -->
        <TextBlock Grid.Row="3" Grid.Column="0" Text="Result" VerticalAlignment="Center" />
        <TextBox Grid.Row="3" Grid.Column="1" x:Name="ResultTextBox" Text="TextBox" HorizontalAlignment="Left" Width="420" />
    </Grid>
</Window>

実行結果

プロジェクトを実行します。


下図のウィンドウが表示されます。Figmaでデザインしたものと同じウィンドウコントロールが指定した配置レイアウトで表示できています。

GitHub Copilotを利用してFigmaでデザインしたフォームからXAMLのコードを生成できました。