MAUI Tips - BottomSheetを試す

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

# 開発環境
.NET MAUI
Visual Studio Code

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

# 手順
１. BottomSheetを実装するプロジェクトを準備します。
２. コマンドパレットでNuget Package ManagerのAdd Packageを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/802f9211-210f-05d4-37a1-f8076c7eb2b5.png)

３. 続いて、「BottomSheet」を検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/c9f2fc59-987f-173a-aafe-cbd1d1072637.png)

４. 検索結果の中から、「The49.Maui.BottomSheet」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/01ee5635-ad46-bc71-5f00-fb877624cdd3.png)

５. バージョンはとりあえず最新で。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/78f6fb4f-a276-e75a-210d-9379459a2cf5.png)
ポップアップでインストールが成功したことを確認してください。
→スクショ撮り損ねた💦

６. BottomSheet用のコンテンツビューを作成します。
  エクスプローラタブのソリューションエクスプローラ上で対象のプロジェクトを選択し、
  右側にあるNew Fileのアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/bda5b2ff-94fb-8e3e-26fc-e6757e3497ca.png)

７. コマンドパレット上に選択肢が出てくるので、ContentView（XAML）を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/2fe66870-a4c2-5b54-c24e-87a83e29f7db.png)

８. 適当にクラス名を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/d48f31cc-7b47-c96f-cde1-7566140bfb63.png)


９. 追加されたファイルのうち、まずcsファイルを開きます。
 usingで「The49.Maui.BottomSheet」を追加し、
 派生元クラスをContentViewからBottomSheetに変更します。
 ``` C#
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
<?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関数の中身を以下のように書き換えます。
``` C#
	private async void OnCounterClicked(object sender, EventArgs e)
	{
		var sheet = new BottomSheetView();
		await sheet.ShowAsync();
	}
```

上記で設定完了です。
実行してみるとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/9c0a8e96-0158-26d8-a87f-95d26f3c9dd5.png)