StateView

StateView Control

The StateView control is designed to dynamically load different views based on its CurrentState property, which is an enum. The available states include:

• None: No specific state.
• Default: The default state. (ContentProperty)
• Loading: Indicates a loading state.
• Error: Represents an error state.
• Empty: Denotes an empty state.

Features

• Dynamic State Handling: The control dynamically switches between different views based on its CurrentState property.

• StateView Customization: Consumers have the flexibility to configure each state's view individually.

• Default Implementation: Users can utilize the default implementation if consumers have not overridden the state views. They are located here: url

• StateViewModel Configuration: The StateViewModel bindable property allows configuration of the default state views. This is a OneWayToSource, which means that the StateView initializes the view model and sends it to you.

• Animations: The StateView can be configured to fade between the different states.

Usage

To use the StateView control, set its CurrentState property to one of the available states. The control will automatically load the corresponding view.

Example

In the example below, the control will load the specified views based on the MyState property. If consumers have not overridden the state views, it will use the default implementations.

<dui:StateView CurrentState="{Binding MyState}" StateViewModel="{Binding MyStateViewModel}">
    <!-- Users can utilize the default implementation or override state views as needed -->
    <dui:StateView.LoadingView>
        <dui:Label Text="Loading..." />
    </dui:StateView.LoadingView>

    <dui:Label Text="This is the default view!" />

</dui:StateView>

To customize the default implementations you need to do so after retrieving it from StateView AKA in the setter of the MyStateViewModel property. However, it can also be configured later.

public StateViewModel MyStateViewModel
    {
        get => m_myStateViewModel;
        set
        {
            m_myStateViewModel = value;

            m_myStateViewModel.ErrorViewTitle = "This is an error title";
            m_myStateViewModel.ErrorViewDescription = "Description of the error";

            m_myStateViewModel.RefreshCommand = new Command(async () =>
            {
                m_myStateViewModel.IsRefreshing = false;
                await Task.Delay(1000);
                // The error is resolved
                CurrentState = State.Default;
            });
        }
    }