web-dev-qa-db-ja.com

XamlファイルのXamarin.Formsにチェックボックスを追加する方法は？

私は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"/>

一部のリンクまたはサンプルコードを使用すると、理解しやすくなります。

c#xamlcheckboxxamarin.ios
10
Manoj

私はこれを行うより良い方法を見つけました。それはあなた自身のものを作ることです。本当に簡単でした。 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);
    }

}
}

これを行うにはおそらくもっと良い方法がありますが、2つの画像を各プロジェクトの適切な場所（UWPのベース、AndroidのResources/Drawable）に追加しました。

enter image description here

次に、Xamlで使用するには、次のようにします（文字列値にバインドしていたコンバーターbcを使用しました）。

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

これが結果です！

enter image description here

これが誰かを助けることを願っています!!

UPDATE：

以下は、無効になっている灰色の背景を削除し、画面に収まらない場合にテキストを折り返すことができる新しいコードです。これは、コンテンツに基づいて展開できるグリッドを含む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();
        }
    }

}
19
Kasper

Xamarinクロスプラットフォームの.csファイルにチェックボックスとドロップダウンを実装しました。UIの作成にはcsファイルを使用することをお勧めします。

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
1
Vikram B

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

    /// <summary>
    /// The checked changed event.
    /// </summary>
    public event EventHandler<bool> CheckedChanged;

    /// <summary>
    /// The checked state property.
    /// </summary>
    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;
        }
    }
}
1
Sawan Kumar Bundelkhandi

Xlabs.formというNugetパッケージを追加する必要があります。次のようにXaml.csファイルにインポートしてみてください：

using XLabs.Forms.Controls;

さらに、.csファイルに次の行も追加する必要があります。

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

Xamlでは異なります：

<CheckBox  x:Name="checked" isSelected="{Binding flag}"/>

または、<controls:checkbox>を使用できます。

注：XamlのContentpageに以下の行を追加することを忘れないでください：

 xmlns:controls="clr-namespace:XLabs.Forms.Controls;Assembly=XLabs.Forms"
1
Vikram B