From 8e770dec034578e5055c5c1c2ecea65de86c869c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Su=C3=A1rez=20Ruiz?= <javiersuarezruiz@hotmail.com>
Date: Wed, 13 Oct 2021 13:47:50 +0200
Subject: [PATCH 1/2] Added XAML samples

---
 .../GraphicsControls.Sample/App.xaml.cs       |   2 +-
 .../CustomControlsPage.cs                     |  38 +-
 .../CustomNavigationPage.cs                   |  14 +
 .../GalleryPageCSharp.cs                      | 265 ++++++++++++
 .../GalleryPageXAML.xaml                      | 257 ++++++++++++
 .../GalleryPageXAML.xaml.cs                   |  12 +
 .../GraphicsControls.Sample/MainPage.cs       | 378 +++++++-----------
 .../GraphicsControls.Sample/SampleColors.cs   |  12 +
 src/GraphicsControls/GraphicsControls.csproj  |   4 +-
 9 files changed, 717 insertions(+), 265 deletions(-)
 create mode 100644 src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs
 create mode 100644 src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs
 create mode 100644 src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml
 create mode 100644 src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml.cs
 create mode 100644 src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs

diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/App.xaml.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/App.xaml.cs
index 3627be0..4de8263 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/App.xaml.cs
+++ b/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());
         }
     }
 }
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs
index 2083374..8a94202 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs
+++ b/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";
+
+            BackgroundColor = SampleColors.PageBackgroundColor;
 
             var scrollView = new ScrollView();
 
             var verticalStack = new StackLayout() { Margin = 12 };
             
-            verticalStack.Add(CreateHeader());
-
             verticalStack.Add(CreateDrawCustomSlider());
             //verticalStack.Add(CreateCustomSliderMapper());
             verticalStack.Add(CreateCustomSliderDrawable());
@@ -31,38 +27,16 @@ 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
+                BackgroundColor = SampleColors.SectionBackgroundColor
             };
 
             var header = new Label
             {
-                BackgroundColor = SectionHeaderBackgroundColor,
+                BackgroundColor = SampleColors.SectionHeaderBackgroundColor,
                 Padding = 12,
                 Text = title,
                 TextColor = Colors.Black
@@ -73,7 +47,7 @@ namespace GraphicsControls.Sample
 
             var container = new Grid
             {
-                BackgroundColor = SectionBackgroundColor,
+                BackgroundColor = SampleColors.SectionBackgroundColor,
                 Padding = 0,
                 Margin = new Thickness(0, 6)
             };
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs
new file mode 100644
index 0000000..463f6c4
--- /dev/null
+++ b/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)
+        {
+            BarBackgroundColor = SampleColors.AccentColor;
+            BarTextColor = Colors.White;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs
new file mode 100644
index 0000000..caaf43c
--- /dev/null
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs
@@ -0,0 +1,265 @@
+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";
+
+            BackgroundColor = SampleColors.PageBackgroundColor;
+
+            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
+            {
+                BackgroundColor = SampleColors.SectionBackgroundColor
+            };
+
+            var header = new Label
+            {
+                BackgroundColor = SampleColors.SectionHeaderBackgroundColor,
+                Padding = 12,
+                Text = title,
+                TextColor = Colors.Black
+            };
+
+            contentContainer.Children.Add(header);
+            contentContainer.Children.Add(content);
+
+            var container = new Grid
+            {
+                BackgroundColor = SampleColors.SectionBackgroundColor,
+                Padding = 0,
+                Margin = new Thickness(0, 6)
+            };
+
+            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);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml
new file mode 100644
index 0000000..49d68a1
--- /dev/null
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml
@@ -0,0 +1,257 @@
+<?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"
+    Title="XAML Gallery">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+
+            <Color x:Key="SectionBackgroundColor">#FAFAFA</Color>
+            <Color x:Key="SectionHeaderBackgroundColor">#E9E9E9</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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="Button"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="CheckBox"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="DatePicker"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="Editor"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="Entry"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="ProgressBar"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="Slider"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="Stepper"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="Switch"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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="{StaticResource SectionBackgroundColor}">
+                    <Label 
+                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
+                        TextColor="Black"
+                        Text="TimePicker"
+                        Padding="12"/>
+                    <Grid
+                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        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>
\ No newline at end of file
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml.cs
new file mode 100644
index 0000000..928298a
--- /dev/null
+++ b/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();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs
index ec5a7dd..06b8674 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs
@@ -1,39 +1,39 @@
 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";
+
+            BackgroundColor = SampleColors.PageBackgroundColor;
 
             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;
         }
@@ -44,15 +44,16 @@ namespace GraphicsControls.Sample
 
             container.Add(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
             {
+                FontSize = 16,
                 Text = "A .NET MAUI experiment that offers drawn controls allowing to choose between Cupertino, Fluent and Material.",
                 TextColor = Colors.Black
             });
@@ -60,232 +61,149 @@ namespace GraphicsControls.Sample
             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,
+                TextColor = Colors.Black,
+                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."
+            };
+
+            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
+            {
+                BackgroundColor = SampleColors.SectionBackgroundColor,
+                CornerRadius = 12,
+                HeightRequest = 150,
+                WidthRequest = 150,
+                Margin = new Thickness(0, 6, 6, 0)
+            };
+
+            var cSharpGesture = new TapGestureRecognizer();
+            cSharpGesture.Tapped += OnCSharpGestureTapped;
+            cSharpFrame.GestureRecognizers.Add(cSharpGesture);
+
+            var cSharpLabel = new Label
+            {
+                Text = "C#",
+                TextColor = Colors.Purple,
+                HorizontalOptions = LayoutOptions.Center,
+                VerticalOptions = LayoutOptions.Center
+            };
+
+            cSharpFrame.Content = cSharpLabel;
+
+            var xamlFrame = new Frame
+            {
+                BackgroundColor = SampleColors.SectionBackgroundColor,
+                CornerRadius = 12,
+                HeightRequest = 150,
+                WidthRequest = 150,
+                Margin = new Thickness(0, 6, 6, 0)
+            }; 
+            
+            var xamlGesture = new TapGestureRecognizer();
+            xamlGesture.Tapped += OnXamlGestureTapped;
+            xamlFrame.GestureRecognizers.Add(xamlGesture);
+
+            var xamlLabel = new Label
+            {
+                Text = "XAML",
+                TextColor = Colors.Purple,
+                HorizontalOptions = LayoutOptions.Center,
+                VerticalOptions = LayoutOptions.Center
+            };
+
+            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
+            {
+                TextColor = Colors.Black,
+                Text = "Also, there is an an example where learn how to customize existing controls as well as create new drawn controls."
+            }; 
+            
+            layout.Children.Add(customizeInfo);
+
+            var customizeLayout = new Grid();
+
+            var customizeFrame = new Frame
+            {
+                BackgroundColor = SampleColors.SectionBackgroundColor,
+                CornerRadius = 12,
+                HeightRequest = 150,
+                Margin = new Thickness(0, 6, 6, 0)
+            };
+
+            var customizeGesture = new TapGestureRecognizer();
+            customizeGesture.Tapped += OnCustomizeGestureTapped;
+            customizeFrame.GestureRecognizers.Add(customizeGesture);
+
+            var customizeLabel = new Label
+            {
+                Text = "Customize or Create custom drawn controls",
+                TextColor = Colors.Purple,
+                HorizontalOptions = LayoutOptions.Center,
+                VerticalOptions = LayoutOptions.Center
+            };
+
+            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);
-
-            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());
         }
     }
 }
\ No newline at end of file
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs
new file mode 100644
index 0000000..ef692c5
--- /dev/null
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs
@@ -0,0 +1,12 @@
+using Microsoft.Maui.Graphics;
+
+namespace GraphicsControls.Sample
+{
+    public static class SampleColors
+    {
+        public static Color AccentColor = Color.FromArgb("#800080");
+        public static Color PageBackgroundColor = Color.FromArgb("#FFFFFF");
+        public static Color SectionHeaderBackgroundColor = Color.FromArgb("#E9E9E9");
+        public static Color SectionBackgroundColor = Color.FromArgb("#FAFAFA");
+    }
+}
\ No newline at end of file
diff --git a/src/GraphicsControls/GraphicsControls.csproj b/src/GraphicsControls/GraphicsControls.csproj
index c89dd26..c906ce9 100644
--- a/src/GraphicsControls/GraphicsControls.csproj
+++ b/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>

From 68a0c50c096a156f662471f5528d4b9233ecda29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Su=C3=A1rez=20Ruiz?= <javiersuarezruiz@hotmail.com>
Date: Wed, 13 Oct 2021 16:19:05 +0200
Subject: [PATCH 2/2] Update the sample to add dark theme support

---
 .../CustomControlsPage.cs                     | 21 ++--
 .../CustomNavigationPage.cs                   |  2 +-
 .../GalleryPageCSharp.cs                      | 19 ++--
 .../GalleryPageXAML.xaml                      | 96 ++++++++++---------
 .../GraphicsControls.Sample/MainPage.cs       | 58 +++++++----
 .../GraphicsControls.Sample/SampleColors.cs   | 17 +++-
 6 files changed, 127 insertions(+), 86 deletions(-)

diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs
index 8a94202..f7bb062 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomControlsPage.cs
@@ -11,7 +11,7 @@ namespace GraphicsControls.Sample
         {
             Title = "Customize using Microsoft.Maui.Graphics.Controls";
 
-            BackgroundColor = SampleColors.PageBackgroundColor;
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightPageBackgroundColor, SampleColors.DarkPageBackgroundColor);
 
             var scrollView = new ScrollView();
 
@@ -29,29 +29,30 @@ namespace GraphicsControls.Sample
 
         IView CreateContainer(string title, View content)
         {
-            var contentContainer = new StackLayout
-            {
-                BackgroundColor = SampleColors.SectionBackgroundColor
-            };
+            var contentContainer = new StackLayout();
+
+            contentContainer.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
 
             var header = new Label
             {
-                BackgroundColor = SampleColors.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 = SampleColors.SectionBackgroundColor,
                 Padding = 0,
                 Margin = new Thickness(0, 6)
             };
 
+            container.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
             container.Children.Add(contentContainer);
 
             return container;
@@ -78,6 +79,7 @@ namespace GraphicsControls.Sample
             return CreateContainer("DrawCustomSlider", layout);
         }
 
+        /*
         IView CreateCustomSliderMapper()
         {
             var layout = new StackLayout
@@ -98,6 +100,7 @@ namespace GraphicsControls.Sample
 
             return CreateContainer("CustomSliderMapper", layout);
         }
+        */
 
         IView CreateCustomSliderDrawable()
         {
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs
index 463f6c4..d6c90f6 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/CustomNavigationPage.cs
@@ -7,7 +7,7 @@ namespace GraphicsControls.Sample
     {
         public CustomNavigationPage(Page page) : base(page)
         {
-            BarBackgroundColor = SampleColors.AccentColor;
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
             BarTextColor = Colors.White;
         }
     }
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs
index caaf43c..8301f9e 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageCSharp.cs
@@ -12,7 +12,7 @@ namespace GraphicsControls.Sample
         {
             Title = "C# Gallery";
 
-            BackgroundColor = SampleColors.PageBackgroundColor;
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightPageBackgroundColor, SampleColors.DarkPageBackgroundColor);
 
             var scrollView = new ScrollView();
 
@@ -36,29 +36,30 @@ namespace GraphicsControls.Sample
 
         IView CreateContainer(string title, View content)
         {
-            var contentContainer = new StackLayout
-            {
-                BackgroundColor = SampleColors.SectionBackgroundColor
-            };
+            var contentContainer = new StackLayout();
+
+            contentContainer.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
 
             var header = new Label
             {
-                BackgroundColor = SampleColors.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 = SampleColors.SectionBackgroundColor,
                 Padding = 0,
                 Margin = new Thickness(0, 6)
             };
 
+            container.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightSectionBackgroundColor, SampleColors.DarkSectionBackgroundColor);
+
             container.Children.Add(contentContainer);
 
             return container;
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml
index 49d68a1..a554549 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/GalleryPageXAML.xaml
@@ -3,13 +3,23 @@
     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>
 
-            <Color x:Key="SectionBackgroundColor">#FAFAFA</Color>
-            <Color x:Key="SectionHeaderBackgroundColor">#E9E9E9</Color>
-
+            <!-- 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" />
@@ -23,14 +33,14 @@
                 Margin="12">
                 <!-- BUTTON -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="Button"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -46,14 +56,14 @@
                 </StackLayout>
                 <!-- CHECKBOX -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="CheckBox"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -69,14 +79,14 @@
                 </StackLayout>
                 <!-- DATEPICKER -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="DatePicker"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -92,14 +102,14 @@
                 </StackLayout>
                 <!-- EDITOR -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="Editor"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -115,14 +125,14 @@
                 </StackLayout>
                 <!-- ENTRY -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="Entry"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -138,14 +148,14 @@
                 </StackLayout>
                 <!-- PROGRESSBAR -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="ProgressBar"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -161,14 +171,14 @@
                 </StackLayout>
                 <!-- SLIDER -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="Slider"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -184,14 +194,14 @@
                 </StackLayout>
                 <!-- STEPPER -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="Stepper"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -207,14 +217,14 @@
                 </StackLayout>
                 <!-- SWITCH -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="Switch"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
@@ -230,14 +240,14 @@
                 </StackLayout>
                 <!-- TIMEPICKER -->
                 <StackLayout
-                    BackgroundColor="{StaticResource SectionBackgroundColor}">
+                    BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}">
                     <Label 
-                        BackgroundColor="{StaticResource SectionHeaderBackgroundColor}"
-                        TextColor="Black"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionHeaderBackgroundColor}, Light={StaticResource LightSectionHeaderBackgroundColor}}"
+                        TextColor="{AppThemeBinding Dark={StaticResource DarkTextColor}, Light={StaticResource LightTextColor}}"
                         Text="TimePicker"
                         Padding="12"/>
                     <Grid
