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) の新しいプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/87aab868-0ffd-9723-2256-7f96ec2699d6.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/54dd3cde-5c73-ac30-69cf-1793dfb108bb.png)

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 がある サンプルアプリ が完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/066d9748-027e-0624-050f-1aaa6ff30a97.png)


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