Merge pull request #68 from dotnet/xaml-samples

Updates samples

src/GraphicsControls.Sample/GraphicsControls.Sample/App.xaml.cs

@@ -9,7 +9,7 @@ namespace GraphicsControls.Sample
             InitializeComponent();
 
             //MainPage = new CustomControlsPage();
-            MainPage = new MainPage();
+            MainPage = new CustomNavigationPage(new MainPage());
         }
     }
 }

src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs

@@ -7,20 +7,16 @@ namespace GraphicsControls.Sample
 {
     public class CustomControlsPage : ContentPage
     {
-        readonly Color PageBackgroundColor = Color.FromArgb("#FFFFFF");
-        readonly Color SectionHeaderBackgroundColor = Color.FromArgb("#E9E9E9");
-        readonly Color SectionBackgroundColor = Color.FromArgb("#FAFAFA");
-
         public CustomControlsPage()
         {
-            BackgroundColor = PageBackgroundColor;
+            Title = "Customize using Microsoft.Maui.Graphics.Controls";
+
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightPageBackgroundColor, SampleColors.DarkPageBackgroundColor);
 
             var scrollView = new ScrollView();
 
             var verticalStack = new StackLayout() { Margin = 12 };
             
-            verticalStack.Add(CreateHeader());
-
             verticalStack.Add(CreateDrawCustomSlider());
             //verticalStack.Add(CreateCustomSliderMapper());
             verticalStack.Add(CreateCustomSliderDrawable());
@@ -31,53 +27,32 @@ namespace GraphicsControls.Sample
             Content = scrollView;
         }
 
-        IView CreateHeader()
-        {
-            var container = new StackLayout();
-
-            container.Add(new Label
-            {
-                FontSize = 18,
-                FontAttributes = FontAttributes.Bold,
-                Text = "Customize using Microsoft.Maui.Graphics.Controls",
-                TextColor = Colors.Black,
-                Margin = new Thickness(0, 24, 0, 0)
-            });
-
-            container.Add(new Label
-            {
-                Text = "An example where learn how to customize existing controls as well as create new drawn controls.",
-                TextColor = Colors.Black
-            });
-
-            return container;
-        }
-
         IView CreateContainer(string title, View content)
         {
-            var contentContainer = new StackLayout
-            {
-                BackgroundColor = SectionBackgroundColor
-            };
+            var contentContainer = new StackLayout();
+
+            contentContainer.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
 
             var header = new Label
             {
-                BackgroundColor = SectionHeaderBackgroundColor,
                 Padding = 12,
-                Text = title,
-                TextColor = Colors.Black
+                Text = title
             };
 
+            header.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionHeaderBackgroundColor, SampleColors.DarkSectionHeaderBackgroundColor);
+            header.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
             contentContainer.Children.Add(header);
             contentContainer.Children.Add(content);
 
             var container = new Grid
             {
-                BackgroundColor = SectionBackgroundColor,
                 Padding = 0,
                 Margin = new Thickness(0, 6)
             };
 
+            container.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
             container.Children.Add(contentContainer);
 
             return container;
@@ -104,6 +79,7 @@ namespace GraphicsControls.Sample
             return CreateContainer("DrawCustomSlider", layout);
         }
 
