mardi 12 décembre 2017

How to change Checkbox style in Xamarin Forms

I am new at Xamarin forms and renderers, Can you please help me out in this, Thank you in advance.

I have created a checkbox but I want to change its background color like in picture. Expected UI for Checkbox

Now you can see in image default checkbox is there I want to change its background and style how can I do that?

<local:Checkbox x:Name="chkBrand" AutomationId="AutoIdCheckBox"
                Content="{Binding LblBrand}"
                Checked="{Binding Chk,Mode=TwoWay}">
</local:Checkbox>

Checkbox.cs

public class Checkbox : Xamarin.Forms.View
{

    public static readonly BindableProperty CheckedProperty =
        BindableProperty.Create("Checked",
            typeof(bool),
            typeof(Checkbox),
            false, BindingMode.TwoWay, propertyChanged: OnCheckedPropertyChanged);

    public static readonly BindableProperty ContentProperty =
        BindableProperty.Create("Content",
            typeof(string),
            typeof(Checkbox),
            "Content", BindingMode.OneWay);

    public static readonly BindableProperty FontSizeProperty =
      BindableProperty.Create("FontSize",
          typeof(double),
          typeof(Checkbox),
          default(double), BindingMode.OneWay);


    public bool Checked
    {
        get
        {
            return (bool)GetValue(CheckedProperty);
        }

        set
        {
            if (this.Checked != value)
            {
                SetValue(CheckedProperty, value);
                if (CheckedChanged != null)
                    CheckedChanged.Invoke(this, new CheckedChangedEventArgs(value));
            }
        }
    }

    public string Content
    {
        get
        {
            return (string)GetValue(ContentProperty);
        }

        set
        {
            SetValue(ContentProperty, value);
        }
    }

    public double FontSize
    {
        get
        {
            return (double)GetValue(FontSizeProperty);
        }

        set
        {
            SetValue(FontSizeProperty, value);
        }
    }


    public event EventHandler<CheckedChangedEventArgs> CheckedChanged;


    private static void OnCheckedPropertyChanged(BindableObject bindable, object oldvalue, object newvalue)
    {
        var checkBox = (Checkbox)bindable;
        checkBox.Checked = newvalue != null ? (bool)newvalue : false;
    }
}

and platform wise renderer are used. Adding UWP renderer for reference

public class CheckboxRenderer : ViewRenderer<Checkbox, CheckBox>
{
    public new static void Init()
    {
        var temp = DateTime.Now;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Checkbox> e)
    {
        base.OnElementChanged(e);

        if (Element == null)
            return;

        if (Control == null)
        {
            var checkBox = new CheckBox();
            checkBox.Checked += CheckBox_Checked;
            checkBox.Unchecked += CheckBox_Unchecked;

            SetNativeControl(checkBox);
        }

        if (e.NewElement != null)
        {
            Control.Content = e.NewElement.Content;
            Control.IsChecked = e.NewElement.Checked;
            Control.IsEnabled = e.NewElement.IsEnabled;
            if (default(double) != e.NewElement.FontSize)
                Control.FontSize = e.NewElement.FontSize;
        }

    }

    private void CheckBox_Unchecked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        Element.Checked = Control.IsChecked.GetValueOrDefault();
    }

    private void CheckBox_Checked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        Element.Checked = Control.IsChecked.GetValueOrDefault();

    }

    private void CheckBox_Content(object sender)
    {
        Element.Checked = Control.IsChecked.GetValueOrDefault();
    }


    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        switch (e.PropertyName)
        {
            //case "IsVisible":
            //    Control.Hidden = Element.IsVisible;
            //    break;
            case "IsEnabled":
                Control.IsEnabled = Element.IsEnabled;
                break;
            case "Checked":
                Control.IsChecked = Element.Checked;
                break;
            case "Content":
                Control.Content = Element.Content;
                break;

        }
    }




Aucun commentaire:

Enregistrer un commentaire