StateContainerPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePage
    x:Class="CommunityToolkit.Maui.Sample.Pages.Layouts.StateContainerPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:layouts="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Layouts"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
    x:DataType="layouts:StateContainerViewModel"
    x:TypeArguments="layouts:StateContainerViewModel">

    <pages:BasePage.ToolbarItems>
        <ToolbarItem Command="{Binding ToggleFullPageStateCommand}" Text="Toggle Page" />
    </pages:BasePage.ToolbarItems>

    <pages:BasePage.Resources>
        <Style x:Key="BorderStyle" TargetType="Border">
            <Setter Property="Padding" Value="20" />
            <Setter Property="StrokeShape" Value="RoundRectangle 10" />
            <Setter Property="StrokeThickness" Value="4" />
        </Style>
    </pages:BasePage.Resources>

    <ScrollView>
        <VerticalStackLayout
            mct:StateContainer.CurrentState="{Binding FullPageState}"
            Spacing="12">

            <mct:StateContainer.StateViews>
                <ContentView 
                    mct:StateView.StateKey="Loading"
                    mct:StateContainer.CanStateChange="{Binding CanFullPageStateChange}">
                    <VerticalStackLayout>
                        <ActivityIndicator
                            HorizontalOptions="Center"
                            IsRunning="True"
                            Color="Fuchsia" />
                        <Label HorizontalOptions="Center" Text="I'm a state on the whole page!" />
                        <Label HorizontalOptions="Center" Text="Toggle to go back." />
                    </VerticalStackLayout>
                </ContentView>
            </mct:StateContainer.StateViews>

            <Label Text="The StateContainer properties allow any Layout derived element to become state-aware." />
            <Button Command="{Binding CycleStatesCommand}" Text="Cycle States Without Animation" />
            <Label Text="This will show several states at an interval of 2 seconds." />
            <Label
                FontSize="8"
                Text="{Binding CurrentState, StringFormat='Current State: {0}'}"
                VerticalTextAlignment="Center" />

            <VerticalStackLayout
                Padding="24,0"
                mct:StateContainer.CurrentState="{Binding CurrentState}"
                mct:StateContainer.CanStateChange="{Binding CanCycleStateChange}">
                <mct:StateContainer.StateViews>

                    <Border
                        mct:StateView.StateKey="Loading"
                        Stroke="CornflowerBlue"
                        Style="{StaticResource BorderStyle}">
                        <HorizontalStackLayout Spacing="10">
                            <ActivityIndicator
                                HeightRequest="20"
                                IsRunning="True"
                                WidthRequest="20"
                                Color="CornflowerBlue" />
                            <Label Text="Pretending to load things..." VerticalTextAlignment="Center" />
                        </HorizontalStackLayout>
                    </Border>

                    <Border
                        mct:StateView.StateKey="Success"
                        Stroke="Green"
                        Style="{StaticResource BorderStyle}">
                        <Label Text="Hooray! Great success!" VerticalTextAlignment="Center" />
                    </Border>

                    <Label
                        Padding="20"
                        mct:StateView.StateKey="StateKey can be anything!"
                        Text="Hi, I'm a simple Label state!"
                        TextColor="Fuchsia"
                        VerticalTextAlignment="Center" />

                </mct:StateContainer.StateViews>

                <Border Style="{StaticResource BorderStyle}">
                    <Label Text="This is the default content." VerticalTextAlignment="Center" />
                </Border>

            </VerticalStackLayout>

            <Button Command="{Binding ToggleGridStateCommand}" Text="Toggle State in Grid Without Animation" />
            <Label Text="A state inside a Grid spans its rows and columns." />

            <Grid
                mct:StateContainer.CurrentState="{Binding GridState}"
                mct:StateContainer.CanStateChange="{Binding CanGridStateChange}"
                ColumnDefinitions="1*, 1*, 1*"
                RowDefinitions="1*, 1*"
                Padding="24,0">

                <mct:StateContainer.StateViews>
                    <Border
                        mct:StateView.StateKey="ReplaceGrid"
                        Stroke="Green"
                        Style="{StaticResource BorderStyle}">
                        <Label Text="State replacing the Grid content" VerticalTextAlignment="Center" />
                    </Border>
                </mct:StateContainer.StateViews>

                <Button
                    Grid.Row="0"
                    Grid.Column="0"
                    BackgroundColor="Red" />
                <Button
                    Grid.Row="0"
                    Grid.Column="1"
                    BackgroundColor="Green" />
                <Button
                    Grid.Row="0"
                    Grid.Column="2"
                    BackgroundColor="Blue" />
                <Button
                    Grid.Row="1"
                    Grid.Column="0"
                    BackgroundColor="Purple" />
                <Button
                    Grid.Row="1"
                    Grid.Column="1"
                    BackgroundColor="Yellow" />
                <Button
                    Grid.Row="1"
                    Grid.Column="2"
                    BackgroundColor="Orange" />
            </Grid>

            <Button Clicked="ChangeStateWithFadeAnimation"
                    Text="Change State with default fade animation"
                    IsEnabled="{Binding CanAnimationStateChange}"/>

            <Button Clicked="ChangeStateWithCustomAnimation"
                    Text="Change State with custom animation"
                    IsEnabled="{Binding CanAnimationStateChange}"/>
            <Grid
                x:Name="GridWithAnimation"
                ColumnDefinitions="1*, 1*, 1*"
                RowDefinitions="1*, 1*"
                Padding="24,0"
                mct:StateContainer.CanStateChange="{Binding CanAnimationStateChange}">

                <mct:StateContainer.StateViews>
                    <Border
                        mct:StateView.StateKey="ReplaceGrid"
                        Stroke="Green"
                        Style="{StaticResource BorderStyle}">
                        <Label Text="State replacing the Grid content" VerticalTextAlignment="Center" />
                    </Border>
                </mct:StateContainer.StateViews>

                <Button
                    Grid.Row="0"
                    Grid.Column="0"
                    BackgroundColor="Red" />
                <Button
                    Grid.Row="0"
                    Grid.Column="1"
                    BackgroundColor="Green" />
                <Button
                    Grid.Row="0"
                    Grid.Column="2"
                    BackgroundColor="Blue" />
                <Button
                    Grid.Row="1"
                    Grid.Column="0"
                    BackgroundColor="Purple" />
                <Button
                    Grid.Row="1"
                    Grid.Column="1"
                    BackgroundColor="Yellow" />
                <Button
                    Grid.Row="1"
                    Grid.Column="2"
                    BackgroundColor="Orange" />
            </Grid>

            <Button Command="{Binding ToggleNotFoundStateCommand}" Text="Toggle Nonexistent State" />
            <Label TextColor="Red">
                <Label.FormattedText>
                    <FormattedString >
                        <Span Text="Warning" FontAttributes="Bold"/>
                        <Span Text=": A StateContainerException is thrown when a StateKey is not found"/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>

            <VerticalStackLayout mct:StateContainer.CurrentState="{Binding NotFoundState}" >

                <Border Style="{StaticResource BorderStyle}">
                    <Label Text="This is the default content." VerticalTextAlignment="Center" />
                </Border>

            </VerticalStackLayout>
        </VerticalStackLayout>
    </ScrollView>
</pages:BasePage>