+        /*
         IView CreateCustomSliderMapper()
         {
             var layout = new StackLayout
@@ -124,6 +100,7 @@ namespace GraphicsControls.Sample
 
             return CreateContainer("CustomSliderMapper", layout);
         }
+        */
 
         IView CreateCustomSliderDrawable()
         {

src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs

@@ -0,0 +1,14 @@
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Graphics;
+
+namespace GraphicsControls.Sample
+{
+    public class CustomNavigationPage : NavigationPage
+    {
+        public CustomNavigationPage(Page page) : base(page)
+        {
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
+            BarTextColor = Colors.White;
+        }
+    }
+}

src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs

@@ -0,0 +1,266 @@
+using Microsoft.Maui;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Graphics;
+using System.Diagnostics;
+using Switch = Microsoft.Maui.Controls.Switch;
+
+namespace GraphicsControls.Sample
+{
+    public class GalleryPageCSharp : ContentPage
+    {
+        public GalleryPageCSharp()
+        {
+            Title = "C# Gallery";
+
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightPageBackgroundColor, SampleColors.DarkPageBackgroundColor);
+
+            var scrollView = new ScrollView();
+
+            var verticalStack = new StackLayout() { Margin = 12 };
+
+            verticalStack.Add(CreateButton());
+            verticalStack.Add(CreateCheckBox());
+            verticalStack.Add(CreateDatePicker());
+            verticalStack.Add(CreateEditor());
+            verticalStack.Add(CreateEntry());
+            verticalStack.Add(CreateProgressBar());
+            verticalStack.Add(CreateSlider());
+            verticalStack.Add(CreateStepper());
+            verticalStack.Add(CreateSwitch());
+            verticalStack.Add(CreateTimePicker());
+
+            scrollView.Content = verticalStack;
+
+            Content = scrollView;
+        }
+
+        IView CreateContainer(string title, View content)
+        {
+            var contentContainer = new StackLayout();
+
+            contentContainer.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
+            var header = new Label
+            {
+                Padding = 12,
+                Text = title
+            };
+
+            header.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionHeaderBackgroundColor, SampleColors.DarkSectionHeaderBackgroundColor);
+            header.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
+            contentContainer.Children.Add(header);
+            contentContainer.Children.Add(content);
+
+            var container = new Grid
+            {
+                Padding = 0,
+                Margin = new Thickness(0, 6)
+            };
+
+            container.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
+            container.Children.Add(contentContainer);
+
+            return container;
+        }
+
+        IView CreateButton()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Button" });
+
+            var defaultButton = new Button { Text = "Button" };
+
+            defaultButton.Clicked += (sender, args) =>
+            {
+                Debug.WriteLine("Button Clicked");
+            };
+
+            layout.Children.Add(defaultButton);
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled Button" });
+            layout.Children.Add(new Button { IsEnabled = false, Text = "Disabled Button" });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom Button" });
+            layout.Children.Add(new Button { BackgroundColor = Colors.Red, TextColor = Colors.Yellow, Text = "Custom Button" });
+
+            return CreateContainer("Button", layout);
+        }
+
+        IView CreateCheckBox()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new CheckBox { IsChecked = true });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new CheckBox { IsEnabled = false, IsChecked = true });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new CheckBox { BackgroundColor = Colors.Purple, IsChecked = true });
+
+            return CreateContainer("CheckBox", layout);
+        }
+
+        IView CreateDatePicker()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new DatePicker());
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new DatePicker { IsEnabled = false });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new DatePicker { BackgroundColor = Colors.LightGreen, TextColor = Colors.White });
+
+            return CreateContainer("DatePicker", layout);
+        }
+
+        IView CreateEditor()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new Editor { Placeholder = "Placeholder" });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new Editor { IsEnabled = false, Placeholder = "Placeholder" });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new Editor { BackgroundColor = Colors.LightPink, TextColor = Colors.DeepPink, Placeholder = "Placeholder", PlaceholderColor = Colors.HotPink });
+
+            return CreateContainer("Editor", layout);
+        }
+
+        IView CreateEntry()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new Entry { Placeholder = "Placeholder" });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new Entry { IsEnabled = false, Placeholder = "Placeholder" });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new Entry { BackgroundColor = Colors.LightBlue, TextColor = Colors.Blue, Placeholder = "Placeholder", PlaceholderColor = Colors.DarkBlue });
+
+            return CreateContainer("Entry", layout);
+        }
+
+        IView CreateProgressBar()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new ProgressBar { Progress = 0.5d });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "ProgressBar" });
+            layout.Children.Add(new ProgressBar { IsEnabled = false, Progress = 0.5d });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "ProgressBar" });
+            layout.Children.Add(new ProgressBar { ProgressColor = Colors.Orange, Progress = 0.5d });
+
+            return CreateContainer("ProgressBar", layout);
+        }
+
+        IView CreateSlider()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new Slider { Minimum = 0, Maximum = 10, Value = 5 });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new Slider { IsEnabled = false, Minimum = 0, Maximum = 10, Value = 5 });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new Slider { Minimum = 0, MinimumTrackColor = Colors.Orange, Maximum = 10, MaximumTrackColor = Colors.YellowGreen, Value = 5, ThumbColor = Colors.BlueViolet });
+
+            return CreateContainer("Slider", layout);
+        }
+
+        IView CreateStepper()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new Stepper { Minimum = 0, Maximum = 10, Value = 5, Increment = 1 });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new Stepper { IsEnabled = false, Minimum = 0, Maximum = 10, Value = 5, Increment = 1 });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new Stepper { BackgroundColor = Colors.CadetBlue, Minimum = 0, Maximum = 10, Value = 5, Increment = 1 });
+
+            return CreateContainer("Stepper", layout);
+        }
+
+        IView CreateSwitch()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new Switch { IsToggled = true });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new Switch { IsEnabled = false, IsToggled = true });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new Switch { OnColor = Colors.YellowGreen, ThumbColor = Colors.Green, IsToggled = true });
+
+            return CreateContainer("Switch", layout);
+        }
+
+        IView CreateTimePicker()
+        {
+            var layout = new StackLayout
+            {
+                Margin = new Thickness(12, 6, 12, 24)
+            };
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
+            layout.Children.Add(new TimePicker());
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
+            layout.Children.Add(new TimePicker { IsEnabled = false });
+
+            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
+            layout.Children.Add(new TimePicker { BackgroundColor = Colors.LightSkyBlue, TextColor = Colors.White });
+
+            return CreateContainer("TimePicker", layout);
+        }
+    }
+}

