RefreshView

サンプルを参照する

.NET Multi-platform App UI (.NET MAUI) RefreshView は、スクロール可能なコンテンツの更新機能をプルするコンテナー コントロールです。 したがって、RefreshView の子は、ScrollView、CollectionView または ListView などのスクロール可能なコントロールである必要があります。

RefreshView は次の特性を定義します。

• ICommand 型の Command は、更新がトリガーされたときに実行されます。
• CommandParameter: object 型、Command に渡されるパラメーター。
• bool 型の IsRefreshing は、RefreshView の現在の状態を示します。
• Color 型の RefreshColor は、更新中に表示される進行状況の円の色です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Note

Windows では、プラットフォーム固有の RefreshView のプル方向を設定できます。 詳細については、「Windows での RefreshView のプル方向」を参照してください。

認証要求の処理に使用する RefreshView

ページに RefreshView を追加するには、RefreshView オブジェクトを作成し、その Command オブジェクトと IsRefreshing プロパティを設定します。 次に、その子をスクロール可能なコントロールに設定します。

次の例は、XAML で RefreshView オブジェクトをインスタンス化する方法を示しています。

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <ScrollView>
        <FlexLayout Direction="Row"
                    Wrap="Wrap"
                    AlignItems="Center"
                    AlignContent="Center"
                    BindableLayout.ItemsSource="{Binding Items}"
                    BindableLayout.ItemTemplate="{StaticResource ColorItemTemplate}" />
    </ScrollView>
</RefreshView>

コードで RefreshView を作成することもできます。

RefreshView refreshView = new RefreshView();
ICommand refreshCommand = new Command(() =>
{
    // IsRefreshing is true
    // Refresh data here
    refreshView.IsRefreshing = false;
});
refreshView.Command = refreshCommand;

ScrollView scrollView = new ScrollView();
FlexLayout flexLayout = new FlexLayout { ... };
scrollView.Content = flexLayout;
refreshView.Content = scrollView;

この例では、RefreshView は FlexLayout の子の ScrollView に引っ張って更新する機能を提供します。 FlexLayout はバインド可能なレイアウトを使用して、項目のコレクションにバインドしてコンテンツを生成し、DataTemplate で各項目の外観を設定します。 レイアウトの詳細については、「Bindable layout」を参照してください。

RefreshView.IsRefreshing プロパティの値は、RefreshView の現在の状態を示しています。 ユーザーによって更新がトリガーされると、このプロパティは自動的に true に切り替わります。 更新が完了したら、プロパティを false にリセットする必要があります。

ユーザーが更新を開始すると、Command プロパティによって定義された ICommand が実行され、表示されている項目を更新する必要があります。 更新が行われると、アニメーション化された進行状況の円で構成される更新の視覚化が表示されます。 次のスクリーンショットは、iOS の進行状況の円を示しています。

Note

IsRefreshing プロパティを手動で true に設定すると、更新の視覚化がトリガーされ、Command プロパティで定義された ICommand が実行されます。

RefreshView の外観

RefreshView が VisualElement クラスから継承するプロパティに加えて、RefreshView は RefreshColor プロパティも定義します。 このプロパティは、更新中に表示される進行状況の円の色を定義するために設定できます。

<RefreshView RefreshColor="Teal"
             ... />

次の Android のスクリーンショットは、RefreshColor プロパティを持つ RefreshView を示します。

さらに、BackgroundColor プロパティは、進行状況の円の背景色を表す Color に設定できます。

Note

iOS では、BackgroundColor プロパティは進行状況の円を含む UIView の背景色を設定します。

RefreshView を無効にする

アプリでは、引っ張って更新が有効な操作ではない状態になる場合があります。 このような場合は、その IsEnabled プロパティを false に設定することで、RefreshView を無効にすることができます。 これにより、ユーザーは引っ張って更新をトリガーできなくなります。

または、Command プロパティを定義するときに、ICommand の CanExecute デリゲートを指定して、コマンドの有効または無効を指定できます。