Adapt RadioButton to v4

Author: enisn

src/Xamarin.Forms.InputKit/Shared/Controls/RadioButton.cs

@@ -9,6 +9,10 @@
 using System.Windows.Input;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
+using Xamarin.Forms.Shapes;
+using Plugin.InputKit.Shared.Helpers;
+using TypeConverter = Xamarin.Forms.TypeConverter;
+using TypeConverterAttribute = Xamarin.Forms.TypeConverterAttribute;
 
 namespace Plugin.InputKit.Shared.Controls
 {
@@ -24,25 +28,46 @@ public class RadioButton : StatefulStackLayout
         public static GlobalSetting GlobalSetting { get; private set; } = new GlobalSetting
         {
             Color = InputKitOptions.GetAccentColor(),
-            BorderColor = Color.Black,
+            BorderColor = Application.Current.RequestedTheme == OSAppTheme.Dark ? Color.WhiteSmoke : Color.Black,
             TextColor = (Color)Label.TextColorProperty.DefaultValue,
-            Size = Device.GetNamedSize(Device.RuntimePlatform == Device.iOS ? NamedSize.Large : NamedSize.Medium, typeof(Label)) * 1.2,
+            Size = 25,
             CornerRadius = -1,
-            FontSize = Device.GetNamedSize(Device.RuntimePlatform == Device.iOS ? NamedSize.Medium : NamedSize.Small, typeof(Label)),
+            FontSize = 14,
             LabelPosition = LabelPosition.After
         };
         #endregion
 
-        #region Constants
-        public const string RESOURCE_CIRCLE = "Plugin.InputKit.Shared.Resources.circle.png";
-        public const string RESOURCE_DOT = "Plugin.InputKit.Shared.Resources.dot.png";
-        #endregion
-
         #region Fields
-        internal Grid IconLayout;
-        internal IconView iconCircle = new IconView { Source = ImageSource.FromResource(RESOURCE_CIRCLE), FillColor = GlobalSetting.BorderColor, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.Center, HeightRequest = GlobalSetting.Size, WidthRequest = GlobalSetting.Size };
-        internal IconView iconChecked = new IconView { Source = ImageSource.FromResource(RESOURCE_DOT), FillColor = GlobalSetting.Color, IsVisible = false, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.Center, HeightRequest = GlobalSetting.Size, WidthRequest = GlobalSetting.Size };
-        internal Label lblText = new Label { VerticalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.Fill, TextColor = GlobalSetting.TextColor, FontSize = GlobalSetting.FontSize, FontFamily = GlobalSetting.FontFamily, MaxLines = 3, LineBreakMode = LineBreakMode.WordWrap };
+        protected internal Grid IconLayout;
+        protected internal Ellipse iconCircle = new Ellipse
+        {
+            StrokeThickness = 2,
+            Stroke = GlobalSetting.BorderColor.ToBrush(),
+            VerticalOptions = LayoutOptions.Center,
+            HorizontalOptions = LayoutOptions.Center,
+            HeightRequest = GlobalSetting.Size,
+            WidthRequest = GlobalSetting.Size
+        };
+        protected internal Path iconChecked = new Path
+        {
+            Fill = GlobalSetting.Color.ToBrush(),
+            Scale = 0,
+            VerticalOptions = LayoutOptions.Center,
+            HorizontalOptions = LayoutOptions.Center,
+            HeightRequest = GlobalSetting.Size,
+            WidthRequest = GlobalSetting.Size
+        };
+        protected internal Label lblText = new Label
+        {
+            VerticalTextAlignment = TextAlignment.Center,
+            VerticalOptions = LayoutOptions.Center,
+            HorizontalOptions = LayoutOptions.Start,
+            TextColor = GlobalSetting.TextColor,
+            FontSize = GlobalSetting.FontSize,
+            FontFamily = GlobalSetting.FontFamily,
+            MaxLines = 3,
+            LineBreakMode = LineBreakMode.WordWrap
+        };
         private bool _isDisabled;
         #endregion
 
@@ -55,9 +80,6 @@ public RadioButton()
             InitVisualStates();
 
             Orientation = StackOrientation.Horizontal;
-            if (Device.RuntimePlatform != Device.iOS)
-                lblText.FontSize = lblText.FontSize *= 1.5;
-
 
             ApplyIsCheckedAction = ApplyIsChecked;
             ApplyIsPressedAction = ApplyIsPressed;
@@ -66,20 +88,20 @@ public RadioButton()
             {
                 VerticalOptions = LayoutOptions.Center,
                 Children =
-                {
-                    iconCircle,
-                    iconChecked
-                },
+            {
+                iconCircle,
+                iconChecked
+            },
                 MinimumWidthRequest = GlobalSetting.Size * 1.66,
             };
 
             ApplyLabelPosition(LabelPosition);
+            UpdateShape();
 
             GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(Tapped) });
         }
         #endregion
 
