Question

我是Xamarin表格和渲染器的新手，你能帮帮我吗，提前谢谢。

我已创建了一个复选框，但我想更改其背景颜色，如图片所示。

现在你可以看到图片默认复选框，我想改变它的背景和样式我该怎么办？

<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;
    }
}

使用

和平台智能渲染器。添加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;

        }
    }

Answer 1

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

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

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

1 个答案: