MAUI Tips - BottomSheetを試す

概要

.NET MAUIアプリの開発で、BottomSheet（スマホの下からヌッと上がってくる画面）を実装することになったので、その備忘録。

開発環境

.NET MAUI
Visual Studio Code

前提

.NET MAUIの開発環境に加えて、Nuget Package Managerが入っていること

手順

１. BottomSheetを実装するプロジェクトを準備します。
２. コマンドパレットでNuget Package ManagerのAdd Packageを選択します。

３. 続いて、「BottomSheet」を検索します。

４. 検索結果の中から、「The49.Maui.BottomSheet」を選択します。

５. バージョンはとりあえず最新で。

ポップアップでインストールが成功したことを確認してください。
→スクショ撮り損ねた💦

６. BottomSheet用のコンテンツビューを作成します。
エクスプローラタブのソリューションエクスプローラ上で対象のプロジェクトを選択し、
右側にあるNew Fileのアイコンをクリックします。

７. コマンドパレット上に選択肢が出てくるので、ContentView（XAML）を選択します。

８. 適当にクラス名を入力

９. 追加されたファイルのうち、まずcsファイルを開きます。
usingで「The49.Maui.BottomSheet」を追加し、
派生元クラスをContentViewからBottomSheetに変更します。

using The49.Maui.BottomSheet;

namespace BottomSheetSample;

public partial class BottomSheetView : BottomSheet
{
   public BottomSheetView()
   {
   	InitializeComponent();
   }
}

１０. 追加されたファイルのxamlファイルを開きます。
一番外側のタグがContentViewとなっているので、それを「the49:BottomSheet」に変更します。
また、そのタグの属性として、xmlns:the49を追加します（値は下記コードを参照）。
追加の属性として、HasHandle、HasBackdropをTrueで設定しておきます。
BottomSheetの高さを決めるために、Detentsを設定します。
ここでは、0.5（スクリーンの半分）を設定しています。
このままだと、BottomSheetとハンドルの表示が被ってしまうので、VerticalStackLayoutにMarginの設定を行っています（お好みでどうぞ）。

<?xml version="1.0" encoding="utf-8" ?>
<the49:BottomSheet xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:the49="https://schemas.the49.com/dotnet/2023/maui"
            x:Class="BottomSheetSample.BottomSheetView"
            HasHandle="True"
            HasBackdrop="True"
            >
   <the49:BottomSheet.Detents>
       <the49:RatioDetent Ratio="0.5" />
   </the49:BottomSheet.Detents>             
   <VerticalStackLayout Margin="16">
       <Label 
           Text="Welcome to .NET MAUI!"
           VerticalOptions="Center" 
           HorizontalOptions="Center" />
   </VerticalStackLayout>
</the49:BottomSheet>

１１. 次にBottomSheetを呼び出す処理を作ります。
今回はMainPage.xaml内に自動生成されているボタン（お馴染みのカウントアップするやつ）の処理を削除して、
BottomSheetを呼び出すようにします。

MainPage.xaml.csを開いて、OnCounterClicked関数の中身を以下のように書き換えます。

	private async void OnCounterClicked(object sender, EventArgs e)
	{
		var sheet = new BottomSheetView();
		await sheet.ShowAsync();
	}

上記で設定完了です。
実行してみるとこんな感じ。