-                        BackgroundColor="{StaticResource SectionBackgroundColor}"
+                        BackgroundColor="{AppThemeBinding Dark={StaticResource DarkSectionBackgroundColor}, Light={StaticResource LightSectionBackgroundColor}}"
                         Margin="0, 6"
                         Padding="0">
                         <StackLayout
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs
index 06b8674..111f55f 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/MainPage.cs
@@ -11,7 +11,9 @@ namespace GraphicsControls.Sample
         {
             Title = "GraphicsControls";
 
-            BackgroundColor = SampleColors.PageBackgroundColor;
+            Application.Current.UserAppTheme = OSAppTheme.Light;
+
+            this.SetAppThemeColor(BackgroundColorProperty, SampleColors.LightPageBackgroundColor, SampleColors.DarkPageBackgroundColor);
 
             var scrollView = new ScrollView();
 
@@ -42,21 +44,27 @@ namespace GraphicsControls.Sample
         {
             var container = new StackLayout();
 
-            container.Add(new Label
+            var title = new Label
             {
                 FontSize = 24,
                 FontAttributes = FontAttributes.Bold,
                 Text = "Introducing Microsoft.Maui.Graphics.Controls",
-                TextColor = Colors.Black,
                 Margin = new Thickness(0, 12)
-            });
+            };
 
-            container.Add(new Label
+            title.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
+            container.Add(title);
+
+            var subTitle = new Label
             {
                 FontSize = 16,
-                Text = "A .NET MAUI experiment that offers drawn controls allowing to choose between Cupertino, Fluent and Material.",
-                TextColor = Colors.Black
-            });
+                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;
         }
@@ -72,10 +80,11 @@ namespace GraphicsControls.Sample
 
             var galleryInfo = new Label
             {
-                TextColor = Colors.Black,
                 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();
@@ -85,13 +94,14 @@ namespace GraphicsControls.Sample
 
             var cSharpFrame = new Frame
             {
-                BackgroundColor = SampleColors.SectionBackgroundColor,
                 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);
@@ -99,22 +109,24 @@ namespace GraphicsControls.Sample
             var cSharpLabel = new Label
             {
                 Text = "C#",
-                TextColor = Colors.Purple,
                 HorizontalOptions = LayoutOptions.Center,
                 VerticalOptions = LayoutOptions.Center
             };
 
+            cSharpLabel.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
+
             cSharpFrame.Content = cSharpLabel;
 
             var xamlFrame = new Frame
             {
-                BackgroundColor = SampleColors.SectionBackgroundColor,
                 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);
@@ -122,11 +134,12 @@ namespace GraphicsControls.Sample
             var xamlLabel = new Label
             {
                 Text = "XAML",
-                TextColor = Colors.Purple,
                 HorizontalOptions = LayoutOptions.Center,
                 VerticalOptions = LayoutOptions.Center
             };
 
+            xamlLabel.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
+
             xamlFrame.Content = xamlLabel;
 
             galleryLayout.Children.Add(cSharpFrame);
@@ -139,22 +152,24 @@ namespace GraphicsControls.Sample
 
             var customizeInfo = new Label
             {
-                TextColor = Colors.Black,
                 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
             {
-                BackgroundColor = SampleColors.SectionBackgroundColor,
                 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);
@@ -162,11 +177,12 @@ namespace GraphicsControls.Sample
             var customizeLabel = new Label
             {
                 Text = "Customize or Create custom drawn controls",
-                TextColor = Colors.Purple,
                 HorizontalOptions = LayoutOptions.Center,
                 VerticalOptions = LayoutOptions.Center
             };
 
+            customizeLabel.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightAccentColor, SampleColors.DarkAccentColor);
+
             customizeFrame.Content = customizeLabel;
 
             customizeLayout.Children.Add(customizeFrame);
@@ -188,6 +204,8 @@ namespace GraphicsControls.Sample
                 TextColor = Colors.Black
             };
 
+            footer.SetAppThemeColor(Label.TextColorProperty, SampleColors.LightTextColor, SampleColors.DarkTextColor);
+
             return footer;
         }
 
diff --git a/src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs b/src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs
index ef692c5..1d5b734 100644
--- a/src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs
+++ b/src/GraphicsControls.Sample/GraphicsControls.Sample/SampleColors.cs
@@ -4,9 +4,18 @@ namespace GraphicsControls.Sample
 {
     public static class SampleColors
     {
-        public static Color AccentColor = Color.FromArgb("#800080");
-        public static Color PageBackgroundColor = Color.FromArgb("#FFFFFF");
-        public static Color SectionHeaderBackgroundColor = Color.FromArgb("#E9E9E9");
-        public static Color SectionBackgroundColor = Color.FromArgb("#FAFAFA");
+        // 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");
     }
 }
\ No newline at end of file