open-maui/OpenMaui Samples
2
0
Fork 0
Code Issues Releases

AppTheming and XAML

Browse Source
This commit is contained in:
David H. Friedel Jr.
2026-01-11 12:33:48 -05:00
parent f87ea17a6f
commit 50cc186d6d
48 changed files with 3544 additions and 3068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
ShellDemo/Pages/ProgressPage.xaml Normal file
View File

@@ -0,0 +1,167 @@
<?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>