src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml

@@ -0,0 +1,267 @@
+<?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="GraphicsControls.Sample.GalleryPageXAML"
+    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkPageBackgroundColor}, Light={StaticResource LightPageBackgroundColor}}"
+    Title="XAML Gallery">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+
+            <!-- LIGHT -->
+            <Color x:Key="LightPageBackgroundColor">#FFFFFF</Color>
+            <Color x:Key="LightSectionBackgroundColor">#FAFAFA</Color>
+            <Color x:Key="LightSectionHeaderBackgroundColor">#E9E9E9</Color>
+            <Color x:Key="LightTextColor">#000000</Color>
+            
+            <!-- DARK -->
+            <Color x:Key="DarkPageBackgroundColor">#000000</Color>
+            <Color x:Key="DarkSectionBackgroundColor">#333333</Color>
+            <Color x:Key="DarkSectionHeaderBackgroundColor">#1E1E1E</Color>
+            <Color x:Key="DarkTextColor">#FFFFFF</Color>
+            
+            <Style x:Key="InfoLabel" TargetType="Label">
+                <Setter Property="FontSize" Value="9" />
+                <Setter Property="TextColor" Value="Gray" />
+            </Style>
+            
+        </ResourceDictionary>
+    </ContentPage.Resources>
+    <ContentPage.Content>
+        <ScrollView>
+            <StackLayout
+                Margin="12">
+                <!-- BUTTON -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="Button"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <Button Text="Button" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <Button Text="Disabled Button" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <Button Text="Custom Button" BackgroundColor="Red" TextColor="Yellow" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- CHECKBOX -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="CheckBox"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <CheckBox IsChecked="True" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <CheckBox IsChecked="True" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <CheckBox IsChecked="True" BackgroundColor="Purple" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- DATEPICKER -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="DatePicker"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <DatePicker />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <DatePicker IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <DatePicker BackgroundColor="LightGreen" TextColor="White" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- EDITOR -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="Editor"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <Editor Placeholder="Placeholder" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <Editor Placeholder="Placeholder" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <Editor Placeholder="Placeholder" BackgroundColor="LightPink" TextColor="DeepPink" PlaceholderColor="HotPink" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- ENTRY -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="Entry"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <Entry Placeholder="Placeholder" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <Entry Placeholder="Placeholder" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <Entry Placeholder="Placeholder" BackgroundColor="LightBlue" TextColor="Blue" PlaceholderColor="DarkBlue" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- PROGRESSBAR -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="ProgressBar"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <ProgressBar Progress="0.5" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <ProgressBar Progress="0.5" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <ProgressBar Progress="0.5" ProgressColor="Orange" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- SLIDER -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="Slider"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <Slider Minimum="0" Maximum="10" Value="5" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <Slider Minimum="0" Maximum="10" Value="5" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <Slider Minimum="0" MinimumTrackColor="Orange" Maximum="10" MaximumTrackColor="YellowGreen" Value="5" ThumbColor="BlueViolet" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- STEPPER -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="Stepper"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <Stepper Minimum="0" Maximum="10" Value="5" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <Stepper Minimum="0" Maximum="10" Value="5" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <Stepper BackgroundColor="CadetBlue" Minimum="0" Maximum="10" Value="5" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- SWITCH -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="Switch"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <Switch IsToggled="True" />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <Switch IsToggled="True" IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <Switch IsToggled="True" OnColor="YellowGreen" ThumbColor="Green" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+                <!-- TIMEPICKER -->
+                <StackLayout
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
+                    <Label 
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
+                        Text="TimePicker"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
+                        Margin="0, 6"
+                        Padding="0">
+                        <StackLayout
+                            Margin="12, 6, 12, 24">
+                            <Label Text="Default Button" Style="{StaticResource InfoLabel}"/>
+                            <TimePicker />
+                            <Label Text="Disabled Button" Style="{StaticResource InfoLabel}"/>
+                            <TimePicker IsEnabled="False" />
+                            <Label Text="Custom Button" Style="{StaticResource InfoLabel}"/>
+                            <TimePicker BackgroundColor="LightSkyBlue" />
+                        </StackLayout>
+                    </Grid>
+                </StackLayout>
+            </StackLayout>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>

