MAUI プロジェクトで［RefreshView］のアイコンをカスタマイズする方法

Visual Studioの .NET MAUI プロジェクトで、コンテンツを引っ張って更新する機能を追加する［RefreshView］コントロールに表示される更新アイコンをカスタマイズする方法を備忘録的に投稿します。

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

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

Xaml内の更新する要素に［RefreshView］コントロールを追加します。

<?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>

詳しい内容は別記事をご覧ください。

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

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

更新アイコンのカスタマイズ

［RefreshView］コントロールで表示されるアイコンは、ある程度カスタマイズが可能です。

カスタマイズと言っても、アイコンリソースの変更などは公開されておらず色の変更などしか用意されていません。

例えば［RefreshColor］プロパティでアイコン内の矢印の色が変更できます。

<?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" RefreshColor="Red">
    <ScrollView>
      <WebView x:Name="webView" Source="https://www.google.com"/>
    </ScrollView>
  </RefreshView>

</ContentPage>

こんな感じで更新アイコンの矢印の色が変更されます。

カスタマイズと言っても、アイコンリソースの変更などは公開されておらず色の変更などしか用意されていません。

この他にも［BackgroundColor］プロパティでアイコンの背景色が変更できます。

<?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" RefreshColor="Red" BackgroundColor="Black">
    <ScrollView>
      <WebView x:Name="webView" Source="https://www.google.com"/>
    </ScrollView>
  </RefreshView>

</ContentPage>

こんな感じで更新アイコンの背景色が変更されます。

まとめ

今回はVisual Studioの .NET MAUI プロジェクトでコンテンツを引っ張って更新する機能を追加する［RefreshView］コントロールに表示される更新アイコンをカスタマイズする方法について書きました。

［RefreshView］コントロールには［RefreshColor］や［BackgroundColor］プロパティが用意されていて、更新処理時に表示されるアイコンのカスタマイズが可能です。

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

スポンサーリンク

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