comment utiliser les boutons radio dans xamarin forms

Je pense qu'il y a une solution plus simple qui est assez facile et ne nécessite pas de bibliothèques. Vraiment un groupe de boutons radio est juste une fantaisie de ListView. Vous devez simplement créer un viewModel pour chaque bouton radio qui a un IsSelected drapeau et de basculer entre les 2 images. J'ai eu un besoin pour permettre à un utilisateur de sélectionner la durée d'un jeton persisté:

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éer une listview dans notre page de contenu et d'écouter de la ItemSelected événement. Chaque élément de la liste est une horizontale de la pile du panneau où nous basculer entre les 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 de derrière instancie un modèle de vue et appelle une UpdateSelected méthode avec le nouvel élément sélectionné sur la page du modèle de vue*

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 bouton radio afficher le modèle tient sélection de l'info et de la légende. Nous nous assurons de feu OnPropertyChanged chaque fois que l'état sélectionné changements

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 l'affichage de la page modèle, nous avons créer une liste de bouton radio afficher les modèles qui le XAML se lie à l'. Lorsque nous UpdateSelected() toutes les IsSelected les états sont mis à jour qui déclenchent la liaison des mises à jour qui bascule l'image.

Vous aurez toujours besoin de faire quelque chose pour les mettre en évidence lors de la sélection d'un élément, mais c'est assez facile à trouver sur internet 🙂

OriginalL'auteur Mr Wood

Si vous voulez des radiobuttons vous pouvez xlabs leur forfait (https://github.com/XLabs/Xamarin-Forms-Labs/tree/master/src/Forms/XLabs.Forms/Controls/RadioButton)

Personnellement je venais d'utiliser un sélecteur de Xlabs paquet n'a pas été mis à jour en temps, donc il pourrait y avoir quelques bugs dans le radiobutton

OriginalL'auteur Jordy Dieltjens

Vous pouvez obtenir le radio bouton d'effet sans un paquet. Utiliser des Étiquettes avec texte unicode cercle \u26AA ou \u25CB. Joindre un onglet geste de reconnaissance pour chaque étiquette.

Gemmage, changer le texte du bouton sélectionné pour unicode cercle de balle \u29BF et de modifier le texte de l'autre bouton(s) à unicode cercle \u26AA.

Test sur vos plateformes préférées comme chaque plate-forme peut afficher un peu différemment. Vous devrez peut-être ajuster la taille de police que vous modifiez le texte.

OriginalL'auteur Leftware

Vous pouvez utiliser le interrupteur volet. Vous pouvez également voir la mise en œuvre d'un composant checkbox de la XLabs projet qui est maintenant discontinué, obtenir le code et le modifier comme vous avez besoin.

Astuce: Vous allez besoin de la coutume moteurs de rendu par la plate-forme pour que cela fonctionne .

OriginalL'auteur Ice Jovanoski

XLabs RadioButton et BindableRadioGroup fonctionnent bien: XLabs RadioButton pour Xamarin Forms

Voici un simple Oui/Non radio à l'aide de la BindableRadioGroup:

var answers = new List<string>();
answers.Add("Yes");
answers.Add("No");

var RadioGroup = new XLabs.Forms.Controls.BindableRadioGroup()
{
  ItemsSource = answers, 
  Orientation = StackOrientation.Horizontal
};

OriginalL'auteur noelicus