連載目次記事

WinUI 3 で GUI を作るのは簡単です。現行世代の .NET デスクトップアプリを作る技術である WPF や UWP と同じ XAML という XML で作ることができます。
XAML を使わずにコードで書いても良いのですが、おそらく XAML が圧倒的に多数派だと思います。

■ XAML

参考

参考情報は WPF ですが、構文はかわりません。コントロールが少し違いますが、同じ (名前空間が違ったりはしますが) コントロールがかなり多くあります。

■ こんな UI

実はこの記事は連載記事です。
ゴールとしてはこんな UI が作りたいと思っています。

一番上に JSON 文字列を入力する文字列入力の枠があります。
その下に「 click 」と書かれたボタンがあります。
さらにその下の領域全面に Web ページ (HTML ファイル) を表示する領域があります。

使い方としては JSON 文字列を貼り付けてボタンを押すと、内容を分析/整形して HTML を作成し、表示するアプリです。

■ XAML

こんな感じで 3 つのコントロールを並べた UI は非常に簡単に作れてしまいます。

<Window
    x:Class="stabuwinui3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stabuwinui3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" x:Name="textBox" AcceptsReturn="True" Height="100"/>
        <Button Grid.Row="1" Content="click" Click="Button_Click" />
        <WebView2 Grid.Row="2" x:Name="webView2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
    </Grid>
</Window>

こんな感じです。
自分で書いている部分は

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" x:Name="textBox" AcceptsReturn="True" Height="100"/>
        <Button Grid.Row="1" Content="click" Click="Button_Click" />
        <WebView2 Grid.Row="2" x:Name="webView2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />