From 3382571ba71b38ea51a6eb105001752fab03e67c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Sua=CC=81rez=20Ruiz?=
 <javiersuarezruiz@hotmail.com>
Date: Sun, 3 Oct 2021 18:57:44 +0200
Subject: [PATCH 1/2] Convert Color properties into Brush properties

---
 .../Views/DataVisualizationGallery.xaml       | 29 +++++++++++++++++--
 src/TemplateUI/DataVisualization/AreaChart.cs | 10 +++----
 src/TemplateUI/DataVisualization/BarChart.cs  | 10 +++----
 .../DataVisualization/Base/SerialChart.cs     | 22 +++++++-------
 src/TemplateUI/DataVisualization/LineChart.cs |  6 ++--
 5 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/src/TemplateUI.Gallery/Views/DataVisualizationGallery.xaml b/src/TemplateUI.Gallery/Views/DataVisualizationGallery.xaml
index 6568642..36aa4cb 100644
--- a/src/TemplateUI.Gallery/Views/DataVisualizationGallery.xaml
+++ b/src/TemplateUI.Gallery/Views/DataVisualizationGallery.xaml
@@ -7,6 +7,29 @@
     BarBackgroundColor="{StaticResource NavBarBackgroundColor}"
     BarTextColor="White"
     Title="DataVisualization Gallery">
+    <TabbedPage.Resources>
+        <ResourceDictionary>
+
+        <LinearGradientBrush
+            x:Key="DataVisualizationGradient"
+            StartPoint="0,0"
+            EndPoint="1,1">
+            <GradientStop
+                Color="Yellow"
+                Offset="0.0" />
+            <GradientStop
+                Color="Red"
+                Offset="0.25" />
+            <GradientStop
+                Color="Blue"
+                Offset="0.75" />             
+            <GradientStop
+                Color="LimeGreen"
+                Offset="1.0" />
+        </LinearGradientBrush>                                                       
+
+        </ResourceDictionary>
+    </TabbedPage.Resources>
     <ContentPage
         Title="Line Chart">
         <StackLayout
@@ -14,7 +37,7 @@
             <datavisualization:LineChart
                 HeightRequest="200"
                 Title="Line Chart"
-                Color="OrangeRed"
+                Brush="OrangeRed"
                 CategoryMemberPath="Title"
                 ValueMemberPath="Value" 
                 DataSource="{Binding Data}"/>
@@ -27,7 +50,7 @@
             <datavisualization:AreaChart
                 HeightRequest="200"
                 Title="Area Chart"
-                Color="LawnGreen"
+                Brush="{StaticResource DataVisualizationGradient}"
                 CategoryMemberPath="Title"
                 ValueMemberPath="Value"
                 DataSource="{Binding Data}"/>
@@ -40,7 +63,7 @@
             <datavisualization:BarChart
                 HeightRequest="200"
                 Title="Bar Chart"
-                Color="BlueViolet"
+                Brush="BlueViolet"
                 CategoryMemberPath="Title"
                 ValueMemberPath="Value"
                 DataSource="{Binding Data}"/>
diff --git a/src/TemplateUI/DataVisualization/AreaChart.cs b/src/TemplateUI/DataVisualization/AreaChart.cs
index ccc10c4..29082d8 100644
--- a/src/TemplateUI/DataVisualization/AreaChart.cs
+++ b/src/TemplateUI/DataVisualization/AreaChart.cs
@@ -97,8 +97,8 @@ void InitializeAreaChart()
             _areaChart = new Polygon
             {
                 Aspect = Stretch.Fill,
-                Fill = new SolidColorBrush(Color),
-                Stroke = new SolidColorBrush(Color),
+                Fill = Brush,
+                Stroke = Brush,
                 StrokeThickness = 2
             };
         }
@@ -117,10 +117,10 @@ public override void UpdateDataSource()
             UpdateCategoryData();
         }
 
-        public override void UpdateColor()
+        public override void UpdateBrush()
         {
-            _areaChart.Stroke = new SolidColorBrush(Color);
-            _areaChart.Fill = new SolidColorBrush(Color);
+            _areaChart.Stroke = Brush;
+            _areaChart.Fill = Brush;
         }
 
         void UpdateValueData()
diff --git a/src/TemplateUI/DataVisualization/BarChart.cs b/src/TemplateUI/DataVisualization/BarChart.cs
index 4aa7c0f..25c57f6 100644
--- a/src/TemplateUI/DataVisualization/BarChart.cs
+++ b/src/TemplateUI/DataVisualization/BarChart.cs
@@ -111,8 +111,8 @@ void InitializeBarChart()
             _barChart = new Path
             {
                 Aspect = Stretch.Fill,
-                Stroke = new SolidColorBrush(Color),
-                Fill = new SolidColorBrush(Color),
+                Stroke = Brush,
+                Fill = Brush,
                 StrokeThickness = 1,
                 Margin = new Thickness(24, 0)
             };
@@ -134,10 +134,10 @@ public override void UpdateDataSource()
             UpdateCategoryData();
         }
 
-        public override void UpdateColor()
+        public override void UpdateBrush()
         {
-            _barChart.Stroke = new SolidColorBrush(Color);
-            _barChart.Fill = new SolidColorBrush(Color);
+            _barChart.Stroke = Brush;
+            _barChart.Fill = Brush;
         }
 
         void UpdateValueData()
diff --git a/src/TemplateUI/DataVisualization/Base/SerialChart.cs b/src/TemplateUI/DataVisualization/Base/SerialChart.cs
index dc89343..b26eaa0 100644
--- a/src/TemplateUI/DataVisualization/Base/SerialChart.cs
+++ b/src/TemplateUI/DataVisualization/Base/SerialChart.cs
@@ -77,20 +77,20 @@ public Color AxisColor
             set { SetValue(AxisColorProperty, value); }
         }
 
-        public static readonly BindableProperty ColorProperty =
-          BindableProperty.Create(nameof(Color), typeof(Color), typeof(SerialChart), Color.Black,
-              propertyChanged: OnColorPropertyChanged);
+        public static readonly BindableProperty BrushProperty =
+          BindableProperty.Create(nameof(Brush), typeof(Brush), typeof(SerialChart), new SolidColorBrush(Color.Black),
+              propertyChanged: OnBrushPropertyChanged);
 
-        static void OnColorPropertyChanged(BindableObject bindable, object oldValue, object newValue)
+        static void OnBrushPropertyChanged(BindableObject bindable, object oldValue, object newValue)
         {
             SerialChart chart = bindable as SerialChart;
-            chart.NotifyColorChanges();
+            chart.NotifyBrushChanges();
         }
 
-        public Color Color
+        public Brush Brush
         {
-            get { return (Color)GetValue(ColorProperty); }
-            set { SetValue(ColorProperty, value); }
+            get { return (Brush)GetValue(BrushProperty); }
+            set { SetValue(BrushProperty, value); }
         }
 
         public virtual void UpdateDataSource()
@@ -98,7 +98,7 @@ public virtual void UpdateDataSource()
 
         }
 
-        public virtual void UpdateColor()
+        public virtual void UpdateBrush()
         {
 
         }
@@ -108,9 +108,9 @@ void NotifyDataSourceChanges()
             UpdateDataSource();
         }
 
-        void NotifyColorChanges()
+        void NotifyBrushChanges()
         {
-            UpdateColor();
+            UpdateBrush();
         }
     }
 }
\ No newline at end of file
diff --git a/src/TemplateUI/DataVisualization/LineChart.cs b/src/TemplateUI/DataVisualization/LineChart.cs
index e25d7a1..1d81c0f 100644
--- a/src/TemplateUI/DataVisualization/LineChart.cs
+++ b/src/TemplateUI/DataVisualization/LineChart.cs
@@ -98,7 +98,7 @@ void InitializeLineChart()
             {
                 Aspect = Stretch.Fill,
                 WidthRequest = 100,
-                Stroke = new SolidColorBrush(Color),
+                Stroke = Brush,
                 StrokeThickness = 2
             };
         }
@@ -117,9 +117,9 @@ public override void UpdateDataSource()
             UpdateCategoryData();
         }
 
-        public override void UpdateColor()
+        public override void UpdateBrush()
         {
-            _lineChart.Stroke = new SolidColorBrush(Color);
+            _lineChart.Stroke = Brush;
         }
 
         void UpdateValueData()

From ecaf92f31341b1367806950161d997984d14b2fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Sua=CC=81rez=20Ruiz?=
 <javiersuarezruiz@hotmail.com>
Date: Sun, 3 Oct 2021 19:14:20 +0200
Subject: [PATCH 2/2] Add brushes support in AvatarView

---
 .../Views/AvatarViewGallery.xaml              | 75 ++++++++++++-------
 .../Controls/AvatarView/AvatarView.cs         | 20 ++---
 src/TemplateUI/Themes/Styles/AvatarView.xaml  |  8 +-
 3 files changed, 63 insertions(+), 40 deletions(-)

