Xamarin.Forms RefreshView

サンプルのダウンロード

RefreshView は、スクロール可能なコンテンツ向けに、引っ張って更新する機能を提供するコンテナー コントロールです。 したがって RefreshView の子は、ScrollView、CollectionView、ListView.などのスクロール可能なコントロールである必要があります。

RefreshView には、次のプロパティが定義されています。

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

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

Note

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

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

次の例は、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;

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

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

ユーザーが更新を開始すると、Command プロパティで定義されている ICommand が実行され、表示中の項目が更新されます。 更新が行われている間、更新の視覚化が進行状況円のアニメーションとして表示されます。

Note

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

RefreshView の外観

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

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

次のスクリーンショットは、RefreshColor プロパティが設定された RefreshView を示しています。

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

Note

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

RefreshView を無効化する

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

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

関連リンク

• RefreshView (サンプル)
• Xamarin.Forms でバインド可能なレイアウト
• RefreshView のプラットフォーム固有の引っ張る方向