WinUI 2.2 でサンプルアプリケーションを作成する

今回は UWP の UI のコントロールである WinUI を使用してみます。2020年 に WinUI 3.0 が発表される予定ですが、今回は現時点での最新機能が含まれている Win2.2 を試してみようと思います。

WinUI 2.2 サンプルアプリの開発

ユニバーサル Windows プラットフォーム開発と C++/WinRT がワークロードとして入っている Visual Studio 2019 を準備します。その環境で Blank App (C++/WinRT) の新しいプロジェクトを作成します。

次に、WinUI 2.2 を扱うために、Microsoft.UI.Xaml をインストールします。この Nuget Package をインストールすることで、最新の WinUI を扱うことが可能です。

Nuget Package がインストールできたら、以下の様にコードを編集していきます。

App.xaml

<Application
    x:Class="WinUISampleApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISampleApp">
 
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
 
</Application>

MainPage.xaml

<Page
    x:Class="WinUISampleApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">
 
    <muxc:NavigationView PaneTitle="Welcome">
        <TextBlock Text="Hello, World!" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}"/>
    </muxc:NavigationView>
 
</Page>

MainPage.h

# include "MainPage.g.h"
# include "winrt/Microsoft.UI.Xaml.Controls.h"
# include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
 
namespace winrt::WinUISampleApp::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();
 
        int32_t MyProperty();
        void MyProperty(int32_t value);
 
        void ClickHandler(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
    };
}
 
namespace winrt::WinUISampleApp::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

MainPage.cpp

# include "MainPage.g.h"
# include "winrt/Microsoft.UI.Xaml.Controls.h"
# include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
 
namespace winrt::WinUISampleApp::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();
 
        int32_t MyProperty();
        void MyProperty(int32_t value);
 
        void ClickHandler(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
    };
}
 
namespace winrt::WinUISampleApp::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

これで NavigationView がある サンプルアプリ が完成です。

参考

Windows UI Library
https://docs.microsoft.com/ja-jp/uwp/toolkits/winui/