Checkbox implementation

Author: enisn

sandbox/SandboxMAUI/App.xaml.cs

@@ -5,13 +5,13 @@
 
 namespace SandboxMAUI
 {
-	public partial class App : Application
-	{
-		public App()
-		{
-			InitializeComponent();
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
 
-			MainPage = new MainPage();
-		}
-	}
+            MainPage = new NavigationPage(new MainPage());
+        }
+    }
 }

sandbox/SandboxMAUI/MainPage.xaml

@@ -5,50 +5,12 @@
              BackgroundColor="{DynamicResource SecondaryColor}">
 
     <ScrollView>
-        <Grid RowSpacing="25" RowDefinitions="Auto,Auto,Auto,Auto,*"
+        <StackLayout
               Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
 
-            <StackLayout Grid.Row="0">
-                <input:CheckBox Text="Option 1" Type="Material" Color="Blue" IconColor="Red" />
-                <Label 
-                Text="Hello, World!"
-                SemanticProperties.HeadingLevel="Level1"
-                FontSize="32"
-                HorizontalOptions="Center" />
-            </StackLayout>
 
-            <Label 
-                Text="Welcome to .NET Multi-platform App UI"
-                Grid.Row="1"
-                SemanticProperties.HeadingLevel="Level1"
-                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
-                FontSize="18"
-                HorizontalOptions="Center" />
+            <Button Text="CheckBox" Clicked="GoToCheckBoxPage" />
 
-            <Label 
-                Text="Current count: 0"
-                Grid.Row="2"
-                FontSize="18"
-                FontAttributes="Bold"
-                x:Name="CounterLabel"
-                HorizontalOptions="Center" />
-
-            <Button 
-                Text="Click me"
-                FontAttributes="Bold"
-                Grid.Row="3"
-                SemanticProperties.Hint="Counts the number of times you click"
-                Clicked="OnCounterClicked"
-                HorizontalOptions="Center" />
-
-            <Image Grid.Row="4"
-                   IsVisible="False"
-                Source="dotnet_bot.png"
-                SemanticProperties.Description="Cute dot net bot waving hi to you!"
-                WidthRequest="250"
-                HeightRequest="310"
-                HorizontalOptions="Center" />
-
-        </Grid>
+        </StackLayout>
     </ScrollView>
 </ContentPage>

sandbox/SandboxMAUI/MainPage.xaml.cs

@@ -1,24 +1,20 @@
 using System;
 using Microsoft.Maui.Controls;
 using Microsoft.Maui.Essentials;
+using SandboxMAUI.Pages;
 
 namespace SandboxMAUI
 {
 	public partial class MainPage : ContentPage
 	{
-		int count = 0;
-
 		public MainPage()
 		{
 			InitializeComponent();
 		}
 
-		private void OnCounterClicked(object sender, EventArgs e)
-		{
-			count++;
-			CounterLabel.Text = $"Current count: {count}";
-
-			SemanticScreenReader.Announce(CounterLabel.Text);
-		}
-	}
+        async void GoToCheckBoxPage(System.Object sender, System.EventArgs e)
+        {
+			await Navigation.PushAsync(new CheckBoxPage());
+        }
+    }
 }

sandbox/SandboxMAUI/Pages/CheckBoxPage.xaml

@@ -0,0 +1,27 @@
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:input="clr-namespace:InputKit.Shared.Controls;assembly=InputKit"
+             x:Class="SandboxMAUI.Pages.CheckBoxPage"
+             Title="CheckBoxPage"
+             BackgroundColor="White">
+    <ScrollView>
+        <StackLayout
+            x:Name="mainLayout"
+            Padding="25"
+            Spacing="15">
+
+            <Button Text="Randomize colors" Clicked="Button_Clicked" />
+
+            <BoxView Color="Black" HeightRequest="1" HorizontalOptions="Fill" Margin="5,10" />
+
+            <input:CheckBox Text="Option 0 with Box Type" Type="Box" LabelPosition="After"/>
+            <input:CheckBox Text="Option 1 with Check Type" Type="Check" />
+            <input:CheckBox Text="Option 2 wity Cross Type" Type="Cross" />
+            <input:CheckBox Text="Option 3 with Custom Type" Type="Custom" CustomIcon="ic_account_balance_black"/>
+            <input:CheckBox Text="Option 4 with Material Type" Type="Material" />
+            <input:CheckBox Text="Option 5 with Star Type" Type="Star"/>
+            <input:CheckBox Text="Option 6 (Position)" Type="Check" LabelPosition="Before"/>
+
+        </StackLayout>
+    </ScrollView>
+</ContentPage>