src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml.cs

@@ -0,0 +1,12 @@
+using Microsoft.Maui.Controls;
+
+namespace GraphicsControls.Sample
+{
+    public partial class GalleryPageXAML : ContentPage
+    {
+        public GalleryPageXAML()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs

@@ -1,39 +1,41 @@
 using Microsoft.Maui;
 using Microsoft.Maui.Controls;
 using Microsoft.Maui.Graphics;
-using System.Diagnostics;
-using Switch = Microsoft.Maui.Controls.Switch;
+using System;
 
 namespace GraphicsControls.Sample
 {
     public class MainPage : ContentPage
     {
-        readonly Color PageBackgroundColor = Color.FromArgb("#FFFFFF");
-        readonly Color SectionHeaderBackgroundColor = Color.FromArgb("#E9E9E9");
-        readonly Color SectionBackgroundColor = Color.FromArgb("#FAFAFA");
-
         public MainPage()
         {
-            BackgroundColor = PageBackgroundColor;
+            Title = "GraphicsControls";
+
+            Application.Current.UserAppTheme = OSAppTheme.Light;
+
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightPageBackgroundColor, SampleColors.DarkPageBackgroundColor);
 
             var scrollView = new ScrollView();
 
-            var verticalStack = new StackLayout() { Margin = 12 };
+            var layout = new Grid() { Margin = 12 };
 
-            verticalStack.Add(CreateHeader());
+            layout.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            layout.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
+            layout.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
 
-            verticalStack.Add(CreateButton());
-            verticalStack.Add(CreateCheckBox());
-            verticalStack.Add(CreateDatePicker());
-            verticalStack.Add(CreateEditor());
-            verticalStack.Add(CreateEntry());
-            verticalStack.Add(CreateProgressBar());
-            verticalStack.Add(CreateSlider());
-            verticalStack.Add(CreateStepper());
-            verticalStack.Add(CreateSwitch());
-            verticalStack.Add(CreateTimePicker());
+            var header = CreateHeader();
+            layout.Add(header);
+            GridLayout.SetRow(header as BindableObject, 0);
 
-            scrollView.Content = verticalStack;
+            var content = CreateContent();
+            layout.Add(content);
+            GridLayout.SetRow(content as BindableObject, 1);
+
+            var footer = CreateFooter();
+            layout.Add(footer);
+            GridLayout.SetRow(footer as BindableObject, 2);
+
+            scrollView.Content = layout;
 
             Content = scrollView;
         }
@@ -42,250 +44,184 @@ namespace GraphicsControls.Sample
         {
             var container = new StackLayout();
 
-            container.Add(new Label
+            var title = new Label
             {
-                FontSize = 18,
+                FontSize = 24,
                 FontAttributes = FontAttributes.Bold,
                 Text = "Introducing Microsoft.Maui.Graphics.Controls",
-                TextColor = Colors.Black,
-                Margin = new Thickness(0, 24, 0, 0)
-            });
+                Margin = new Thickness(0, 12)
+            };
 
-            container.Add(new Label
+            title.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
+            container.Add(title);
+
+            var subTitle = new Label
             {
-                Text = "A .NET MAUI experiment that offers drawn controls allowing to choose between Cupertino, Fluent and Material.",
-                TextColor = Colors.Black
-            });
+                FontSize = 16,
+                Text = "A .NET MAUI experiment that offers drawn controls allowing to choose between Cupertino, Fluent and Material."
+            };
+
+            subTitle.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
+            container.Add(subTitle);
 
             return container;
         }
 
-        IView CreateContainer(string title, View content)
+        IView CreateContent()
         {
             var contentContainer = new StackLayout
             {
-                BackgroundColor = SectionBackgroundColor
+                Margin = new Thickness(0, 12)
             };
 
-            var header = new Label
+            var layout = new StackLayout();
+
+            var galleryInfo = new Label
             {
-                BackgroundColor = SectionHeaderBackgroundColor,
-                Padding = 12,
-                Text = title,
+                Text = "Next, you can access a gallery where you can test all the drawn controls. The Gallery is available in both C# and XAML so feel free to explore the option you prefer."
+            };
+
+            galleryInfo.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
+            layout.Children.Add(galleryInfo);
+
+            var galleryLayout = new Grid();
+
+            galleryLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
+            galleryLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
+
+            var cSharpFrame = new Frame
+            {
+                CornerRadius = 12,
+                HeightRequest = 150,
+                WidthRequest = 150,
+                Margin = new Thickness(0, 6, 6, 0)
+            };
+
+            cSharpFrame.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
+            var cSharpGesture = new TapGestureRecognizer();
+            cSharpGesture.Tapped += OnCSharpGestureTapped;
+            cSharpFrame.GestureRecognizers.Add(cSharpGesture);
+
+            var cSharpLabel = new Label
+            {
+                Text = "C#",
+                HorizontalOptions = LayoutOptions.Center,
+                VerticalOptions = LayoutOptions.Center
+            };
+
+            cSharpLabel.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
+
+            cSharpFrame.Content = cSharpLabel;
+
+            var xamlFrame = new Frame
+            {
+                CornerRadius = 12,
+                HeightRequest = 150,
+                WidthRequest = 150,
+                Margin = new Thickness(0, 6, 6, 0)
+            };
+
+            xamlFrame.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
+            var xamlGesture = new TapGestureRecognizer();
+            xamlGesture.Tapped += OnXamlGestureTapped;
+            xamlFrame.GestureRecognizers.Add(xamlGesture);
+
+            var xamlLabel = new Label
+            {
+                Text = "XAML",
+                HorizontalOptions = LayoutOptions.Center,
+                VerticalOptions = LayoutOptions.Center
+            };
+
+            xamlLabel.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
+
+            xamlFrame.Content = xamlLabel;
+
+            galleryLayout.Children.Add(cSharpFrame);
+            GridLayout.SetColumn(cSharpFrame, 0);
+
+            galleryLayout.Children.Add(xamlFrame);
+            GridLayout.SetColumn(xamlFrame, 1);
+
+            layout.Children.Add(galleryLayout);
+
+            var customizeInfo = new Label
+            {
+                Text = "Also, there is an an example where learn how to customize existing controls as well as create new drawn controls."
+            };
+
+            customizeInfo.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
+            layout.Children.Add(customizeInfo);
+
+            var customizeLayout = new Grid();
+
+            var customizeFrame = new Frame
+            {
+                CornerRadius = 12,
+                HeightRequest = 150,
+                Margin = new Thickness(0, 6, 6, 0)
+            };
+
+            customizeFrame.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
+            var customizeGesture = new TapGestureRecognizer();
+            customizeGesture.Tapped += OnCustomizeGestureTapped;
+            customizeFrame.GestureRecognizers.Add(customizeGesture);
+
+            var customizeLabel = new Label
+            {
+                Text = "Customize or Create custom drawn controls",
+                HorizontalOptions = LayoutOptions.Center,
+                VerticalOptions = LayoutOptions.Center
+            };
+
+            customizeLabel.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
+
+            customizeFrame.Content = customizeLabel;
+
+            customizeLayout.Children.Add(customizeFrame);
+
+            layout.Children.Add(customizeLayout);
+
+            contentContainer.Children.Add(layout);
+
+            return contentContainer;
+        }
+
+        IView CreateFooter()
+        {
+            var footer = new Label
+            {
+                FontSize = 10,
+                Text = "Microsoft Corporation 2021",
+                HorizontalOptions = LayoutOptions.Center,
                 TextColor = Colors.Black
             };
 
-            contentContainer.Children.Add(header);
-            contentContainer.Children.Add(content);
+            footer.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
 
-            var container = new Grid
-            {
-                BackgroundColor = SectionBackgroundColor,
-                Padding = 0,
-                Margin = new Thickness(0, 6)
-            };
-
-            container.Children.Add(contentContainer);
-
-            return container;
+            return footer;
         }
 
-        IView CreateButton()
+        void OnCSharpGestureTapped(object sender, EventArgs e)
         {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Button" });
-
-            var defaultButton = new Button { Text = "Button" };
-
-            defaultButton.Clicked += (sender, args) =>
-            {
-                Debug.WriteLine("Button Clicked");
-            };
-
-            layout.Children.Add(defaultButton);
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled Button" });
-            layout.Children.Add(new Button { IsEnabled = false, Text = "Disabled Button" });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom Button" });
-            layout.Children.Add(new Button { BackgroundColor = Colors.Red, TextColor = Colors.Yellow, Text = "Custom Button" });
-
-            return CreateContainer("Button", layout);
+            Navigation.PushAsync(new GalleryPageCSharp());
         }
 
-        IView CreateCheckBox()
+        void OnXamlGestureTapped(object sender, EventArgs e)
         {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new CheckBox { IsChecked = true });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new CheckBox { IsEnabled = false, IsChecked = true });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new CheckBox { BackgroundColor = Colors.Purple, IsChecked = true });
