WinUI 3.0 でサンプルアプリを作成する


![VisualStudio 2019](https://img.shields.io/badge/VisualStudio-2019-007ACC.svg?logo=visualstudiocode&style=plastic) ![WinUI 3](https://img.shields.io/badge/WinUI-3-007ACC.svg?logo=visualstudiocode&style=plastic) ![language](https://img.shields.io/badge/language-C++-007ACC.svg?logo=visualstudiocode&style=plastic)

WinUI 3.0 を使って、C++　のデスクトップアプリを作ってみました。

## 参考リンク

- [About WinUI](https://microsoft.github.io/microsoft-ui-xaml/about.html)
- [Windows アプリ開発用ツールのインストール](https://docs.microsoft.com/ja-jp/windows/apps/windows-app-sdk/set-up-your-development-environment)
- [Windows App SDK を使ってデスクトップ Windows アプリを作成する](https://docs.microsoft.com/ja-jp/windows/apps/windows-app-sdk/)
- [Windows App SDK を使用して新しいプロジェクトを作成する](https://docs.microsoft.com/ja-jp/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-cpp)
- [「Project Reunion」の正式名称は「Windows App SDK」に ～v0.8が一般公開](https://forest.watch.impress.co.jp/docs/news/1334345.html)
- [WindowsAppSDK/roadmap.md at GitHub microsoft/WindowsAppSDK](https://github.com/microsoft/WindowsAppSDK/blob/main/docs/roadmap.md)
- [Windows Controls and patterns - Windows app development](https://docs.microsoft.com/en-us/windows/apps/design/controls/)
- [Windows アプリの設計とコーディング](https://docs.microsoft.com/ja-jp/windows/apps/design/)
- [Windows 10 Fall Creators Updateで導入された「Fluent Design System」の4つの機能とは？](https://atmarkit.itmedia.co.jp/ait/articles/1711/17/news015.html)

## はじめに

Windows 11 で全面的に採用されている  Fluent Design System。
それを実現する WinUI 3.0 の v0.8 (stable) が 2021年6月にリリースされました。

Windows 10 でも 1809 以降では、WinUI 3.0 が使えるようになっています。
ということで、実際にどんな感じになっているのか作ってみます。

## 環境準備

Visual Studio 拡張機能の [Project Reunion](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftProjectReunion) を導入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30578/1fe75009-769b-0b5b-0c3b-d6b9f0c037c2.png)

### Project Reunion から Windows App SDK へ

現在は、「Windows App SDK」という名称に変わりましたが、機能拡張を含む多くの部分に未だ「Project Reunion」が残っています。

これまで Store アプリには UWP が必須でしたが、将来的には Win32 アプリなども Store アプリとして配布できるようになるらしいです。そういう統合の意味を含めた Reunion という名前だったらしいです。


## プロジェクトの作成

WinUI 3 in Desktop を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30578/bfaaa64f-c863-d4a4-58d2-fc5ecd8fecee.png)


## 作成されたアプリ

「Click Me」ボタンしかなく寂しかったので、いくつか追加してみました。
XAML いじるだけなので、この辺りは簡単です。
背景色が黒ですが、これは　設定　の　色　で　`ダーク` を選んでいるためです。
設定を `ライト` に変えれば、背景色は動的に白に変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30578/4747cf9a-6d0f-bc80-8050-cbd4b8a9ea81.png)


## プロジェクト

ソースとパッケージの２つのプロジェクトから構成されています。
この時点では、Windows App SDK は v0.83 だとわかります。

※ 現時点の Windows App SDK では、MSIX　パッケージでないと動きません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30578/70a2a16d-8ee0-690f-4b66-4bd6b8491195.png)

作成したソースは、[こちら](https://github.com/qt6hy/WinUI3-cpp1)。


### ソースコード抜粋（XAML）

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

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
        <ColorPicker
              ColorSpectrumShape="Ring"
              IsMoreButtonVisible="True"
              IsColorSliderVisible="True"
              IsColorChannelTextInputVisible="True"
              IsHexInputVisible="True"
              IsAlphaEnabled="False"
              IsAlphaSliderVisible="True"
              IsAlphaTextInputVisible="True" />
        <ToggleSwitch>トグルボタン</ToggleSwitch>
        <DropDownButton AutomationProperties.Name="Email">
            <DropDownButton.Content>
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE715;"/>
            </DropDownButton.Content>
            <DropDownButton.Flyout>
                <MenuFlyout Placement="Bottom">
                    <MenuFlyoutItem x:Name="mySendMail" Text="Send" Click="mySendMail_Click">
                        <MenuFlyoutItem.Icon>
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE725;"/>
                        </MenuFlyoutItem.Icon>
                    </MenuFlyoutItem>
                    <MenuFlyoutItem Text="Reply">
                        <MenuFlyoutItem.Icon>
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8CA;"/>
                        </MenuFlyoutItem.Icon>
                    </MenuFlyoutItem>
                    <MenuFlyoutItem Text="Reply All">
                        <MenuFlyoutItem.Icon>
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8C2;"/>
                        </MenuFlyoutItem.Icon>
                    </MenuFlyoutItem>
                </MenuFlyout>
            </DropDownButton.Flyout>
        </DropDownButton>
        <AppBarButton x:Name="myAppBarButton" Icon="Like" Label="シンボルボタン" Click="myAppBarButton_Click"/>
        <RatingControl AutomationProperties.Name="Simple RatingControl" IsClearEnabled="True" IsReadOnly="False" />

    </StackPanel>
</Window>

```

### ソースコード抜粋（C++）

```cpp
#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif

using namespace winrt;
using namespace Microsoft::UI::Xaml;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace winrt::WinUI3_cpp1::implementation
{
    MainWindow::MainWindow()
    {
        InitializeComponent();
    }

    int32_t MainWindow::MyProperty()
    {
        throw hresult_not_implemented();
    }

    void MainWindow::MyProperty(int32_t /* value */)
    {
        throw hresult_not_implemented();
    }

    void MainWindow::myButton_Click(IInspectable const&, RoutedEventArgs const&)
    {
        myButton().Content(box_value(L"Clicked"));
    }

    void MainWindow::myAppBarButton_Click(IInspectable const&, RoutedEventArgs const&)
    {
        myAppBarButton().Label(L"イイネ");
    }

    void MainWindow::mySendMail_Click(IInspectable const&, RoutedEventArgs const&)
    {
        mySendMail().Text(L"Sended!");
    }

}


```


## 感想

- まだ v0.8 であり、MSIX パッケージ化が必要など制約も残っている。
- XAML ベースの開発に慣れるにはいいかも。
- XAML の GUI エディターがないので、XAML は全部手で編集が必要でちょっとげんなり。でも [XAML Controls Gallery](https://www.microsoft.com/ja-jp/p/xaml-controls-gallery/9msvh128x2zt?activetab=pivot:overviewtab) を Microsoft Store から入手すれば、XAML の編集もかなり楽にはなります。

### XAML Controls Gallery

コントロールやそのオプションを選ぶと、その XAML 表現がリアルタイムで表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30578/16319ae4-78a5-4aff-a364-fa839c14805b.png)