diff --git a/src/TemplateUI.Gallery/Views/AvatarViewGallery.xaml b/src/TemplateUI.Gallery/Views/AvatarViewGallery.xaml
index f193c80..848a93e 100644
--- a/src/TemplateUI.Gallery/Views/AvatarViewGallery.xaml
+++ b/src/TemplateUI.Gallery/Views/AvatarViewGallery.xaml
@@ -7,6 +7,29 @@
     BarBackgroundColor="{StaticResource NavBarBackgroundColor}"
     BarTextColor="White"
     Title="AvatarView Gallery">
+    <TabbedPage.Resources>
+              <ResourceDictionary>
+
+                  <LinearGradientBrush
+                      x:Key="BorderGradient"
+                      StartPoint="0,0"
+                      EndPoint="1,1">
+                      <GradientStop
+                          Color="Yellow"
+                          Offset="0.0" />
+                      <GradientStop
+                          Color="Red"
+                          Offset="0.25" />
+                      <GradientStop
+                          Color="Blue"
+                          Offset="0.75" />             
+                      <GradientStop
+                          Color="LimeGreen"
+                          Offset="1.0" />
+                  </LinearGradientBrush>                                                       
+
+        </ResourceDictionary>
+    </TabbedPage.Resources>
     <ContentPage
         Title="Getting Started" 
         IconImageSource="started.png">
@@ -16,29 +39,29 @@
                 <controls:AvatarView
                     AvatarName="Javier"
                     AvatarSurName="Suarez"
-                    BorderColor="Black"
-                    BackgroundColor="Red"/>
+                    BorderBrush="Black"
+                    Background="Red"/>
                 <Label
                     Text="Using Initials (Ellipse)"/>
                 <controls:AvatarView
                     AvatarShape="Square"
                     AvatarName="Javier"
                     AvatarSurName="Suarez"
-                    BorderColor="Black"
-                    BackgroundColor="Red"/>
+                    BorderBrush="Black"
+                    Background="Red"/>
                 <Label
                     Text="Using Initials (Square)"/>
                 <controls:AvatarView
                     ImageSource="javier.jpg"
-                    BorderColor="Black"
-                    BackgroundColor="Red"/>
+                    BorderBrush="Black"
+                    Background="Red"/>
                 <Label
                     Text="Using an Image (Ellipse)"/>
                 <controls:AvatarView
                     AvatarShape="Square"
                     ImageSource="javier.jpg"
-                    BorderColor="Black"
-                    BackgroundColor="Red"/>
+                    BorderBrush="Black"
+                    Background="Red"/>
                 <Label
                     Text="Using an Image (Square)"/>
             </StackLayout>
@@ -63,7 +86,7 @@
                 </Grid.RowDefinitions>
                 <StackLayout>
                     <controls:AvatarView
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="ExtraSmall"/>
@@ -74,7 +97,7 @@
                     Grid.Column="1">
                     <controls:AvatarView
                         AvatarShape="Square"
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="ExtraSmall"/>
@@ -84,7 +107,7 @@
                 <StackLayout
                     Grid.Row="1">
                     <controls:AvatarView
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="Small"/>
@@ -96,7 +119,7 @@
                     Grid.Row="1">
                     <controls:AvatarView
                         AvatarShape="Square"
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="Small"/>
@@ -106,7 +129,7 @@
                 <StackLayout
                     Grid.Row="2">
                     <controls:AvatarView
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="Medium"/>
@@ -118,7 +141,7 @@
                     Grid.Row="2">
                     <controls:AvatarView
                         AvatarShape="Square"
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="Medium"/>
@@ -128,7 +151,7 @@
                 <StackLayout
                     Grid.Row="3">
                     <controls:AvatarView
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="Large"/>
@@ -140,7 +163,7 @@
                     Grid.Row="3">
                     <controls:AvatarView
                         AvatarShape="Square"
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="Large"/>
@@ -150,7 +173,7 @@
                 <StackLayout
                     Grid.Row="4">
                     <controls:AvatarView
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="ExtraLarge"/>
@@ -162,7 +185,7 @@
                     Grid.Row="4">
                     <controls:AvatarView
                         AvatarShape="Square"
-                        BackgroundColor="Orange"
+                        Background="Orange"
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarSize="ExtraLarge"/>
@@ -190,8 +213,8 @@
                     <controls:AvatarView
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
-                        BackgroundColor="Red"
-                        BorderColor="Orange"
+                        Background="Red"
+                        BorderBrush="{StaticResource BorderGradient}"
                         BorderWidth="3"/>
                     <Label
                         Text="BorderWidth (Circle)"/>
