如何在Xaml文件中的Xamarin.Forms中添加Checkbox？

我是xamarin.forms的新手，我需要添加一个复选框，单选按钮和下拉列表。 我从网上尝试了一些样本，但我无法获得复选框。 任何人都可以帮助我在xamarin.forms中实现这一目标吗？

Xaml文件

要么

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

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我绑定到字符串值）：

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

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

Answer 2

您需要添加名为Xlabs.form的Nuget包。 尝试导入您的Xaml cs文件，如：

 using Xlabs.Forms.Controls; 

如果您尝试添加cs文件，只需添加以下行：

 CheckBox chk=new CheckBox() { checked=false; }; 

在Axml中它是不同的：

或者您可以使用 。

注意：不要忘记在Xaml的Contentpage中添加以下行：

  xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms" 

Answer 3

我在xamarin跨平台的.cs文件中实现了复选框和下拉列表。我建议你使用cs文件来创建UI.Xamarin提供了使用cs文件或AXML文件中的任何一个function来创建UI的杠杆作用

 using System; using Xamarin.Forms; using XLabs.Forms.Controls; namespace Facedetection { public class firstPage : ContentPage { string statename; public firstPage () { CheckBox checkbox = new CheckBox () { TextColor=Color.Blue, CheckedText="I am checked" }; Picker statepick = new Picker (); statepick.WidthRequest = 300; statepick.Title = "Select a state"; statepick.Items.Add ("India"); statepick.Items.Add ("US"); statepick.Items.Add ("Arizona"); statepick.Items.Add ("China"); statepick.SelectedIndexChanged += (sender, e) => { if (statepick.SelectedIndex == -1) { DisplayAlert ("Title", "Item not selected", "ok"); } else { statename = statepick.Items [statepick.SelectedIndex]; Console.WriteLine ("Selected country is:" + statename); } }; Content = new StackLayout { Children = { checkbox,statepick } }; } } } worked for me 

Answer 4

基于Kasper Answers，但使用图像而不是按钮，以便它不会显示阴影。

 public class CustomCheckbox : Image { private const string CheckboxUnCheckedImage = "checkbox_unchecked"; private const string CheckboxCheckedImage = "checkbox_checked"; public CustomCheckbox() { Source = CheckboxUnCheckedImage; var imageTapGesture = new TapGestureRecognizer(); imageTapGesture.Tapped += ImageTapGestureOnTapped; GestureRecognizers.Add(imageTapGesture); PropertyChanged += OnPropertyChanged; } private void ImageTapGestureOnTapped(object sender, EventArgs eventArgs) { if (IsEnabled) { Checked = !Checked; } } /// 
 /// The checked changed event. /// 
 public event EventHandler CheckedChanged; /// 
 /// The checked state property. /// 
 public static readonly BindableProperty CheckedProperty = BindableProperty.Create("Checked", typeof(bool), typeof(CustomCheckbox), false, BindingMode.TwoWay, propertyChanged: OnCheckedPropertyChanged); public bool Checked { get { return (bool)GetValue(CheckedProperty); } set { if (Checked != value) { SetValue(CheckedProperty, value); CheckedChanged?.Invoke(this, value); } } } private void OnPropertyChanged(object sender, PropertyChangedEventArgs e) { if (e?.PropertyName == IsEnabledProperty.PropertyName) { Opacity = IsEnabled ? 1 : 0.5; } } private static void OnCheckedPropertyChanged(BindableObject bindable, object oldValue, object newValue) { var checkBox = bindable as CustomCheckbox; if (checkBox != null) { var value = newValue as bool?; checkBox.Checked = value.GetValueOrDefault(); checkBox.Source = value.GetValueOrDefault() ? CheckboxCheckedImage : CheckboxUnCheckedImage; } } }