Xamarin Community Toolkit StateLayout

  • Artikel

Das Anzeigen einer bestimmten Ansicht, wenn Sich Ihre App in einem bestimmten Zustand befindet, ist ein gängiges Muster für jede mobile App. Beispiele reichen von der Erstellung von Ladeansichten zum Überlagern auf dem Bildschirm oder auf einem Unterabschnitt des Bildschirms. Leere Zustandsansichten können erstellt werden, wenn keine Daten angezeigt werden sollen, und Fehlerzustandsansichten können angezeigt werden, wenn ein Fehler auftritt.

Erste Schritte

Mit dem StateLayout-Steuerelement kann der Benutzer ein beliebiges Layoutelement wie ein Grid oder StackLayout ein einzelnes zustandsfähiges Element umwandeln. Jedes Layout, das Sie zustandsfähig machen, mit den angefügten StateLayout-Eigenschaften, enthält eine Auflistung von StateView Objekten. Diese Objekte können als Vorlagen für die verschiedenen Zustände verwendet werden, die von StateLayout unterstützt werden. Wenn die CurrentState Eigenschaft auf einen Wert festgelegt wird, der der State Eigenschaft eines der StateViews entspricht, wird anstelle des Hauptinhalts angezeigt.

LayoutState-Aufzählung

Die LayoutState Enumeration unterstützt einen der folgenden Werte:

  • None (Standardeinstellung: Dadurch wird die anfängliche Ansicht angezeigt)
  • Loading
  • Saving
  • Success
  • Error
  • Empty
  • Custom

Syntax

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <Grid xct:StateLayout.CurrentState="{Binding CurrentState}">
      <xct:StateLayout.StateViews>
         <xct:StateView StateKey="Loading">
            <Grid BackgroundColor="White">
               <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                  <ActivityIndicator Color="#1abc9c" />
                  <Label Text="Loading..." HorizontalOptions="Center" />
               </StackLayout>
            </Grid>
         </xct:StateView>
      </xct:StateLayout.StateViews>      

     ...

  </Grid>

</ContentPage>

Verwenden von benutzerdefinierten Zuständen

Neben den integrierten Zuständen unterstützt StateLayout auch einen Custom Zustand. Durch Festlegen StateCustom und Hinzufügen eines CustomStateKey Steuerelements können Sie benutzerdefinierte Zustände über die integrierten Zustände hinaus erstellen. Sie können das CurrentCustomStateKey "StateLayout"-Stammelement verwenden, um eine Variable zu binden, die angibt, wann eine ihrer benutzerdefinierten Zustände angezeigt werden soll.

Syntax

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.Views;assembly=Xamarin.CommunityToolkit"
             x:Class="MyLittleApp.MainPage">

    <StackLayout Padding="10" xct:StateLayout.CurrentState="{Binding CurrentState}" xct:StateLayout.CurrentCustomStateKey="{Binding CustomState}">
        <xct:StateLayout.StateViews>
            <xct:StateView StateKey="Custom" CustomStateKey="ThisIsACustomState">
                <Label Text="Hi, I'm a custom state!" />
            </xct:StateView>
            <xct:StateView StateKey="Custom" CustomStateKey="ThisIsACustomStateToo">
                <Label Text="Hi, I'm a custom state too!" />
            </xct:StateView>
        </xct:StateLayout.StateViews>

        <Label Text="This is the normal state." />
    </StackLayout>

</ContentPage>

Verwenden von wiederholten Zuständen

Beim Laden mehrerer Elemente desselben Typs könnte es nützlich sein, ein Stück XAML zu wiederholen, ohne es mehrmals einfügen zu müssen. Hier sollte die RepeatCount Eigenschaft verwendet werden. Durch Definieren einer Datei Template ist es möglich, denselben XAML-Teil zu wiederholen, während er nur einmal definiert wird.

Hinweis

Wenn Sie ein RepeatCount Objekt verwenden, das größer als 1 ist, müssen Sie die Template Eigenschaft verwenden, um Ihre Inhalte bereitzustellen. Die Bereitstellung Content für eine StateView Weile, die größer RepeatCount als 1 ist, führt zu einer Ausnahme.

Syntax

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.Views;assembly=Xamarin.CommunityToolkit"
             x:Class="MyLittleApp.MainPage">

    <StackLayout xct:StateLayout.CurrentState="{Binding CurrentState}">
        <xct:StateLayout.StateViews>
            <xct:StateView StateKey="Loading" RepeatCount="3">
                <xct:StateView.Template>
                    <DataTemplate>
                        <StackLayout Spacing="8">
                            <BoxView CornerRadius="8" HeightRequest="40" BackgroundColor="#CCCCCC" WidthRequest="120" />
                            <BoxView CornerRadius="8" HeightRequest="40" BackgroundColor="#CCCCCC" WidthRequest="200" />
                        </StackLayout>
                    </DataTemplate>
                </xct:StateView.Template>
            </xct:StateView>
        </xct:StateLayout.StateViews>

        ...

    <StackLayout>
</ContentPage>

Eigenschaften

Die folgenden Eigenschaften sind für das StateLayout Objekt verfügbar:

Eigenschaft type BESCHREIBUNG
Currentstate LayoutState Definiert den aktuellen Status des Layouts und die anzuzeigende Vorlage.
CurrentCustomStateKey Zeichenfolge Koppeln Sie dies mit State="Custom" einer StateView, um benutzerdefinierte Zustände hinzuzufügen.
StateViews IList<StateView> Eine Liste der StateView-Objekte, die eine Vorlage pro Zustand enthalten.

Die folgenden Eigenschaften sind für das StateView Objekt verfügbar:

Eigenschaft type BESCHREIBUNG
CustomStateKey Zeichenfolge Definiert den aktuellen Status des Layouts und die anzuzeigende Vorlage.
RepeatCount INT Die Anzahl der Wiederholungen der Vorlage.
Vorlage DataTemplate Definiert eine Vorlage, die für diesen Zustand angezeigt werden soll.
State LayoutState Definiert den aktuellen Status des Layouts und die anzuzeigende Vorlage.

Beispiel

StateLayout-Beispielseite Quelle

Sie können dies in Aktion in der Xamarin Community Toolkit-Beispiel-App sehen.

API