-
-            return CreateContainer("CheckBox", layout);
+            Navigation.PushAsync(new GalleryPageXAML());
         }
 
-        IView CreateDatePicker()
+        void OnCustomizeGestureTapped(object sender, EventArgs e)
         {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new DatePicker());
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new DatePicker { IsEnabled = false });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new DatePicker { BackgroundColor = Colors.LightGreen, TextColor = Colors.White });
-
-            return CreateContainer("DatePicker", layout);
-        }
-
-        IView CreateEditor()
-        {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new Editor { Placeholder = "Placeholder" });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new Editor { IsEnabled = false, Placeholder = "Placeholder" });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new Editor { BackgroundColor = Colors.LightPink, TextColor = Colors.DeepPink, Placeholder = "Placeholder", PlaceholderColor = Colors.HotPink });
-
-            return CreateContainer("Editor", layout);
-        }
-
-        IView CreateEntry()
-        {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new Entry { Placeholder = "Placeholder" });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new Entry { IsEnabled = false, Placeholder = "Placeholder" });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new Entry { BackgroundColor = Colors.LightBlue, TextColor = Colors.Blue, Placeholder = "Placeholder", PlaceholderColor = Colors.DarkBlue });
-
-            return CreateContainer("Entry", layout);
-        }
-
-        IView CreateProgressBar()
-        {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new ProgressBar { Progress = 0.5d });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "ProgressBar" });
-            layout.Children.Add(new ProgressBar { IsEnabled = false, Progress = 0.5d });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "ProgressBar" });
-            layout.Children.Add(new ProgressBar { ProgressColor = Colors.Orange, Progress = 0.5d });
-
-            return CreateContainer("ProgressBar", layout);
-        }
-
-        IView CreateSlider()
-        {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new Slider { Minimum = 0, Maximum = 10, Value = 5 });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new Slider { IsEnabled = false, Minimum = 0, Maximum = 10, Value = 5 });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new Slider { Minimum = 0, MinimumTrackColor = Colors.Orange, Maximum = 10, MaximumTrackColor = Colors.YellowGreen, Value = 5, ThumbColor = Colors.BlueViolet });
-
-            return CreateContainer("Slider", layout);
-        }
-
-        IView CreateStepper()
-        {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new Stepper { Minimum = 0, Maximum = 10, Value = 5, Increment = 1 });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new Stepper { IsEnabled = false, Minimum = 0, Maximum = 10, Value = 5, Increment = 1 });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new Stepper { BackgroundColor = Colors.CadetBlue, Minimum = 0, Maximum = 10, Value = 5, Increment = 1 });
-
-            return CreateContainer("Stepper", layout);
-        }
-
-        IView CreateSwitch()
-        {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new Switch { IsToggled = true });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new Switch { IsEnabled = false, IsToggled = true });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new Switch { OnColor = Colors.YellowGreen, ThumbColor = Colors.Green, IsToggled = true });
-
-            return CreateContainer("Switch", layout);
-        }
-
-        IView CreateTimePicker()
-        {
-            var layout = new StackLayout
-            {
-                Margin = new Thickness(12, 6, 12, 24)
-            };
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Default" });
-            layout.Children.Add(new TimePicker());
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Disabled" });
-            layout.Children.Add(new TimePicker { IsEnabled = false });
-
-            layout.Children.Add(new Label { FontSize = 9, TextColor = Colors.Gray, Text = "Custom" });
-            layout.Children.Add(new TimePicker { BackgroundColor = Colors.LightSkyBlue, TextColor = Colors.White });
-
-            return CreateContainer("TimePicker", layout);
+            Navigation.PushAsync(new CustomControlsPage());
         }
     }
 }

src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs

@@ -0,0 +1,21 @@
+using Microsoft.Maui.Graphics;
+
+namespace GraphicsControls.Sample
+{
+    public static class SampleColors
+    {
+        // LIGHT
+        public static Color LightAccentColor = Color.FromArgb("#800080");
+        public static Color LightPageBackgroundColor = Color.FromArgb("#FFFFFF");
+        public static Color LightSectionHeaderBackgroundColor = Color.FromArgb("#E9E9E9");
+        public static Color LightSectionBackgroundColor = Color.FromArgb("#FAFAFA");
+        public static Color LightTextColor = Color.FromArgb("#000000");
+
+        // DARK
+        public static Color DarkAccentColor = Color.FromArgb("#9A009A");
+        public static Color DarkPageBackgroundColor = Color.FromArgb("#121212");
+        public static Color DarkSectionHeaderBackgroundColor = Color.FromArgb("#1E1E1E");
+        public static Color DarkSectionBackgroundColor = Color.FromArgb("#333333");
+        public static Color DarkTextColor = Color.FromArgb("#FFFFFF");
+    }
+}

src/GraphicsControls/GraphicsControls.csproj

@@ -1,8 +1,8 @@
 <Project Sdk="MSBuild.Sdk.Extras">
 	<PropertyGroup>
     <TargetFrameworks>net6.0-ios;net6.0-android;net6.0-maccatalyst;net6.0-windows10.0.19041</TargetFrameworks>
-    <RootNamespace>Microsoft.Maui.Graphics.Controls</RootNamespace>
-		<AssemblyName>Microsoft.Maui.Graphics.Controls</AssemblyName>
+    <RootNamespace>Microsoft.Maui.Graphics.Controls</RootNamespace>	
+    <AssemblyName>Microsoft.Maui.Graphics.Controls</AssemblyName>
     <LangVersion>8.0</LangVersion>
 		<Nullable>enable</Nullable>
     <UseMaui>true</UseMaui>