StateContainer

Het weergeven van een specifieke weergave wanneer uw app een specifieke status heeft, is een algemeen patroon in elke mobiele app. Voorbeelden variëren van het maken van laadschermen die over het scherm of over een deel van het scherm worden geplaatst. Lege statusweergaven kunnen worden gemaakt wanneer er geen gegevens worden weergegeven en er kunnen foutstatusweergaven worden weergegeven wanneer er een fout optreedt.

Aan de slag komen

Met de attached properties van StateContainer kan de gebruiker elk lay-outelement, zoals een VerticalStackLayout, HorizontalStackLayout of Grid, omzetten in een statusbewuste lay-out. Elke toestandsafhankelijke indeling bevat een verzameling van View afgeleide elementen. Deze elementen kunnen worden gebruikt als sjablonen voor verschillende statussen die door de gebruiker zijn gedefinieerd. Wanneer de CurrentState tekenreekseigenschap is ingesteld op een waarde die overeenkomt met de StateKey eigenschap van een van de weergave-elementen, wordt de inhoud ervan weergegeven in plaats van de hoofdinhoud. Wanneer CurrentState is ingesteld op null of een lege tekenreeks, wordt de hoofdinhoud weergegeven.

Syntax

StateContainer eigenschappen kunnen worden gebruikt in XAML of C#.

XAML

Inclusief de XAML-naamruimte

Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Daarom volgt het volgende:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Zou als volgt worden gewijzigd om de xmlns op te nemen:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

StateContainer gebruiken

Hieronder ziet u een voorbeeld van een gebruikersinterface die is gemaakt met XAML. Deze voorbeeldgebruikersinterface is verbonden met het onderstaande ViewModel. StateContainerViewModel

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyProject.MyStatePage"
             BindingContext="StateContainerViewModel">

    <VerticalStackLayout 
        toolkit:StateContainer.CurrentState="{Binding CurrentState}"
        toolkit:StateContainer.CanStateChange="{Binding CanStateChange}">

        <toolkit:StateContainer.StateViews>
            <VerticalStackLayout toolkit:StateView.StateKey="Loading">
                <ActivityIndicator IsRunning="True" />
                <Label Text="Loading Content..." />
            </VerticalStackLayout>
            <Label toolkit:StateView.StateKey="Success" Text="Success!" />
        </toolkit:StateContainer.StateViews>

        <Label Text="Default Content" />
        <Button Text="Change State" Command="{Binding ChangeStateCommand}" />

    </VerticalStackLayout>

</ContentPage>

C#-markeringen

Hieronder ziet u dezelfde gebruikersinterface als de bovenstaande XAML, gemaakt met behulp van C#-markeringen.

Deze voorbeeldgebruikersinterface is verbonden met het onderstaande ViewModel. StateContainerViewModel

using CommunityToolkit.Maui.Layouts;
using CommunityToolkit.Maui.Markup;

BindingContext = new StateContainerViewModel();

Content = new VerticalStackLayout()
{
    new Label()
        .Text("Default Content"),
    
    new Button()
        .Text("Change State")
        .Bind(
            Button.CommandProperty,
            static (StateContainerViewModel vm) => vm.ChangeStateCommand,
            mode: BindingMode.OneTime)
}.Bind(
    StateContainer.CurrentStateProperty,
    static (StateContainerViewModel vm) => vm.CurrentState,
    static (StateContainerViewModel vm, string currentState) => vm.CurrentState = currentState)
 .Bind(
    StateContainer.CanStateChangeProperty,
    static (StateContainerViewModel vm) => vm.CanStateChange,
    static (StateContainerViewModel vm, bool canStateChange) => vm.CanStateChange = canStateChange)
 .Assign(out VerticalStackLayout layout);

var stateViews = new List<View>()
{
    //States.Loading
    new VerticalStackLayout()
    {
        new ActivityIndicator() { IsRunning = true },
        new Label().Text("Loading Content")
    },

    //States.Success
    new Label().Text("Success!")
};

StateView.SetStateKey(stateViews[0], States.Loading);
StateView.SetStateKey(stateViews[1], States.Success);

StateContainer.SetStateViews(layout, stateViews);

static class States
{
    public const string Loading = nameof(Loading);
    public const string Success = nameof(Success);
}

ViewModel

Wanneer u een ICommand gebruikt om CurrentState te wijzigen (bijvoorbeeld wanneer u Button.Command gebruikt om statussen te wijzigen), raden we aan om CanStateBeChanged te gebruiken voor ICommand.CanExecute().

Hieronder ziet u een MVVM-voorbeeld met behulp van de MVVM Community Toolkit:

[INotifyPropertyChanged]
public partial class StateContainerViewModel
{
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(ChangeStateCommand))]
    bool canStateChange;

    [ObservableProperty]
    string currentState = States.Loading;

    [RelayCommand(CanExecute = nameof(CanStateChange))]
    void ChangeState()
    {
        CurrentState = States.Success;
    }
}

StateContainer Standaard wordt de status zonder animatie gewijzigd. Als u een aangepaste animatie wilt toevoegen, kunt u de ChangeStateWithAnimation methode gebruiken:

async Task ChangeStateWithCustomAnimation()
{
    var targetState = "TargetState";
    var currentState = StateContainer.GetCurrentState(MyBindableObject);
    if (currentState == targetState)
    {
        await StateContainer.ChangeStateWithAnimation(
            MyBindableObject,
            null,
            (element, token) => element.ScaleTo(0, 100, Easing.SpringIn).WaitAsync(token),
            (element, token) => element.ScaleTo(1, 250, Easing.SpringOut).WaitAsync(token),
            CancellationToken.None);
    }
    else
    {
        await StateContainer.ChangeStateWithAnimation(
            MyBindableObject,
            targetState,
            (element, token) => element.ScaleTo(0, 100, Easing.SpringIn).WaitAsync(token),
            (element, token) => element.ScaleTo(1, 250, Easing.SpringOut).WaitAsync(token),
            CancellationToken.None);
    }
}

Dit is hoe het werkt op iOS:

Eigenschappen

StateContainer

De eigenschappen van StateContainer kunnen worden gebruikt voor elk Layout overnemend element.

StateView

De eigenschappen van StateView kunnen worden gebruikt op elk element dat overerft van View.

Methods

StateContainer

Examples

Je kunt een voorbeeld van hoe deze functie werkt vinden in de .NET MAUI Community Toolkit Sample Application.

API

U vindt de broncode voor StateContainer in de .NET MAUI Community Toolkit GitHub opslagplaats.