sandbox/SandboxMAUI/Pages/CheckBoxPage.xaml.cs

@@ -0,0 +1,27 @@
+using System;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Graphics;
+using CheckBox = InputKit.Shared.Controls.CheckBox;
+
+namespace SandboxMAUI.Pages;
+
+public partial class CheckBoxPage : ContentPage
+{
+	public CheckBoxPage()
+	{
+		InitializeComponent();
+	}
+    Random rnd = new Random();
+    private void Button_Clicked(object sender, EventArgs e)
+    {
+        var colors = typeof(Colors).GetFields();
+        var color = (Color)colors[rnd.Next(colors.Length)].GetValue(null);
+        foreach (var view in mainLayout.Children)
+        {
+            if (view is CheckBox chk)
+            {
+                chk.Color = color;
+            }
+        }
+    }
+}

sandbox/SandboxMAUI/Resources/Images/ic_account_balance_black.png

@@ -53,14 +53,14 @@ public CheckBox()
         Padding = new Thickness(0, 10);
         Spacing = 10;
         frmBackground.Content = boxSelected;
-
         ApplyLabelPosition(LabelPosition);
         ApplyIsCheckedAction = ApplyIsChecked;
         ApplyIsPressedAction = ApplyIsPressed;
         GestureRecognizers.Add(new TapGestureRecognizer
         {
             Command = new Command(() => { if (IsDisabled) return; IsChecked = !IsChecked; ExecuteCommand(); CheckChanged?.Invoke(this, new EventArgs()); ValidationChanged?.Invoke(this, new EventArgs()); }),
         });
+
         imgSelected.BackgroundColor = Colors.Cyan;
 
         imgSelected.WidthRequest = 15;
@@ -218,7 +218,7 @@ public LabelPosition LabelPosition
 
     #region BindableProperties
 #pragma warning disable CS1591 // Missing XML comment for publicly visible type or member
-    public static readonly BindableProperty ColorProperty = BindableProperty.Create(nameof(Color), typeof(Color), typeof(CheckBox), InputKitOptions.GetAccentColor(), propertyChanged: (bo, ov, nv) => (bo as CheckBox).UpdateColors());
+    public static readonly BindableProperty ColorProperty = BindableProperty.Create(nameof(Color), typeof(Color), typeof(CheckBox), GlobalSetting.Color, propertyChanged: (bo, ov, nv) => (bo as CheckBox).UpdateColors());
     public static readonly BindableProperty TextColorProperty = BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(CheckBox), GlobalSetting.TextColor, propertyChanged: (bo, ov, nv) => (bo as CheckBox).TextColor = (Color)nv);
     public static readonly BindableProperty IconColorProperty = BindableProperty.Create(nameof(IconColor), typeof(Color), typeof(CheckBox), GlobalSetting.Color, propertyChanged: (bo, ov, nv) => (bo as CheckBox).UpdateColors());
     public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(CheckBox), false, BindingMode.TwoWay, propertyChanged: (bo, ov, nv) => (bo as CheckBox).ApplyIsCheckedAction(bo as CheckBox, (bool)nv));

src/InputKit/Shared/Controls/CheckBox.cs

@@ -5,5 +5,5 @@ namespace InputKit.Shared;
 
 public class InputKitOptions
 {
-    public static Func<Color> GetAccentColor { get; set; } = () => new Color(81, 43, 212);
+    public static Func<Color> GetAccentColor { get; set; } = () => Color.FromArgb("#512bdf");
 }