如何在Xaml文件的Xamarin.Forms中添加Checkbox？ [英] How to add Checkbox in Xamarin.Forms in Xaml file?

问题描述

我对xamarin.forms完全陌生，我需要添加一个复选框，单选按钮和下拉列表。我尝试了一些来自net的示例，但无法获得该复选框。有人可以帮我在xamarin.forms中实现吗？

I'm completely new to xamarin.forms, I need to add a checkbox, radio buttons and drop down list. I tried some samples from net but I'm not able to get the checkbox. Can anyone help me to achieve this in xamarin.forms?

Xaml文件

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

或

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

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

Some links or sample code will make it easier to understand.

推荐答案

我找到了一种更好的方法来创建自己的方法。这真的很简单。在称为CheckBox的Resources项目（或任何您想要的地方）中创建一个cs文件，并粘贴以下代码：

I found a better way to do this which is to create your own. It was really quite simple. Create a cs file in a Resources project (or where ever you want) called CheckBox and paste this code:

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的基础）。

There is probably a better way to do this but I just added the two images to the appropriate locations in each project (base for UWP, Resources/Drawable for Android).

然后在Xaml中使用它就可以做到这一点（我使用了转换器bc，我将其绑定到字符串值） ：

Then to use it in your Xaml just do something like this (I used a converter bc I was binding to a string value):

<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代码应如下所示：

Note: You must set the BindingContext in your pages cs file for the check to work. So your Pages code behind file should look like this:

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

            this.BindingContext = MyBindingObject;
        }
    }
}

这就是结果！

希望这对某人有帮助！

更新：

以下是新代码，该代码删除了禁用的灰色背景，并且如果文本不适合屏幕显示，则允许换行。

The following is new code that removes the gray background on disabled and also allows text to wrap if it does not fit on the screen. This uses a ContentView that contains a grid that can expand based on the content.

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

}

这篇关于如何在Xaml文件的Xamarin.Forms中添加Checkbox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！