RefreshView

Durchsuchen des Beispiels

Die .NET Multi-Platform App UI (.NET MAUI) RefreshView ist ein Containersteuerelement, das Pull-Funktionen zum Aktualisieren von Bildlaufinhalten bereitstellt. Daher muss das untergeordnete Element eines Steuerelements RefreshView ein bildlauffähiges 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: Parameter, der an den Command übergeben wird.
• IsRefreshing, vom Typ bool, der den aktuellen Zustand des RefreshView.
• 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.

Erstellen der Datei RefreshView

Um einer Seite ein RefreshView Objekt hinzuzufügen, erstellen Sie ein RefreshView Objekt, und legen Sie dessen IsRefreshing Eigenschaften fest Command . Legen Sie dann das untergeordnete Element auf ein bildlauffähiges Steuerelement fest.

Das folgende Beispiel zeigt, wie sie ein RefreshView XAML-Code instanziieren:

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

Eine 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 stellt das RefreshView Pull-Element die Aktualisierungsfunktion für ein untergeordnetes Element FlexLayoutScrollView bereit. Das FlexLayout verwendet ein bindbares Layout, um seinen Inhalt zu generieren, indem er an eine Sammlung von Elementen gebunden wird, und legt das Erscheinungsbild jedes Elements mit einem DataTemplate. Weitere Informationen zu bindbaren Layouts finden Sie unter "Bindable layout".

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

Wenn der Benutzer eine Aktualisierung initiiert, wird die ICommand durch die Command Eigenschaft definierte Ausgeführt, wodurch die angezeigten Elemente aktualisiert werden sollen. Während der Aktualisierung wird eine Aktualisierungsvisualisierung angezeigt, die aus einem animierten Statuskreis besteht. Der folgende Screenshot zeigt den Statuskreis unter iOS:

Darstellung der RefreshView

Zusätzlich zu den Eigenschaften, die RefreshView von der VisualElement Klasse erben, 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 Android-Screenshot zeigt eine RefreshView mit der RefreshColor Eigenschaft:

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

Deaktivieren eines RefreshView

Eine App kann einen Zustand eingeben, 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 angegeben ICommand werden, um den Befehl zu aktivieren oder zu deaktivieren.