CheckBox improvements,

Material Type added
enisn · Aug 1, 2018 · b917a42 · b917a42
1 parent f3231f8
commit b917a42
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 23 deletions.
diff --git a/InputKit.nuspec b/InputKit.nuspec
@@ -5,7 +5,7 @@
     <id>Xamarin.Forms.InputKit</id>
 
     <!-- The package version number that is used when resolving dependencies -->
-    <version>2.0.6</version>
+    <version>2.1.0-pre1</version>
 
     <!-- Authors contain text that appears directly on the gallery -->
     <authors>Enis Necipoglu</authors>

diff --git a/InputKit/InputKit.csproj b/InputKit/InputKit.csproj
@@ -2,6 +2,7 @@
 
   <PropertyGroup>
     <TargetFrameworks>netstandard2.0;MonoAndroid80;Xamarin.iOS10;Xamarin.TVOS10;Xamarin.WatchOS10;Xamarin.Mac20;</TargetFrameworks>
+    <!--<TargetFrameworks>netstandard2.0;MonoAndroid80;Xamarin.iOS10;</TargetFrameworks>-->
     <AssemblyName>Plugin.InputKit</AssemblyName>
     <RootNamespace>Plugin.InputKit</RootNamespace>
     <PackageId>Xamarin.Forms.InputKit</PackageId>
@@ -49,7 +50,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="MSBuild.Sdk.Extras" Version="1.5.4" PrivateAssets="All" />
+    <PackageReference Include="MSBuild.Sdk.Extras" Version="1.6.46" PrivateAssets="All" />
     <PackageReference Include="Xamarin.Forms" Version="3.1.0.637273" PrivateAssets="All" />
     <Compile Include="Shared\**\*.cs" />
   </ItemGroup>

diff --git a/InputKit/Shared/Controls/CheckBox.cs b/InputKit/Shared/Controls/CheckBox.cs
@@ -23,9 +23,9 @@ public class CheckBox : StackLayout, IValidatable
         };
 
 
-        Frame boxBackground = new Frame { Padding = 0,CornerRadius = GlobalSetting.CornerRadius, InputTransparent = true, HeightRequest = GlobalSetting.Size, WidthRequest = GlobalSetting.Size, BackgroundColor = GlobalSetting.BackgroundColor, MinimumWidthRequest = 35, BorderColor = GlobalSetting.BorderColor, VerticalOptions = LayoutOptions.CenterAndExpand };
-        BoxView boxSelected = new BoxView { IsVisible = false, HeightRequest = GlobalSetting.Size * .60, WidthRequest = GlobalSetting.Size *.60, Color = GlobalSetting.Color, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.Center };
-        Label lblSelected = new Label { Text = "✓",Margin=new Thickness(0,-1,0,0), FontSize = GlobalSetting.Size * .72, FontAttributes = FontAttributes.Bold, IsVisible = false, TextColor = GlobalSetting.Color, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand };
+        Frame boxBackground = new Frame { Padding = 0, CornerRadius = GlobalSetting.CornerRadius, InputTransparent = true, HeightRequest = GlobalSetting.Size, WidthRequest = GlobalSetting.Size, BackgroundColor = GlobalSetting.BackgroundColor, MinimumWidthRequest = 35, BorderColor = GlobalSetting.BorderColor, VerticalOptions = LayoutOptions.CenterAndExpand };
+        BoxView boxSelected = new BoxView { IsVisible = false, HeightRequest = GlobalSetting.Size * .60, WidthRequest = GlobalSetting.Size * .60, Color = GlobalSetting.Color, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.Center };
+        Label lblSelected = new Label { Text = "✓", Margin = new Thickness(0, -1, 0, 0), FontSize = GlobalSetting.Size * .72, FontAttributes = FontAttributes.Bold, IsVisible = false, TextColor = GlobalSetting.Color, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand };
         Label lblOption = new Label { VerticalOptions = LayoutOptions.CenterAndExpand, FontSize = GlobalSetting.FontSize, TextColor = GlobalSetting.TextColor, FontFamily = GlobalSetting.FontFamily };
         private CheckType _type = CheckType.Box;
         private bool _isEnabled;
@@ -35,7 +35,7 @@ public class CheckBox : StackLayout, IValidatable
         public CheckBox()
         {
             this.Orientation = StackOrientation.Horizontal;
-            this.Padding = new Thickness(0,10);
+            this.Padding = new Thickness(0, 10);
             this.Spacing = 10;
             boxBackground.Content = boxSelected;
             this.Children.Add(boxBackground);
@@ -46,6 +46,20 @@ public CheckBox()
                 Command = new Command(() => { if (IsDisabled) return; IsChecked = !IsChecked; CheckChanged?.Invoke(this, new EventArgs()); CheckChangedCommand?.Execute(CommandParameter ?? this); ValidationChanged?.Invoke(this, new EventArgs()); }),
             });
         }
