Visual Studio 2022 for Mac プレビューを使って、.NET MAUI アプリをビルドしてみた

いわさ

2022.06.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

いわさです。

先日遂に.NET MAUI を触ったわけですが、なかなかおもしろいです。

前回の記事では、WinUI 3 と Android で実行させました。
今回はmacOS上で、iOS と Android で実行させてみたいと思います。

Visual Studio 2022 for Mac プレビューを導入する

iOS アプリおよび macOS アプリ向けの公式ドキュメントでは本日時点では .NET CLI を使った構築方法が案内されていました。

しかし、先日の Visual Studio 2022 と同様に Visual Studio 2022 for Mac でもプレビューでは既に .NET MAUI 機能がサポートされているようなので、こちらを試してみたいと思います。

Visual Studio 2022 for Mac プレビュー

インストール時に .NET MAUI コンポーネントをインストール対象に含めます。

まずは作成してビルド・実行してみる

まずは新規テンプレートからソリューションを作成し、実行してみます。
前回の記事で少し触れましたが、.NET MAUI Blazor アプリと .NET MAUI アプリが存在しています。本日も後者を選択します。

ソリューション構成はもちろん Visual Studio 2022 と同じです。

ターゲットプラットフォームと実行デバイスを選択します。
iOSシミュレーターはXcodeで管理しているシミュレーターで、Androidエミュレーターは Android デバイスマネージャーで管理されているデバイスです。
ここでは、iPhone 13 (iOS 15.5) と Pixel 5 (API 31) で実行しています。

デフォルトテンプレートでは、AppShellに包括されているMainPageが表示されるようになっています。
後述しますが、スタイルリソースなどを定義しているため、iOS と Android でかなり類似したユーザーインターフェースになっています。

自分でページを作ってデフォルトスタイルで見てみる

今回は、新規でページを作成し、デフォルトで用意されているページ以外を使った場合にどのように見えるのかをiOSとAndroidデバイスで確認してみます。
プロジェクトに新しいファイル(.NET MAUI ContentPage(XAML))を追加します。

新規作成すると以下のようなXAMLファイルが生成されます。
Xamarin.Formsに慣れている方は、VerticalStackLayoutというコンポーネントに違和感を感じるかもしれません。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="hoge0619maui.HogePage"
             Title="HogePage">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

こちらは、.NET MAUI で追加された新しいレイアウトコンポーネントのようです。
VerticalStackLayout　と HorizontalStackLayout が用意されています。

ただし、馴染みのあるStackLayoutも引き続き使うことが出来ます。
なので、Xamarin.Formsからコンテンツを移行した場合でもStackLayoutのまま使い続けることが出来ますね。

ここでは、適用に基本コンポーネントを並べてみました。
コードビハインドやViewModelなどは何もナシです。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="hoge0619maui.HogePage"
             Title="HogePage">
    <StackLayout
        Orientation="Vertical">
        <Label Text="hoge" />
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Switch Grid.Row="0" Grid.Column="0" />
            <Label Grid.Row="0" Grid.Column="1" Text="hoge switch" />
            <CheckBox Grid.Row="1" Grid.Column="0" />
            <Label Grid.Row="1" Grid.Column="1" Text="hoge checkbox" />
        </Grid>
        <Button Text="fuga" />
    </StackLayout>
</ContentPage>

AppShellでMainPageをテンプレートに設定しているので、そこを変更します。

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="hoge0619maui.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:hoge0619maui"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:HogePage}"
        Route="HogePage" />

</Shell>

独自で作成したページが表示されましたね。
Grid配置出来ていそうです。

若干のち外はありますが、スタイルなどが iOS と Android でだいぶ似ていますね。
これはXamarin.Formsと同じ方法で、デフォルトでスタイルリソースが設定されているためです。

様々な場所でスタイルリソースを定義することが出来ますが、デフォルトではアプリケーション全体に影響するApp.xamlで定義されています。
試しに、以下のハイライト部分のようにコメントアウトしてみます。

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:hoge0619maui"
             x:Class="hoge0619maui.App">
    <Application.Resources>
        <!--<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>-->
    </Application.Resources>
</Application>

かなりネイティブデフォルトな感じが出ていますね。
コンポーネントの見た目の統一のためにスタイルリソースを駆使する点はXamarin.Formsと変わらないようです。

さいごに

本日は Visual Studio 2022 for Mac Preview で .NET MAUI を触り、ついでにユーザーインターフェース周りを少し調べてみました。
表面的な使用感としては Xamarin.Forms ですね。
Xamarin.Forms を使っていた方であればそのままアプリケーション開発を始められると思います。

個人的にはレンダラー周りやバインディングライブラリがどんな感じになったのか、変わっているのか、など気になっていますが、そのあたりももう少し掘り下げてみていきたいと思います。