Use components for styling

SingletonSean · Apr 10, 2024 · 520cab6 · 520cab6
1 parent 372739e
commit 520cab6
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 29 deletions.
diff --git a/ComponentsOverStyles/App.xaml b/ComponentsOverStyles/App.xaml
@@ -10,31 +10,19 @@
                 <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                 <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                 <ResourceDictionary>
-                    <Style x:Key="ButtonBase" TargetType="Button">
-                        <Setter Property="Padding" Value="10,5" />
-                    </Style>
-                    <Style
-                        x:Key="ButtonPrimary"
-                        BasedOn="{StaticResource ButtonBase}"
-                        TargetType="Button">
-                        <Setter Property="Background" Value="#475BA1" />
-                        <Setter Property="TextColor" Value="White" />
-                    </Style>
-                    <Style
-                        x:Key="ButtonSecondary"
-                        BasedOn="{StaticResource ButtonBase}"
-                        TargetType="Button">
-                        <Setter Property="Background" Value="#FFD97A" />
-                        <Setter Property="TextColor" Value="Black" />
-                    </Style>
-                    <Style
-                        x:Key="ButtonPrimaryOutline"
-                        BasedOn="{StaticResource ButtonBase}"
-                        TargetType="Button">
-                        <Setter Property="Background" Value="White" />
-                        <Setter Property="BorderColor" Value="#475BA1" />
-                        <Setter Property="BorderWidth" Value="1" />
-                        <Setter Property="TextColor" Value="Black" />
+                    <Style TargetType="local:AppButton">
+                        <Setter Property="Padding" Value="20,10" />
+                        <Setter Property="BorderWidth" Value="0" />
+                        <Setter Property="Background" Value="{Binding VariantBackgroundColor, Source={RelativeSource Self}}" />
+                        <Setter Property="TextColor" Value="{Binding VariantForegroundColor, Source={RelativeSource Self}}" />
+                        <Style.Triggers>
+                            <Trigger TargetType="local:AppButton" Property="Outline" Value="True">
+                                <Setter Property="Background" Value="White" />
+                                <Setter Property="TextColor" Value="Black" />
+                                <Setter Property="BorderColor" Value="{Binding VariantBackgroundColor, Source={RelativeSource Self}}" />
+                                <Setter Property="BorderWidth" Value="1" />
+                            </Trigger>
+                        </Style.Triggers>
                     </Style>
                 </ResourceDictionary>
             </ResourceDictionary.MergedDictionaries>

diff --git a/ComponentsOverStyles/AppButton.cs b/ComponentsOverStyles/AppButton.cs
@@ -0,0 +1,91 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace ComponentsOverStyles
+{
+    public enum VariantType
+    {
+        Primary,
+        Secondary,
+        Tertiary,
+    }
+
+    public class AppButton : Button
+    {
+        public static readonly BindableProperty OutlineProperty =
+            BindableProperty.Create(nameof(Outline), typeof(bool), typeof(AppButton), false);
+
+        public bool Outline
+        {
+            get => (bool)GetValue(OutlineProperty);
+            set => SetValue(OutlineProperty, value);
+        }
+
+        public static readonly BindableProperty VariantProperty =
+            BindableProperty.Create(nameof(Variant), typeof(VariantType), typeof(AppButton), null,
+                propertyChanged: OnVariantPropertyChanged);
+
+        public VariantType Variant
+        {
+            get => (VariantType)GetValue(VariantProperty);
+            set => SetValue(VariantProperty, value);
+        }
+
+        public static readonly BindablePropertyKey VariantBackgroundColorProperty =
+            BindableProperty.CreateReadOnly(nameof(VariantBackgroundColor), typeof(Color), typeof(AppButton), null);
+
+        public Color? VariantBackgroundColor
+        {
+            get => (Color?)GetValue(VariantBackgroundColorProperty.BindableProperty);
+            set => SetValue(VariantBackgroundColorProperty, value);
+        }
+
+        public static readonly BindablePropertyKey VariantForegroundColorProperty =
+            BindableProperty.CreateReadOnly(nameof(VariantForegroundColor), typeof(Color), typeof(AppButton), null);
+
+        public Color? VariantForegroundColor
+        {
+            get => (Color?)GetValue(VariantForegroundColorProperty.BindableProperty);
+            set => SetValue(VariantForegroundColorProperty, value);
+        }
+
+        public AppButton()
+        {
+            UpdateVariantColors();
+        }
+
+        private static void OnVariantPropertyChanged(BindableObject bindable, object oldValue, object newValue)
+        {
+            if (bindable is AppButton button)
+            {
+                button.UpdateVariantColors();
+            }
+        }
+
+        private void UpdateVariantColors()
+        {
+            switch(Variant)
+            {
+                case VariantType.Primary:
+                    VariantBackgroundColor = Color.FromArgb("#475BA1");
+                    VariantForegroundColor = Color.FromArgb("#ffffff");
+                    break;
+                case VariantType.Secondary:
+                    VariantBackgroundColor = Color.FromArgb("#FFD97A");
+                    VariantForegroundColor = Color.FromArgb("#000000");
+                    break;
+                case VariantType.Tertiary:
+                    VariantBackgroundColor = Color.FromArgb("#cccccc");
+                    VariantForegroundColor = Color.FromArgb("#000000");
+                    break;
+                default:
+                    VariantBackgroundColor = null;
+                    VariantForegroundColor = null;
+                    break;
+            }
+        }
+    }
+}
diff --git a/ComponentsOverStyles/MainPage.xaml b/ComponentsOverStyles/MainPage.xaml
@@ -2,12 +2,36 @@
 <ContentPage
     x:Class="ComponentsOverStyles.MainPage"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:ComponentsOverStyles">
     <ScrollView>
         <VerticalStackLayout Padding="25" Spacing="25">
-            <Button Style="{StaticResource ButtonPrimary}" Text="Primary" />
-            <Button Style="{StaticResource ButtonSecondary}" Text="Secondary" />
-            <Button Style="{StaticResource ButtonPrimaryOutline}" Text="Primary Outline" />
+            <local:AppButton
+                Outline="False"
+                Text="Primary"
+                Variant="Primary" />
+            <local:AppButton
+                Outline="True"
+                Text="Primary Outline"
+                Variant="Primary" />
+
+            <local:AppButton
+                Outline="False"
+                Text="Secondary"
+                Variant="Secondary" />
+            <local:AppButton
+                Outline="True"
+                Text="Secondary Outline"
+                Variant="Secondary" />
+
+            <local:AppButton
+                Outline="False"
+                Text="Tertiary"
+                Variant="Tertiary" />
+            <local:AppButton
+                Outline="True"
+                Text="Tertiary Outline"
+                Variant="Tertiary" />
         </VerticalStackLayout>
     </ScrollView>
 </ContentPage>