+        async void Animate()
+        {
+            try
+            {
+                if (Type != CheckType.Material) return;
+
+                await boxBackground.ScaleTo(0.9, 100, Easing.BounceIn);
+                boxBackground.BackgroundColor = IsChecked ? this.Color : Color.Transparent;
+                await boxBackground.ScaleTo(1, 100, Easing.BounceIn);
+            }
+            catch (Exception)
+            {
+            }
+        }
         /// <summary>
         /// Invoked when check changed
         /// </summary>
@@ -58,7 +72,7 @@ public CheckBox()
         /// <summary>
         /// Command Parameter for Commands. If this is null, CommandParameter will be sent as itself of CheckBox
         /// </summary>
-        public object CommandParameter { get => GetValue(CommandParameterProperty); set => SetValue(CommandParameterProperty,value); }
+        public object CommandParameter { get => GetValue(CommandParameterProperty); set => SetValue(CommandParameterProperty, value); }
         /// <summary>
         /// Quick generator constructor
         /// </summary>
@@ -87,20 +101,38 @@ public bool IsChecked
             {
                 boxBackground.Content.IsVisible = value;
                 SetValue(IsCheckedProperty, value);
+                Animate();
             }
         }
         /// <summary>
         /// Checkbox box background color. Default is LightGray
         /// </summary>
-        public Color BoxBackgroundColor { get => boxBackground.BackgroundColor; set => boxBackground.BackgroundColor = value; }
+        public Color BoxBackgroundColor { get => boxBackground.BackgroundColor; set { if (this.Type == CheckType.Material) return; boxBackground.BackgroundColor = value; } }
         /// <summary>
         /// Gets or sets the checkbutton enabled or not. If checkbox is disabled, checkbox can not be interacted.
         /// </summary>
         public bool IsDisabled { get => _isEnabled; set { _isEnabled = value; this.Opacity = value ? 0.6 : 1; } }
         /// <summary>
         /// Color of Checkbox checked
         /// </summary>
-        public Color Color { get => boxSelected.Color; set { boxSelected.Color = value; lblSelected.TextColor = value; } }
+        public Color Color
+        {
+            get => boxSelected.Color;
+            set
+            {
+                boxSelected.Color = value;
+                if (Type == CheckType.Material)
+                {
+                    boxBackground.BorderColor = value;
+                    boxBackground.BackgroundColor = IsChecked ? value : Color.Transparent;
+                    lblSelected.TextColor = Color.White;
+                }
+                else
+                {
+                    lblSelected.TextColor = value;
+                }
+            }
+        }
         /// <summary>
         /// Color of text
         /// </summary>
@@ -179,12 +211,19 @@ void UpdateType(CheckType _Type)
                 case CheckType.Cross:
                     lblSelected.Text = "✕";
                     boxBackground.Content = lblSelected;
-
                     break;
                 case CheckType.Star:
                     lblSelected.Text = "★";
                     boxBackground.Content = lblSelected;
                     break;
+                case CheckType.Material:
+                    lblSelected.Text = "✓";
+                    lblSelected.TextColor = Color.White;
+                    BoxBackgroundColor = Color.Transparent;
+                    boxBackground.CornerRadius = 5;
+                    BorderColor = Color;
+                    boxBackground.Content = lblSelected;
+                    return;
             }
         }
         /// <summary>
@@ -200,7 +239,8 @@ public enum CheckType
             Box,
             Check,
             Cross,
-            Star
+            Star,
+            Material
         }
     }
 }
diff --git a/Sample.InputKit/Sample.InputKit/App.xaml.cs b/Sample.InputKit/Sample.InputKit/App.xaml.cs
@@ -1,4 +1,5 @@
-using System;
+using Plugin.InputKit.Shared.Controls;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -13,15 +14,7 @@ public App()
         {
             InitializeComponent();
 
-            //Plugin.InputKit.Shared.Controls.CheckBox.GlobalSetting.BorderColor = Color.Accent;
-            //Plugin.InputKit.Shared.Controls.CheckBox.GlobalSetting.TextColor = Color.Red;
-            Plugin.InputKit.Shared.Controls.CheckBox.GlobalSetting.BackgroundColor = Color.LightGray;
-            Plugin.InputKit.Shared.Controls.CheckBox.GlobalSetting.BorderColor = Color.Transparent;
-            Plugin.InputKit.Shared.Controls.CheckBox.GlobalSetting.CornerRadius = 0;
-
-
-            MainPage = new NavigationPage(new Sample.InputKit.MainPage());
-
+            MainPage = new NavigationPage(new Sample.InputKit.MainPage());   
         }
 
         protected override void OnStart()

diff --git a/Sample.InputKit/Sample.InputKit/MainPage.xaml b/Sample.InputKit/Sample.InputKit/MainPage.xaml
@@ -9,8 +9,8 @@
         <local:MainViewModel/>
     </ContentPage.BindingContext>
     <ScrollView>
-        <StackLayout Spacing="12" Padding="20">            
-            <input:CheckBox Text="Option 0" Type="Box"/>
+        <StackLayout Spacing="12" Padding="20">
+            <input:CheckBox Text="Option 0" Type="Material" />
             <input:CheckBox Text="Option 1" Type="Box"/>
             <input:CheckBox Text="Option 2" Type="Check"/>
             <input:CheckBox Text="Option 3" Type="Cross"/>