MAUI プロジェクトで引っ張って更新を追加する手順

Visual Studioの .NET MAUI プロジェクトで、コンテンツを引っ張って更新する機能を追加する手順を備忘録的に投稿します。

コンテンツを引っ張って更新

MAUI プロジェクトにスマホアプリで使われている引っ張って更新（Pull-to-Request）の追加は次の手順で行います。

Xaml内の更新する要素に［RefreshView］コントロールを追加します。（［ScrollView］コントロールが無い場合には、追加します）

<?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="MauiSamples.MainPage">

  <RefreshView x:Name="refreshView"  Refreshing="RefreshView_Refreshing">
    <ScrollView>
      <WebView x:Name="webView" Source="https://www.google.com"/>
    </ScrollView>
  </RefreshView>

</ContentPage>

今回は更新しやすい［WebView］コントロールを利用していますが、他のコントロール（［Image］コントロールなど）でも可能です。

［Refreshing］イベントを追加してコードを追加します。

private void RefreshView_Refreshing(object sender, EventArgs e)
{
  refreshView.IsRefreshing = true;
  webView.Reload();
  refreshView.IsRefreshing = false;
}

［RefreshView］コントロールには、［IsRefreshing］プロパティというフラグがあり、［True］を設定しておけば、多重更新がなくなります。

また、更新後は［False］に変更します。

ここまでの処理で、実行してコンテンツを引っ張ると

こんな感じで更新を通知するアイコンが表示されて、イベントが実行されます。

まとめ

今回はVisual Studioの .NET MAUI プロジェクトでコンテンツを引っ張って更新する機能を追加する手順について書きました。

.NET MAUI プロジェクトの場合、［RefreshView］コントロールを利用してコンテンツを引っ張って更新する機能が追加できます。

.NET MAUI プロジェクトでAndroidデバイスなどでコンテンツを引っ張って更新したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。