Comment ajouter une Case à cocher dans les Xamarin.Les formulaires dans le fichier Xaml?

J'ai trouvé une meilleure façon de le faire qui est de créer votre propre. C'était vraiment très simple. Créer une cs de fichiers dans un projet de Ressources (ou où vous voulez) appelé Case et collez ce 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);
}
}
}

Il est probable que la meilleure façon de le faire mais j'ai juste ajouté les deux images à l'emplacement approprié dans chaque projet (base de UWP, les Ressources/Drawable pour Android).

Puis de l'utiliser dans votre Xaml juste faire quelque chose comme ceci (j'ai utilisé un convertisseur de bc j'ai été liaison à une chaîne de valeur):

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

Remarque: Vous devez définir le BindingContext dans vos pages cs de fichier pour le contrôle du travail. Si votre Pages de code derrière le fichier devrait ressembler à ceci:

namespace MyNameSpace
{
public partial class CheckBoxExamplePage
{
public CheckBoxExamplePage(object MyBindingObject)
{
InitializeComponent();
this.BindingContext = MyBindingObject;
}
}
}

Et voilà le résultat!

Espère que cela aide quelqu'un!!

Mise à JOUR:

Voici le nouveau code qui supprime le fond gris sur désactivé et permet également le texte de retour si elle ne tient pas sur l'écran. Il utilise un ContentView qui contient une grille qui peut s'étendre en fonction du contenu.

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

OriginalL'auteur Kasper

Basé sur Kasper Réponses, mais à l'aide de l'image au lieu d'un bouton de sorte qu'il ne sera pas montrer l'ombre.

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

OriginalL'auteur Sawan Kumar Bundelkhandi