WinUI3でも付箋アプリを作りたい（下調べ）

Windowsアプリを作るならWinUIも外せない

Flutter on Desktopはとっても簡単にデスクトップアプリが作れますが、Windowsネイティブでアプリを作るならWinUIも外せない。ということで使いこなせるかどうか触ってみました。ちなみに私はC#erなのでWinFormsでの業務アプリの開発経験があります。

WinUI3にはデザイナーがないけどFlutterのウィジェットに慣れてきたのでさほど違和感はなし

プロジェクトをWinUI3でスキャフォールドしてコードを確認してみたところ、xamlとxaml.csで構成されていることがわかりました。Razor Pagesのcshtmlとcshtm.csの関係のhtmlcがxmlに置き換わったようなものなのでさほど違和感はありませんでした。WInForms時代に見たら混乱していたかも知れません。

コードに触れてみる

MainWindow.xaml.cs

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        IntPtr hWnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
        WindowId myWndId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(hWnd);
        AppWindow appWindow = AppWindow.GetFromWindowId(myWndId);

        appWindow.Resize(new SizeInt32(400, 400));

        var presenter = appWindow.Presenter as OverlappedPresenter;
        presenter.IsResizable = false;
    }

    private async void myButton_ClickAsync(object sender, RoutedEventArgs e)
    {
        var cd = new ContentDialog
        {
            Title = "YoYo Sticky WINUI3",
            Content = "よよのふせん",
            CloseButtonText = "OK",
            XamlRoot = this.Content.XamlRoot
        };

        await cd.ShowAsync();

        myButton.Content = "Clicked";
    }
}

MainWindow()

WindowsAPIを利用してMainWindowsを取得し、リサイズしてからさらにリサイズを禁止してみました。

myButton_ClickAsync()

myButton_Clickを非同期に書き換えて、ContentDialogクラスをShowAsync()で表示してみました。

感想

Flutter on Desktopより、よりダイレクトにWindowsに触れている感があります。FlutterのパッケージはWin32APIなどをラップしたライブラリとして使えるようにしてくれますが、WinUIでは自分で実装していくことになるのでハードルはあがりますがやれることは確実に増えます。

今後FlutterとWinUiのどちらで開発するか悩むところですが、Flutterで馴染んだマテリアルデザインは捨てがたいので現状では決め切れていません。またFlutter Desktopビルドでは基本的にMobileビルドと同じデザイン・同じ挙動には出来ないためWinUIに対してのクロスプラットフォームのアドバンテージはありません。

いっぽうでFlutterはフロントエンドアプリの扱いのためCloud Firestoreの利用が標準でサポートされています。WinUIはフロント型でもホスト型でもないためCloud Firestoreを利用できるパッケージが存在しておらず（RealTimeDatabeseの方はあったはず）Cloud Functionで対応することになります。