comment utiliser les boutons radio sous forme de xamarin
Création d’une page d’enregistrement, il me faut obtenir les données suivantes de l’utilisateur .- Prénom - Nom - Nom d'utilisateur - Adresse électronique - Mot de passe - Date de naissance. - Genre - Rôle d'utilisateur
Pour Last to parameters, je ne trouve pas comment utiliser les boutons radio dans les formulaires xamarin. Voici mon code pour la page d'inscription.
<StackLayout BackgroundColor="#30af91" Padding="60">
<Entry Text="{Binding FirstName}" Placeholder="First Name"/>
<Entry Text="{Binding LastName}" Placeholder="Last Name"/>
<Entry Text="{Binding UserName}" Placeholder="Last Name"/>
<Entry Text="{Binding Email}" Placeholder="Email" />
<Entry Text="{Binding Password}" Placeholder="Password" IsPassword="True"/>
<Entry Text="{Binding ConfirmPassword}" Placeholder="Confirm Password" IsPassword="True"/>
<DatePicker MinimumDate="1/1/1948" MaximumDate="12/31/2007"/>
<!--Radio buttons for Gender
1. Male 2.Female-->
<!--Radio Buttons for UserRole
1. Admin 2.Participant-->
<Button Command="{Binding RegisterCommand}" Text="Register"/>
<Label Text="{Binding Message}" />
</StackLayout>
Vous pouvez utiliser le plugin XLabs à partir de la gestion du package NuGets. Après l'installation, vous pouvez utiliser comme ceci:
En Xaml:
controls:BindableRadioGroup x:Name="Radiobtn"
En C #:
string[] gender = {"MAlE","FEMALE"}
Radiobtn.Add(gender)
Renvoyer le lien
https://github.com/XLabs/Xamarin-Forms-Labs/tree/master/samples/XLabs.Samples/XLabs.Samples/Pages/Controls
Vous pouvez utiliser l'image comme bouton radio. Lorsque vous cliquez dessus, cela peut changer. Ce n'est pas un bon moyen de le faire cependant . C'est du code xaml:
<Image Scale="0.7" HorizontalOptions="Start" x:Name="radioButton" Source="unRadioBtn.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="radioButton_Clicked"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
Et ceci est .cs:
private void radioButton_Clicked(object sender, EventArgs e)
{
radioButton.Source = "radioBtn.png";
}
Vous pouvez obtenir l'effet du bouton radio sans package. Utilisez des étiquettes avec du texte unicode cercle \u26AA ou \u25CB. Attachez un identificateur de geste de tabulation à chaque étiquette.
Lorsque vous appuyez dessus, changez le texte du bouton sélectionné en cercle unicode bullet \u29BF et modifiez le texte du ou des autres boutons en cercle unicode \u26AA.
Testez sur vos plates-formes préférées car chaque plate-forme peut afficher un peu différemment. Vous devrez peut-être ajuster la taille de la police lorsque vous modifiez le texte.
Si vous voulez de vrais boutons radio, vous pouvez xlabs leur paquet ( https://github.com/XLabs/Xamarin-Forms-Labs/tree/master/src/Forms/XLabs.Forms/Controls/RadioButton )
Personnellement, je n'utiliserais qu'un sélecteur, le paquet Xlabs n'ayant pas été mis à jour depuis un moment, il pourrait donc y avoir des bugs dans le radiobutton.
Les formulaires Xamarin ne fournissent pas de bouton radio.
Vous pouvez soit utiliser
1) Commutateur
2) Picker
ou tout autre composant pour répondre à vos besoins
Je pense qu'il existe une solution plus simple qui est assez facile et ne nécessite aucune bibliothèque. Vraiment un groupe de radio est juste une liste spéciale. Il vous suffira de créer un viewModel pour chaque bouton radio ayant un drapeau IsSelected et de basculer entre 2 images. J'avais besoin d'autoriser un utilisateur à sélectionner la durée de conservation d'un jeton:
XAML
<ListView
HasUnevenRows="True"
HorizontalOptions="FillAndExpand"
ItemsSource="{Binding Durations}"
ItemSelected="ListView_ItemSelected"
SelectedItem="{Binding SelectedDuration}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Orientation="Horizontal">
<Image
HeightRequest="18"
IsVisible="{Binding IsSelected}"
Source="radioButtonChecked.png"
WidthRequest="18"/>
<Image
HeightRequest="18"
IsVisible="{Binding IsUnselected}"
Source="radioButtonUnchecked.png"
WidthRequest="18"/>
<Label
Margin="8,0,0,0"
Text="{Binding Caption}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Nous créons une liste dans notre page de contenu et écoutons l'événement ItemSelected. Chaque élément de la liste est un panneau de pile horizontal dans lequel nous basculons entre deux images en fonction de l'état sélectionné
Code Derrière
public partial class LoginPage : ContentPage
{
LoginPageViewModel LoginPageViewModel { get; }
public LoginTwoFactorFrequencyPage ()
{
BindingContext = LoginPageViewModel = new LoginPageViewModel();
InitializeComponent ();
}
private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
LoginPageViewModel.UpdateSelected(e.SelectedItem as PersistenceDuration);
}
}
- Le code de la page derrière instancie un modèle de vue et appelle une méthode UpdateSelected avec le nouvel élément sélectionné dans le modèle de vue de la page *
RadioButton ViewModel
Le modèle de vue pour chaque bouton radio:
public class PersistenceDuration : ViewModelBase
{
bool isSelected;
public string Caption { get; set; }
public TwoFactorTokenPersistenceDuration Duration { get; set; }
public bool IsSelected
{
get => isSelected;
set
{
isSelected = value;
OnPropertyChanged();
OnPropertyChanged("IsUnselected");
}
}
public bool IsUnselected => !IsSelected;
public PersistenceDuration(string caption, TwoFactorTokenPersistenceDuration duration)
{
Caption = caption;
Duration = duration;
IsSelected = false;
}
}
Le modèle de vue du bouton radio contient les informations de sélection et la légende. Nous nous assurons de déclencher OnPropertyChanged à chaque changement d'état sélectionné
Page ViewModel
public class LoginPageViewModel : ViewModelBase
{
PersistenceDuration duration;
PersistenceDuration selectedDuration;
public ObservableCollection<PersistenceDuration> Durations { get; }
public PersistenceDuration SelectedDuration
{
get => selectedDuration;
set
{
if (value != null)
{
duration = value;
UpdateSelected(duration);
}
OnPropertyChanged();
}
}
public LoginTwoFactorFrequencyViewModel()
{
Durations = new ObservableCollection<PersistenceDuration>(
new List<PersistenceDuration>()
{
new PersistenceDuration(AppResources.Save_code__forever, TwoFactorTokenPersistenceDuration.Forever),
new PersistenceDuration(AppResources.ChatRequireEvery30Days, TwoFactorTokenPersistenceDuration.ThirtyDays),
new PersistenceDuration(AppResources.ChatRequireEveryLogin, TwoFactorTokenPersistenceDuration.None),
});
}
public void UpdateSelected(PersistenceDuration persistenceDuration)
{
foreach (var item in Durations)
item.IsSelected = persistenceDuration == item;
}
}
Dans le modèle de vue de page, nous créons une liste de modèles de vue de bouton radio auxquels le XAML se lie. Lors de la mise à jour UpdateSelected (), tous les états IsSelected sont mis à jour, ce qui déclenche des mises à jour de liaison qui retournent l'image.
Vous aurez toujours besoin de faire quelque chose à propos de la surbrillance quand quelqu'un choisit un article, mais c'est assez facile à trouver sur Internet :)
Vous devez utiliser Pickerhttps://developer.xamarin.com/api/type/Xamarin.Forms.Picker/ } _ C'est en fait la meilleure alternative à RadionButton On Xamarin. formes
XLabs RadioButton et BindableRadioGroup fonctionnent bien: XLabs RadioButton pour Xamarin Forms
Voici une radio simple Oui/Non utilisant le groupe BindableRadioGroup:
var answers = new List<string>();
answers.Add("Yes");
answers.Add("No");
var RadioGroup = new XLabs.Forms.Controls.BindableRadioGroup()
{
ItemsSource = answers,
Orientation = StackOrientation.Horizontal
};