如何更改 Xamarin 表单中的复选框样式和背景颜色答案

【问题标题】：How to change Checkbox style and Background Color in Xamarin Forms如何更改 Xamarin 表单中的复选框样式和背景颜色
【发布时间】：2018-05-25 22:42:49
【问题描述】：

我是 Xamarin 表单和渲染器的新手，你能帮我解决这个问题吗？提前谢谢你。

我创建了一个复选框，但我想改变它的背景颜色，如图所示。

现在您可以在图像默认复选框中看到我想更改其背景和样式我该怎么做？

<local:Checkbox x:Name="chkBrand" AutomationId="AutoIdCheckBox"
                Content="{Binding LblBrand}"
                Checked="{Binding Chk,Mode=TwoWay}">
</local: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;
    }
}

使用和平台明智的渲染器。添加UWP渲染器供参考

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;

        }
    }

【问题讨论】：

标签： c# checkbox xamarin.forms styles

【解决方案1】：

有两种方法可以做到这一点，

使用 nuget 包显示复选框或
更改样式的简单方法是使用复选框的图像控件。根据您的颜色拍摄两张图片，一张选中，另一张未选中，并在点击时隐藏和显示。

【讨论】：