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

Posted at 2021-09-11

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

参考リンク

はじめに

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

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

環境準備

Visual Studio 拡張機能の Project Reunion を導入します。

Project Reunion から Windows App SDK へ

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

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

プロジェクトの作成

WinUI 3 in Desktop を選びます。

作成されたアプリ

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

プロジェクト

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

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

作成したソースは、こちら。

ソースコード抜粋（XAML）

<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++）

#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 を Microsoft Store から入手すれば、XAML の編集もかなり楽にはなります。

XAML Controls Gallery

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up