StateView

StateView Control

The StateView control is designed to dynamically load different views. A StateViewModel is given to consumers for configuration of the StateView which includes a 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 CurrentState property in StateViewModel.

• 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: Implementations

• 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, bind to its StateViewModel property. Then in its setter you can define the state that StateView should start in.

Example

In the example below, we have bound the MyStateViewModel to the StateViewModel property on StateView. Here we set the StateView's state to Loading. Later the state will be set to either Default or Error state depending on if something went wrong.

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

        m_myStateViewModel.CurrentState = State.Loading;
    }
}

private async Task Initialize()
{
    try{
        await m_service.LoadList();
        MyStateViewModel.CurrentState = State.Default;
    }
    catch(Exception e)
    {
        MyStateViewModel.Error.Title = "Something went wrong";
        MyStateViewModel.Error.Description = e.Exception.ToString();
        MyStateViewModel.CurrentState = State.Error;
    }
} 

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

<dui:StateView 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>