c# - 如何在 Xaml 文件的 Xamarin.Forms 中添加复选框？

Question

我是 xamarin.forms 的新手，我需要添加一个复选框、单选按钮和下拉列表。我尝试了一些来自网络的样本，但我无法获得复选框。谁能帮助我在 xamarin.forms 中实现这一目标？

Xaml 文件

<toolkit:CheckBox Text ="Employee"
                  FontSize="20"
                  CheckedChanged ="OnClicked"/>

或

<controls:CheckBox DefaultText="Default text"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Green"
                               FontSize="25"
                               FontName="AmericanTypewriter"/>

一些链接或示例代码将使它更容易理解。

Answer 1

我找到了一个更好的方法来做到这一点，那就是创建你自己的。这真的很简单。在名为 CheckBox 的 Resources 项目(或任何你想要的地方)中创建一个 cs 文件并粘贴此代码:

namespace Resources.Controls
{

public class Checkbox : Button 
{
    public Checkbox()
    {
        base.Image = "Image_Unchecked.png";
        base.Clicked += new EventHandler(OnClicked);
        base.SizeChanged += new EventHandler(OnSizeChanged);
        base.BackgroundColor = Color.Transparent;
        base.BorderWidth = 0;
    }

    private void OnSizeChanged(object sender, EventArgs e)
    {
        //if (base.Height > 0)
        //{
        //    base.WidthRequest = base.Height;
        //}
    }

    public static BindableProperty CheckedProperty = BindableProperty.Create(
        propertyName: "Checked",
        returnType: typeof(Boolean?),
        declaringType: typeof(Checkbox),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: CheckedValueChanged);

    public Boolean? Checked
    {
        get
        {
            if (GetValue(CheckedProperty) == null)
            {
                return null;
            }
            return (Boolean)GetValue(CheckedProperty);
        }
        set
        {
            SetValue(CheckedProperty, value);
            OnPropertyChanged();
            RaiseCheckedChanged();
        }
    }

    private static void CheckedValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (newValue != null && (Boolean)newValue == true)
        {
            ((Checkbox)bindable).Image = "Image_Checked.png";
        }
        else
        {
            ((Checkbox)bindable).Image = "Image_Unchecked.png";
        }
    }

    public event EventHandler CheckedChanged;
    private void RaiseCheckedChanged()
    {
        if (CheckedChanged != null)
            CheckedChanged(this, EventArgs.Empty);
    }

    private Boolean _IsEnabled = true;
    public Boolean IsEnabled
    {
        get
        {
            return _IsEnabled;
        }
        set
        {
            _IsEnabled = value;
            OnPropertyChanged();
            if (value == true)
            {
                this.Opacity = 1;
            }
            else
            {
                this.Opacity = .5;
            }
            base.IsEnabled = value;
        }
    }

    public void OnEnabled_Changed()
    {

    }

    public void OnClicked(object sender, EventArgs e)
    {
        Checked = !Checked;

        // Call the base class event invocation method.
        //base.Clicked(sender, e);
    }

}
}

可能有更好的方法来做到这一点，但我只是将这两个图像添加到每个项目中的适当位置(UWP 的基础，Android 的 Resources/Drawable)。

然后要在您的 Xaml 中使用它，只需执行如下操作(我使用了一个转换器 bc 我绑定(bind)到一个字符串值):

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Resources.Controls;assembly=Resources"
             x:Class="MyNameSpace.CheckBoxExamplePage"
             Title=" Hygiene">
  <Grid Padding="1">
    <ScrollView Padding="4">
      <StackLayout>
        <StackLayout Orientation="Horizontal">
          <controls:Checkbox x:Name="cbHello" Text="Hello CheckBox" Checked="{Binding Path=My.Binding.Path, Converter={StaticResource StringToBoolean}, Mode=TwoWay}" />
        </StackLayout>
        <StackLayout Orientation="Horizontal" Padding="16,0,0,0">
          <controls:Checkbox x:Name="cbDisabled" Text="Disabled Example" IsEnabled="False" Checked="{Binding Path=My.Binding.PathTwo, Converter={StaticResource StringToBoolean}, Mode=TwoWay}" />
        </StackLayout>
      </StackLayout>
    </ScrollView>
  </Grid>
