【.NET MAUI】Shell で遊んでみた(その2)

前回より MAUI Shell に触れ始めました。
.NET MAUI のShell は、基本的に Xamarin.Forms のShell と機能が同じようで、モバイルアプリケーションの基本機能であるナビゲーション・・・平たく言えば、モバイルアプリの画面(ページ)遷移や検索等の機能を統合的に管理し、かつ操作を標準化する機能なようです。今回は複数のページを Shell でどのように遷移するのか、試してみたいと思います。

 

画面遷移の挙動確認用として、ContentPage をプロジェクトに三つ追加してみます。新規の MAUI プロジェクトを作成し、ソリューションエクスプローラでプロジェクトを選択。右クリックし、「追加(D)」→「新しい項目(W)」とクリックします。「新しい項目の追加」画面が起動したら、「.NET MAUI ContenPage(XAML)」を選択し、Page1.xaml と名前を付けて保存します。

 

同じ要領で ContentPage を二つ続けて追加します。わかりやすいよう「Page2.xaml」「Page3.xaml」と名前を変えて追加します。

 

どのページが選択されているかわかりやすくするため、ページ番号を表示するよう ContenPage の記述を変更します。

ContentPage の変更

 

他のページの XAML もページ数に合わせて以下のように書き換えます。

Page2.xaml の場合

    ・・・・
    <Label Text="2" FontSize="72" VerticalOptions="Center" HorizontalOptions="Center" />
    ・・・・

Page3.xaml の場合

    ・・・・
    <Label Text="3" FontSize="72" VerticalOptions="Center" HorizontalOptions="Center" />
    ・・・・

 

AppShell.xaml を編集して、すべての ContentPage を表示できるようにします。なお Shell.FlyoutBehavior プロパティは Flyout に変更しておきます。

AppShell を編集

 

デバッグを開始します。

 

ハンバーガーボタンをクリックすると、メニューがドロップダウンします。AppShell.xaml に記述した ShellContent が表示されてます。

 

Page1 をクリックすると、Page1.xaml のページが表示されます。

 

同じく Page2 をクリック。

 

ただし最近の流れでは、ハンバーガーボタンで ContentPage を切り替えるのではなく、TabBar でページ遷移を行なうのが主流になりつつあるそうです。確かにハンバーガーボタンはアプリを操作する側としたら直感的でない嫌いがあります。そこで ShellContent を TabBar の配下に変更します。その際、ハンバーガーボタンは不要になるので、Shell.FlyoutBehavior プロパティは Disabledに変更しておきます。

ShellContent を TabBar の配下に変更

 

TabBar での画面もといページ遷移に変更しました。

 

Page1 をクリックしたところ。さらにユーザーエクスペリエンスを考慮し、タブはアイコンを設けるのがデザインの主流だそうですね。現状はまだ味気ないですが、今日のところはここまで。

 

【.NET MAUI】Shell で遊んでみた(その1)

ブログ再開してから、ひたすら .NET MAUI の記事を書いてます。

一つのプロジェクトに長らく関わり続けていると、新技術の習得機会が失われがちなもので、ずっ~と WPF MySQL 界隈で学習が止まってました。

しかし最近、Microsoft から新しい UI がリリースされると聞き、現時点の導入予定はないものの、まずはひたすらアウトプットし続けようと思い立ちました。最初はド素人でも「継続は力なり」で、出力し続けるうちにいつの間にか「熟練」の域に達したりするものです。

 

さて、この .NET MAUI、画面の管理や遷移はいったいどうなってるのか?ちょいと調べたところ、Shell なるものでページ管理できるようです。

docs.microsoft.com

 

モバイルでも動作するよう、WPF まで用いられてきた画面(Window)の概念はなく、ページナビゲーションの機能が用いられているようですね。

docs.microsoft.com

 

どうやらプロジェクトに含まれる AppShell.xaml で編集するようです。MAUI プロジェクトを新規作成すると、AppShell.xaml があるのでこれを開いてみてみます。

 

AppShell の初期状態

 

7行目の

Shell.FlyoutBehavior="Disabled"

がまず気になります。Shell.FlyoutBehavior に設定可能な値は三つ用意されているようです。

 

これをいろいろ変えて起動してみましょうか。まずは「Disabled」の場合。ちなみにイメージはうざいので、MainPage.xaml のコードでコメントアウトしてます。

 

次に「Flyout」。左上にハンバーガーボタンが追加されました。クリックするとメインページにアクセスするポップアップが表示されます。

 

そして「Locked」。ポップアップが固定されました。

 

私は Xamarin.Forms を使ったことないのですが、この辺りのインターフェイスは Xamarin.Forms の機能を継承してるんですかね。

docs.microsoft.com

 

次回も Shell に触れてみようと思います。

 

【.NET MAUI】CommunityToolkit でMVVM

昨日の記事では、.NET MAUI MVVM の実装を試みました。しかし現在様々なベンダーから MVVM デザインパターンをサポートするフレームワークが提供されており、これらを使えば容易にMVVM での開発を行なえます。今回は、CommunityToolkit を使って、.NET MAUI のサンプルを MVVM 化したいと思います。

 

docs.microsoft.com

 

CommunityToolkit はプラットフォームやランタイムに依存せず、高パフォーマンスを期待できるフレームワークです。Visual Studio .NET MAUI のプロジェクトを新規作成後、ソリューションエクスプローラでプロジェクトを選択し右クリック。ショートカットメニューから「NuGet パッケージの管理(N)」をクリックします。

 

「参照」タブを選択、「検索」に ToolKit.MVVM と入力すると、「CommunityToolkit.MVVM」がヒットします。このパッケージをプロジェクトにインストールします。似たようなパッケージでMicrosoft.Toolkit.MVVM」がありますが、こちらと間違えないよう注意ください。

 

これで CommunityToolkit の用意はできました。次にプロジェクトにビューモデルを追加します。実装は以下のとおり。CommunityToolkit で提供されている ObservableObject クラスを継承してビューモデルを構築しています 。昨日のビューモデルの実装と比較すると、かなりシンプルなコードになっているのがわかります。

CommunityToolkit.Mvvm での ViewModel サンプル

 

docs.microsoft.com

 

通知プロパティのセッターの実装を簡略化する SetProperty メソッド。また ViewModel のコマンドをサポートする RelayCommand クラスが提供されているので、これらを使うとコードがホントにすっきりしますね。

 

ビューは昨日と同じコード。ビューモデルとバインドします。

ビューをビューモデルとバインドさせる

 

実行するとこうなる。。。

 

私は WPF での開発を続けているので MVVM フレームワークに長らく Livet を使ってきましたが、選択肢の幅が広がるのはいいことです。これもなかなか良さげな感がありますね。

 

 

 

 

 

【.NET MAUI】.NET MAUI でMVVM

先週に引き続き、.NET MAUI の記事です。

今回は ,NET MAUI 新規プロジェクト作成時のイベント処理を ViewModel を設け、MVVM のデータバインディングによる更新へ変更します。

 

新規プロジェクト作成時、ビューのカウンター処理は、ボタンクリックイベント内で SemanticScreenReader.Announce メソッドで更新されています。

ボタンクリックイベントの実装

 

SemanticScreenReader.Announce に関する詳細はこちら。

docs.microsoft.com

 

これを ViewModel とのバインドに変更します。

 

まずはプロジェクトに ViewModel を追加。ViewModel は  INotifyPropertyChanged を継承し、プロパティ変更を通知する、お決まりの通知メソッド OnPropertyChanged を実装します。さらにカウンタの文字列を変更する CounterText を追加します。

ビューモデルをプロジェクトに追加

 

これだけではカウンタは変更しません。次にコマンドを追加し、カウンタを更新するようにします。これもお決まりのパターンです。

ビューモデルにカウンタ更新用のコマンドを追加した

 

最後はビューとのバインドです。