-
         /// <summary>
         /// Click event, triggered when clicked
         /// </summary>
@@ -145,9 +167,14 @@ public bool IsChecked
         /// <summary>
         /// Set your own background image instead of default circle.
         /// </summary>
-        public ImageSource CircleImage { get => (ImageSource)GetValue(CircleImageProperty); set => SetValue(CircleImageProperty, value); }
+        [Obsolete("This option is removed.")]
+        public ImageSource CircleImage { get => default; set { } }
+
+        [Obsolete("This option is removed.")]
+        public ImageSource CheckedImage { get => default; set { } }
 
-        public ImageSource CheckedImage { get => (ImageSource)GetValue(CheckedImageProperty); set => SetValue(CheckedImageProperty, value); }
+        [TypeConverter(typeof(PathGeometryConverter))]
+        public Geometry SelectedIconGeomerty { get => (Geometry)GetValue(SelectedIconGeomertyProperty); set => SetValue(SelectedIconGeomertyProperty, value); }
 
         /// <summary>
         /// To be added.
@@ -168,10 +195,11 @@ public bool IsChecked
         /// Color of description text of Radio Button
         /// </summary>
         public Color TextColor { get => (Color)GetValue(TextColorProperty); set => SetValue(TextColorProperty, value); }
-
         /// <summary>
         /// Internal use only. Applies effect when pressed.
         /// </summary>
+
+        [Browsable(false)]
         public bool IsPressed { get => (bool)GetValue(IsPressedProperty); set => SetValue(IsPressedProperty, value); }
         /// <summary>
         /// Gets or sets the label position.
@@ -190,14 +218,13 @@ public LabelPosition LabelPosition
         public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(RadioButton), "", propertyChanged: (bo, ov, nv) => (bo as RadioButton).Text = (string)nv);
         public static readonly BindableProperty TextFontSizeProperty = BindableProperty.Create(nameof(TextFontSize), typeof(double), typeof(RadioButton), 20.0, propertyChanged: (bo, ov, nv) => (bo as RadioButton).TextFontSize = (double)nv);
         public static readonly BindableProperty ColorProperty = BindableProperty.Create(nameof(Color), typeof(Color), typeof(RadioButton), GlobalSetting.Color, propertyChanged: (bo, ov, nv) => (bo as RadioButton).UpdateColors());