@@ -202,8 +225,8 @@
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarShape="Square"
-                        BackgroundColor="Red"
-                        BorderColor="Orange"
+                        Background="Red"
+                        BorderBrush="{StaticResource BorderGradient}"
                         BorderWidth="3"/>
                     <Label
                         Text="BorderWidth (Square)"/>
@@ -213,8 +236,8 @@
                     <controls:AvatarView
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
-                        BorderColor="Black"
-                        BackgroundColor="Red"
+                        BorderBrush="Black"
+                        Background="Red"
                         HeightRequest="100"
                         WidthRequest="100"/>
                     <Label
@@ -227,8 +250,8 @@
                         AvatarName="Javier"
                         AvatarSurName="Suarez"
                         AvatarShape="Square"
-                        BorderColor="Black"
-                        BackgroundColor="Red"
+                        BorderBrush="Black"
+                        Background="Red"
                         HeightRequest="100"
                         WidthRequest="100"/>
                     <Label
diff --git a/src/TemplateUI/Controls/AvatarView/AvatarView.cs b/src/TemplateUI/Controls/AvatarView/AvatarView.cs
index 92176d8..316a35d 100644
--- a/src/TemplateUI/Controls/AvatarView/AvatarView.cs
+++ b/src/TemplateUI/Controls/AvatarView/AvatarView.cs
@@ -78,22 +78,22 @@ public string AvatarSurName
             set => SetValue(AvatarSurNameProperty, value);
         }
 
-        public static new readonly BindableProperty BackgroundColorProperty =
-            BindableProperty.Create(nameof(BackgroundColor), typeof(Color), typeof(AvatarView), Color.Default);
+        public static new readonly BindableProperty BackgroundProperty =
+            BindableProperty.Create(nameof(Background), typeof(Brush), typeof(AvatarView), Brush.Default);
 
-        public new Color BackgroundColor
+        public new Brush Background
         {
-            get => (Color)GetValue(BackgroundColorProperty);
-            set => SetValue(BackgroundColorProperty, value);
+            get => (Brush)GetValue(BackgroundProperty);
+            set => SetValue(BackgroundProperty, value);
         }
 
-        public static readonly BindableProperty BorderColorProperty =
-            BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(AvatarView), Color.Default);
+        public static readonly BindableProperty BorderBrushProperty =
+            BindableProperty.Create(nameof(BorderBrush), typeof(Brush), typeof(AvatarView), Brush.Default);
 
-        public Color BorderColor
+        public Brush BorderBrush
         {
-            get => (Color)GetValue(BorderColorProperty);
-            set => SetValue(BorderColorProperty, value);
+            get => (Brush)GetValue(BorderBrushProperty);
+            set => SetValue(BorderBrushProperty, value);
         }
 
         public static readonly BindableProperty BorderWidthProperty =
diff --git a/src/TemplateUI/Themes/Styles/AvatarView.xaml b/src/TemplateUI/Themes/Styles/AvatarView.xaml
index 4d7fba8..fa0b1aa 100644
--- a/src/TemplateUI/Themes/Styles/AvatarView.xaml
+++ b/src/TemplateUI/Themes/Styles/AvatarView.xaml
@@ -11,7 +11,7 @@
             <Image
                 x:Name="Part_Image"
                 Aspect="AspectFill"
-                BackgroundColor="{TemplateBinding BackgroundColor}"
+                Background="{TemplateBinding Background}"
                 Source="{TemplateBinding ImageSource}">
                 <Image.Clip>
                     <EllipseGeometry
@@ -21,7 +21,7 @@
             <Ellipse
                 x:Name="Part_Border"
                 Aspect="Fill"
-                Stroke="{TemplateBinding BorderColor, Converter={StaticResource ColorToBrushConverter}}"
+                Stroke="{TemplateBinding BorderBrush}"
                 StrokeThickness="{TemplateBinding BorderWidth}"
                 HorizontalOptions="Start"/>
             <Label
@@ -48,13 +48,13 @@
                 <Image
                     x:Name="Part_Image"
                     Aspect="AspectFill"
-                    BackgroundColor="{TemplateBinding BackgroundColor}"
+                    Background="{TemplateBinding Background}"
                     Source="{TemplateBinding ImageSource}" />
             </Frame>
             <Rectangle
                 x:Name="Part_Border"
                 Aspect="Fill"
-                Stroke="{TemplateBinding BorderColor, Converter={StaticResource ColorToBrushConverter}}"
+                Stroke="{TemplateBinding BorderBrush}"
                 StrokeThickness="{TemplateBinding BorderWidth}"
                 HorizontalOptions="Start">
                 <Rectangle.RadiusX>