</ContentPage>

注意:您必须在页面 cs 文件中设置 BindingContext 才能使检查生效。因此，您的 Pages 代码隐藏文件应如下所示:

namespace MyNameSpace
{
    public partial class CheckBoxExamplePage
    {
        public CheckBoxExamplePage(object MyBindingObject)
        {
            InitializeComponent();

            this.BindingContext = MyBindingObject;
        }
    }
}

这就是结果!

希望这对某人有帮助!

更新:

以下是新代码，可在禁用时删除灰色背景，并允许文本在屏幕不适合时自动换行。这使用了一个包含可根据内容展开的网格的 ContentView。

    public class Checkbox : ContentView
{
    protected Grid ContentGrid;
    protected ContentView ContentContainer;
    public Label TextContainer;
    protected Image ImageContainer;

    public Checkbox()
    {
        var TapGesture = new TapGestureRecognizer();
        TapGesture.Tapped += TapGestureOnTapped;
        GestureRecognizers.Add(TapGesture);

        ContentGrid = new Grid
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand
        };

        ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(42) });
        ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
        ContentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

        ImageContainer = new Image
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        ImageContainer.HeightRequest = 42;
        ImageContainer.WidthRequest = 42;

        ContentGrid.Children.Add(ImageContainer);

        ContentContainer = new ContentView
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };
        Grid.SetColumn(ContentContainer, 1);

        TextContainer = new Label
        {
            TextColor = Color.White,
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };
        ContentContainer.Content = TextContainer;

        ContentGrid.Children.Add(ContentContainer);

        base.Content = ContentGrid;

        this.Image.Source = "Image_Unchecked.png";
        this.BackgroundColor = Color.Transparent;
    }

    public static BindableProperty CheckedProperty = BindableProperty.Create(
        propertyName: "Checked",
        returnType: typeof(Boolean?),
        declaringType: typeof(Checkbox),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: CheckedValueChanged);

    public static BindableProperty TextProperty = BindableProperty.Create(
        propertyName: "Text",
        returnType: typeof(String),
        declaringType: typeof(Checkbox),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: TextValueChanged);

    public Boolean? Checked
    {
        get
        {
            if (GetValue(CheckedProperty) == null)
                return null;
            return (Boolean)GetValue(CheckedProperty);
        }
        set
        {
            SetValue(CheckedProperty, value);
            OnPropertyChanged();
            RaiseCheckedChanged();
        }
    }

    private static void CheckedValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (newValue != null && (Boolean)newValue == true)
            ((Checkbox)bindable).Image.Source = "Image_Checked.png";
        else
            ((Checkbox)bindable).Image.Source = "Image_Unchecked.png";
    }

    public event EventHandler CheckedChanged;
    private void RaiseCheckedChanged()
    {
        if (CheckedChanged != null)
            CheckedChanged(this, EventArgs.Empty);
    }

    private Boolean _IsEnabled = true;
    public Boolean IsEnabled
    {
        get { return _IsEnabled; }
        set
        {
            _IsEnabled = value;
            OnPropertyChanged();
            this.Opacity = value ? 1 : .5;
            base.IsEnabled = value;
        }
    }

    public event EventHandler Clicked;
    private void TapGestureOnTapped(object sender, EventArgs eventArgs)
    {
        if (IsEnabled)
        {
            Checked = !Checked;
            if (Clicked != null)
                Clicked(this, new EventArgs());
        }
    }

    private static void TextValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((Checkbox)bindable).TextContainer.Text = (String)newValue;
    }

    public event EventHandler TextChanged;
    private void RaiseTextChanged()
    {
        if (TextChanged != null)
            TextChanged(this, EventArgs.Empty);
    }

    public Image Image
    {
        get { return ImageContainer; }
        set { ImageContainer = value; }
    }

    public String Text
    {
        get { return (String)GetValue(TextProperty); }
        set
        {
            SetValue(TextProperty, value);
            OnPropertyChanged();
            RaiseTextChanged();
        }
    }

}