maui-linux-samples/ShellDemo/Pages/ProgressPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ShellDemo.ProgressPage"
             Title="Progress"
             BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">

    <Grid RowDefinitions="*,120">

        <!-- Main Content -->
        <ScrollView Grid.Row="0">
            <VerticalStackLayout Padding="20" Spacing="20">

                <Label Text="Progress Indicators"
                       FontSize="24"
                       FontAttributes="Bold"
                       TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />

                <!-- ProgressBar Section -->
                <Border Style="{StaticResource ThemedCard}">
                    <VerticalStackLayout Spacing="15">
                        <Label Text="ProgressBar"
                               FontSize="16"
                               FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />

                        <!-- Various progress values -->
                        <HorizontalStackLayout Spacing="10">
                            <ProgressBar Progress="0" WidthRequest="200" />
                            <Label Text="0%" VerticalOptions="Center" WidthRequest="50"
                                   TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
                        </HorizontalStackLayout>

                        <HorizontalStackLayout Spacing="10">
                            <ProgressBar Progress="0.25" WidthRequest="200" />
                            <Label Text="25%" VerticalOptions="Center" WidthRequest="50"
                                   TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
                        </HorizontalStackLayout>

                        <HorizontalStackLayout Spacing="10">
                            <ProgressBar Progress="0.5" WidthRequest="200" />
                            <Label Text="50%" VerticalOptions="Center" WidthRequest="50"
                                   TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
                        </HorizontalStackLayout>

                        <HorizontalStackLayout Spacing="10">
                            <ProgressBar Progress="0.75" WidthRequest="200" />
                            <Label Text="75%" VerticalOptions="Center" WidthRequest="50"
                                   TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
                        </HorizontalStackLayout>

                        <HorizontalStackLayout Spacing="10">
                            <ProgressBar Progress="1.0" WidthRequest="200" />
                            <Label Text="100%" VerticalOptions="Center" WidthRequest="50"
                                   TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
                        </HorizontalStackLayout>

                        <!-- Colored progress bars -->
                        <Label Text="Colored Progress Bars:"
                               FontSize="12"
                               Margin="0,10,0,0"
                               TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />

                        <ProgressBar Progress="0.7" ProgressColor="Red" />
                        <ProgressBar Progress="0.7" ProgressColor="Green" />
                        <ProgressBar Progress="0.7" ProgressColor="Blue" />
                        <ProgressBar Progress="0.7" ProgressColor="Orange" />
                        <ProgressBar Progress="0.7" ProgressColor="Purple" />
                    </VerticalStackLayout>
                </Border>

                <!-- ActivityIndicator Section -->
                <Border Style="{StaticResource ThemedCard}">
                    <VerticalStackLayout Spacing="15">
                        <Label Text="ActivityIndicator"
                               FontSize="16"
                               FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />

                        <!-- Running indicator -->
                        <HorizontalStackLayout Spacing="15">
                            <ActivityIndicator IsRunning="True" />
                            <Label Text="Loading..." VerticalOptions="Center"
                                   TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
                        </HorizontalStackLayout>

                        <!-- Toggle indicator -->
                        <HorizontalStackLayout Spacing="15">
                            <ActivityIndicator x:Name="ToggleIndicator" IsRunning="False" />
                            <Button Text="Start/Stop"
                                    Style="{StaticResource SecondaryButton}"
                                    Clicked="OnToggleIndicatorClicked" />
                        </HorizontalStackLayout>

                        <!-- Colored indicators -->
                        <Label Text="Colored Indicators:"
                               FontSize="12"
                               Margin="0,10,0,0"
                               TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
                        <HorizontalStackLayout Spacing="20">
                            <ActivityIndicator IsRunning="True" Color="Red" />
                            <ActivityIndicator IsRunning="True" Color="Green" />
                            <ActivityIndicator IsRunning="True" Color="Blue" />
                            <ActivityIndicator IsRunning="True" Color="Orange" />
                        </HorizontalStackLayout>
                    </VerticalStackLayout>
                </Border>

                <!-- Interactive Demo Section -->
                <Border Style="{StaticResource ThemedCard}">
                    <VerticalStackLayout Spacing="15">
                        <Label Text="Interactive Demo"
                               FontSize="16"
                               FontAttributes="Bold"
                               TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />

                        <!-- Slider-controlled progress -->
                        <ProgressBar x:Name="AnimatedProgress" Progress="0.5" />
                        <Slider x:Name="ProgressSlider"
                                Minimum="0"
                                Maximum="100"
                                Value="50"
                                ValueChanged="OnProgressSliderValueChanged" />
                        <Label x:Name="ProgressLabel"
                               Text="Progress: 50%"
                               TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />

                        <!-- Animated progress buttons -->
                        <HorizontalStackLayout Spacing="10" Margin="0,10,0,0">
                            <Button Text="Reset"
                                    Style="{StaticResource SecondaryButton}"
                                    Clicked="OnResetClicked" />
                            <Button Text="Animate to 100%"
                                    Style="{StaticResource PrimaryButton}"
                                    Clicked="OnAnimateClicked" />
                            <Button Text="Simulate Download"
                                    Style="{StaticResource SuccessButton}"
                                    Clicked="OnSimulateDownloadClicked" />
                        </HorizontalStackLayout>
                    </VerticalStackLayout>
                </Border>

            </VerticalStackLayout>
        </ScrollView>

        <!-- Event Log Panel -->
        <Border Grid.Row="1"
                BackgroundColor="{AppThemeBinding Light=#F5F5F5, Dark=#2C2C2C}"
                StrokeThickness="0"
                Padding="10">
            <VerticalStackLayout>
                <Label Text="Event Log:"
                       FontSize="12"
                       FontAttributes="Bold"
                       TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
                <ScrollView HeightRequest="80">
                    <Label x:Name="EventLogLabel"
                           Text="Events will appear here..."
                           FontSize="11"
                           TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                           LineBreakMode="WordWrap" />
                </ScrollView>
            </VerticalStackLayout>
        </Border>

    </Grid>
</ContentPage>