-        public static readonly BindableProperty CircleImageProperty = BindableProperty.Create(nameof(CircleImage), typeof(ImageSource), typeof(RadioButton), default(ImageSource), propertyChanged: (bo, ov, nv) => (bo as RadioButton).iconCircle.Source = nv as ImageSource ?? nv?.ToString());
-        public static readonly BindableProperty CheckedImageProperty = BindableProperty.Create(nameof(CheckedImage), typeof(ImageSource), typeof(RadioButton), default(ImageSource), propertyChanged: (bo, ov, nv) => (bo as RadioButton).iconChecked.Source = nv as ImageSource ?? nv?.ToString());
         public static readonly BindableProperty CircleColorProperty = BindableProperty.Create(nameof(CircleColor), typeof(Color), typeof(RadioButton), GlobalSetting.BorderColor, propertyChanged: (bo, ov, nv) => (bo as RadioButton).UpdateColors());
         public static readonly BindableProperty TextColorProperty = BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(RadioButton), GlobalSetting.TextColor, propertyChanged: (bo, ov, nv) => (bo as RadioButton).UpdateColors());
         public static readonly BindableProperty ClickCommandProperty = BindableProperty.Create(nameof(ClickCommand), typeof(ICommand), typeof(RadioButton), null, propertyChanged: (bo, ov, nv) => (bo as RadioButton).ClickCommand = (ICommand)nv);
         public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(RadioButton), propertyChanged: (bo, ov, nv) => (bo as RadioButton).CommandParameter = nv);
         public static readonly BindableProperty IsPressedProperty = BindableProperty.Create(nameof(IsPressed), typeof(bool), typeof(RadioButton), propertyChanged: (bo, ov, nv) => (bo as RadioButton).ApplyIsPressedAction((bool)nv));
         public static readonly BindableProperty FontFamilyProperty = BindableProperty.Create(nameof(FontFamily), typeof(string), typeof(RadioButton), propertyChanged: (bo, ov, nv) => (bo as RadioButton).FontFamily = (string)nv);
+        public static readonly BindableProperty SelectedIconGeomertyProperty = BindableProperty.Create(nameof(SelectedIconGeomerty), typeof(Geometry), typeof(RadioButton), PredefinedShapes.Dot, propertyChanged: (bo, ov, nv) => (bo as RadioButton).UpdateShape());
         public static readonly BindableProperty LabelPositionProperty = BindableProperty.Create(
             propertyName: nameof(LabelPosition), declaringType: typeof(RadioButton),
             returnType: typeof(LabelPosition), defaultBindingMode: BindingMode.TwoWay,
@@ -212,18 +239,23 @@ private void ApplyLabelPosition(LabelPosition position)
             Children.Clear();
             if (position == LabelPosition.After)
             {
-                IconLayout.HorizontalOptions = LayoutOptions.Center;
+                lblText.HorizontalOptions = LayoutOptions.Start;
                 Children.Add(IconLayout);
                 Children.Add(lblText);
             }
             else
             {
-                IconLayout.HorizontalOptions = LayoutOptions.Center;
+                lblText.HorizontalOptions = LayoutOptions.FillAndExpand;
                 Children.Add(lblText);
                 Children.Add(IconLayout);
             }
         }
 
+        private protected virtual void UpdateShape()
+        {
+            iconChecked.Data = SelectedIconGeomerty;
+        }
+
         /// <summary>
         /// That handles tapps and triggers event, commands etc.
         /// </summary>
@@ -241,18 +273,21 @@ void Tapped()
 
         void UpdateColors()
         {
-            iconChecked.FillColor = Color;
-            iconCircle.FillColor = IsChecked ? Color : CircleColor;
+            iconChecked.Fill = Color.ToBrush();
+            iconCircle.Stroke = IsChecked ? Color.ToBrush() : CircleColor.ToBrush();
             lblText.TextColor = TextColor;
         }
 
         public virtual void ApplyIsChecked(bool isChecked)
         {
-            var changed = iconChecked.IsVisible != isChecked;
-            iconChecked.IsVisible = isChecked;
-            UpdateColors();
+            var isCheckedInLastState = iconChecked.Scale == 1;
+
+            var changed = isCheckedInLastState != isChecked;
+
             if (changed)
             {
+                iconChecked.ScaleTo(Convert.ToDouble(isChecked), 180);
+                UpdateColors();
                 Checked?.Invoke(this, null);
             }
         }