Xamarin.Forms RefreshView

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Das RefreshView ist ein Containersteuerelement, das Pull-To-Refresh-Funktionalität für scrollbare Inhalte bereitstellt. Daher muss das untergeordnete Element eines RefreshView ein scrollbares Steuerelement sein, z ScrollView. B. , CollectionViewoder ListView.

RefreshView definiert die folgenden Eigenschaften:

  • Command, vom Typ ICommand, der ausgeführt wird, wenn eine Aktualisierung ausgelöst wird.
  • CommandParameter vom Typ object: der Parameter, der an Command übergeben wird.
  • IsRefreshing, vom Typ bool, der den aktuellen Zustand von RefreshViewangibt.
  • RefreshColor, vom Typ Color, die Farbe des Statuskreises, der während der Aktualisierung angezeigt wird.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Hinweis

Auf kann Universal Windows Platformdie Pullrichtung eines RefreshView mit einer plattformspezifischen festgelegt werden. Weitere Informationen finden Sie unter RefreshView Pull Direction.

Erstellen der Datei RefreshView

Das folgende Beispiel zeigt, wie ein RefreshView in XAML instanziieren wird:

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

Ein RefreshView kann auch im Code erstellt werden:

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;

In diesem Beispiel bietet die RefreshView Pull-Funktion zum Aktualisieren von Funktionen für eine ScrollView , deren untergeordnetes Element ein FlexLayoutist. Der FlexLayout verwendet ein bindungsfähiges Layout, um seinen Inhalt durch Bindung an eine Auflistung von Elementen zu generieren, und legt die Darstellung jedes Elements mit einem fest DataTemplate. Weitere Informationen zu bindbaren Layouts finden Sie unter Bindable Layouts in Xamarin.Forms.

Der Wert der RefreshView.IsRefreshing -Eigenschaft gibt den aktuellen Zustand von an RefreshView. Wenn vom Benutzer eine Aktualisierung ausgelöst wird, wechselt diese Eigenschaft automatisch zu true. Nach Abschluss der Aktualisierung sollten Sie die -Eigenschaft auf falsezurücksetzen.

Wenn der Benutzer eine Aktualisierung initiiert, wird die ICommand von der Command -Eigenschaft definierte ausgeführt, wodurch die angezeigten Elemente aktualisiert werden sollen. Während der Aktualisierung wird eine Aktualisierungsvisualisierung angezeigt, die aus einem animierten Fortschrittskreis besteht:

Screenshot: RefreshView Aktualisieren von Daten unter iOS und Android

Hinweis

Durch manuelles Festlegen der IsRefreshing Eigenschaft auf true wird die Aktualisierungsvisualisierung ausgelöst und die von der CommandICommand -Eigenschaft definierte ausgeführt.

Darstellung der RefreshView

Zusätzlich zu den Eigenschaften, die RefreshView von der VisualElement -Klasse erbt, RefreshView definiert auch die RefreshColor -Eigenschaft. Diese Eigenschaft kann festgelegt werden, um die Farbe des Statuskreises zu definieren, der während der Aktualisierung angezeigt wird:

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

Der folgende Screenshot zeigt eine RefreshView mit dem RefreshColor Eigenschaftensatz:

Screenshot eines RefreshView mit einem tealen Fortschrittskreis unter iOS und Android

Darüber hinaus kann die BackgroundColor -Eigenschaft auf eine Color festgelegt werden, die die Hintergrundfarbe des Fortschrittskreises darstellt.

Hinweis

Unter iOS legt die BackgroundColor -Eigenschaft die Hintergrundfarbe des fest, das UIView den Statuskreis enthält.

Deaktivieren eines RefreshView

Eine Anwendung kann in einen Zustand versetzt werden, in dem pull to refresh kein gültiger Vorgang ist. In solchen Fällen kann das RefreshView deaktiviert werden, indem die zugehörige IsEnabled-Eigenschaft auf false festgelegt wird. Dadurch wird verhindert, dass Benutzer pull to refresh auslösen können.

Alternativ kann beim Definieren der Command -Eigenschaft der CanExecute Delegat des ICommand angegeben werden, um den Befehl zu aktivieren oder zu deaktivieren.