ビューをビューモデルとバインドさせる

 

不要になった Main.xaml.cs のコードビハインドは削除します。

コードビハインドは削除しておく

 

最後にソリューションをビルドして起動。これでボタンクリックするたびデータバインディングでカウンターが更新されるようになりました。



 

【.NET MAUI】Mac で実行できるか試してみた

前回に引き続き、.NET MAUI の記事です。

当方、AndroidMac は初心者なので、その辺を考慮して記事を読んで頂けば幸いです。

 

今回は iOS を選択して、Mac でサンプルを実行します。

まず下準備として、MacVisual Studio 2022 for Mac Preview をダウンロード・インストールします。 

 

Visual Studio の MAUI プロジェクトのデバッグ実行をドロップダウンで「iOS Remote Device」に変更して、デバッグ開始します。

「リモートデバイス」をクリックすると、最初にガイダンスが表示されます。以下のアナウンスに従って、Mac のリモートログインを有効化します。

 

 

 

Mac がネットワークに接続しているとリストに表示されるので、選択して「接続」をクリック。リストに存在しない場合は、右下の「Mac の追加」ボタンをクリックして、該当する Mac PCを選択してください。

 

「接続」ボタンをクリックすると、ターゲットのMac マシンとの接続を開始します。最初にユーザー名とパスワードの入力を要求されます。

 

接続中・・・・

 

あら?

 

マシンとの接続は確立できてるようですが、dotnet.dll が指定のパスに見つからないとエラーが出ました。「6.0.300-preview.22204.3」までのパスは存在しますが、確かに dotnet.dll は存在しませんね(謎

 

ターミナル起動して

 

MAUI のインストール

 

を実行し、MAUI をインストールし直しても状況は変わらないです(汗

 

追記:

Xamarin.Forms でMac と接続できるか試してみました。こちらは問題ないようです。引き続き調査してみます。



 

【.NET MAUI】Android Emulator その2

またまた昨日に引き続き、.NET MAUI の記事です。

昨日、MAUI のサンプルプロジェクトを Android Emulator で実行してみましたが、正直あまりに遅すぎて使い物になりませんでした。そこでいろいろ調べたところ、@amay077さんの記事が見つかりました。

 

qiita.com

 

Android Studio をインストールして設定する方法、良さ気です。この方法に従ってHyper-V を無効化して試してみたところ、比較的速く起動しました。その後、再度Hyper-Vを有効化して実行すると、あれサクッと起動した??ただしエミュレーターへのプログラムのロードから実までエラく時間かかりますね。当方の環境だと約10分くらいかかります。

当方の環境が Celeron G3930 2.90 GHz のため、仕方ないのかもしれませんが(汗

 

developer.android.com

 

 

【.NET MAUI】Android Emulator

昨日に引き続き、.NET MAUI の記事です。

昨日は WIndows 環境で実行しましたが、本日は Android Emulator で実行してみます。ソリューションは作成時のまま、試してみます。

 

Android Emulator は名前の通り Android での動作試験用エミュレーターです。初期状態では Android Emuloator はインストールされてないので、環境構築する必要があります。私は普段、WIndowsデスクトップアプリしか開発してので、Android エミュレーターの環境構築ははじめてです。

 

Android Emulator は仮想環境で動作するので Hyper-V の有効化が必須です。Windows の機能」Hyper-V をオンにして Windows を再起動します。

 

Windows ハイパーバイザー プラットフォームも合わせて有効化します。

 

HAXM というのもあるようです。

github.com

 


Visual Studio 2022を起動、ソリューションを開き、Android Emulators を選択すると

 

Android Emulator がインストールされてない場合、Android の仮想デバイスを設定する画面が起動するのでインストールを開始します。

 

ライセンスの同意を求められるので「同意する」をクリック。

 

Android Device Manager に登録されました。

 

デバッグ環境を「Pixel 5 - API 30(Android 11.0 - API30)」にして実行。待つこと約15分、ようやくデモアプリが起動しました(苦笑)。。。。