Partager via

Xamarin.Forms Radiobutton

  • Article

Il Xamarin.FormsRadioButton s’agit d’un type de bouton qui permet aux utilisateurs de sélectionner une option dans un ensemble. Chaque option est représentée par une case d’option, et vous ne pouvez sélectionner qu’une case d’option dans un groupe. Par défaut, chaque RadioButton élément affiche le texte :

Capture d’écran des RadioButtons par défaut

Toutefois, sur certaines plateformes, un RadioButton peut afficher un View, et sur toutes les plateformes, l’apparence de chacun RadioButton peut être redéfinie avec un ControlTemplate:

Capture d’écran de RadioButtons redéfinis

Le RadioButton contrôle définit les propriétés suivantes :

  • Content, de type object, qui définit ou stringView à afficher par le RadioButton.
  • IsChecked, de type bool, qui définit si l’objet RadioButton est case activée ed. Cette propriété utilise une TwoWay liaison et a une valeur par défaut .false
  • GroupName, de type string, qui définit le nom qui spécifie quels RadioButton contrôles sont mutuellement exclusifs. Cette propriété a la valeur nullpar défaut .
  • Value, de type object, qui définit une valeur unique facultative associée au RadioButton.
  • BorderColor, de type Color, qui définit la couleur de trait de bordure.
  • BorderWidth, de type double, qui définit la largeur de la RadioButton bordure.
  • CharacterSpacing, de type double, qui définit l’espacement entre les caractères d’un texte affiché.
  • CornerRadius, de type int, qui définit le rayon d’angle du RadioButton.
  • FontAttributes, de type FontAttributes, qui détermine le style de texte.
  • FontFamily, de type string, qui définit la famille de polices.
  • FontSize, de type double, qui définit la taille de police.
  • TextColor, de type Color, qui définit la couleur d’un texte affiché.
  • TextTransform, de type TextTransform, qui définit la casse d’un texte affiché.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Le RadioButton contrôle définit également un événement déclenché lorsque la IsChecked propriété change, par le biais d’une CheckedChanged manipulation utilisateur ou programmatique. L’objet CheckedChangedEventArgs qui accompagne l’événement CheckedChanged a une propriété unique nommée Value, de type bool. Lorsque l’événement est déclenché, la valeur de la CheckedChangedEventArgs.Value propriété est définie sur la nouvelle valeur de la IsChecked propriété.

RadioButton Le regroupement peut être géré par la RadioButtonGroup classe, qui définit les propriétés jointes suivantes :

  • GroupName, de type string, qui définit le nom du groupe pour RadioButton les objets dans un Layout<View>.
  • SelectedValue, de type object, qui représente la valeur de l’objet case activée ed RadioButton dans un Layout<View> groupe. Cette propriété jointe utilise une TwoWay liaison par défaut.

Pour plus d’informations sur la GroupName propriété jointe, consultez Group RadioButtons. Pour plus d’informations sur la SelectedValue propriété jointe, consultez Répondre aux modifications d’état RadioButton.

Créer des RadioButtons

L’apparence d’un RadioButton est définie par le type de données affectée à la RadioButton.Content propriété :

  • Lorsque la RadioButton.Content propriété est affectée, stringelle s’affiche sur chaque plateforme, alignée horizontalement en regard du cercle de case d’option.
  • Lorsque l’objet RadioButton.Content est affecté View, il s’affiche sur les plateformes prises en charge (iOS, UWP), tandis que les plateformes non prises en charge revient à une représentation sous forme de chaîne de l’objet View (Android). Dans les deux cas, le contenu s’affiche horizontalement aligné en regard du cercle de case d’option.
  • Lorsqu’un ControlTemplate objet est appliqué à un RadioButton, il View peut être affecté à la RadioButton.Content propriété sur toutes les plateformes. Pour plus d’informations, consultez Redéfinir l’apparence de RadioButton.

Afficher le contenu basé sur des chaînes

Un RadioButton texte s’affiche lorsque la Content propriété est affectée à un string:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton Content="Cat" />
    <RadioButton Content="Dog" />
    <RadioButton Content="Elephant" />
    <RadioButton Content="Monkey"
                 IsChecked="true" />
</StackLayout>

Dans cet exemple, RadioButton les objets sont implicitement regroupés à l’intérieur du même conteneur parent. Ce code XAML entraîne l’apparence affichée dans les captures d’écran suivantes :

Capture d’écran de RadioButtons textuels

Afficher du contenu arbitraire

Sur iOS et UWP, un RadioButton contenu arbitraire peut s’afficher lorsque la Content propriété est affectée à un View:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton>
        <RadioButton.Content>
            <Image Source="cat.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="dog.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="elephant.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="monkey.png" />
        </RadioButton.Content>
    </RadioButton>
</StackLayout>

Dans cet exemple, RadioButton les objets sont implicitement regroupés à l’intérieur du même conteneur parent. Ce code XAML entraîne l’apparence affichée dans les captures d’écran suivantes :

Capture d’écran des RadioButtons basés sur la vue

Sur Android, RadioButton les objets affichent une représentation basée sur des chaînes de l’objet View qui a été défini comme contenu :

Capture d’écran de RadioButton en mode affichage sur Android

Remarque

Lorsqu’un ControlTemplate objet est appliqué à un RadioButton, il View peut être affecté à la RadioButton.Content propriété sur toutes les plateformes. Pour plus d’informations, consultez Redéfinir l’apparence de RadioButton.

Associer des valeurs à RadioButtons

Chaque RadioButton objet a une Value propriété de type object, qui définit une valeur unique facultative à associer à la case d’option. Cela permet de différencier la valeur d’un RadioButton contenu et est particulièrement utile lorsque RadioButton les objets affichent des View objets.

Le code XAML suivant montre la définition des propriétés et Value des Content propriétés sur chaque RadioButton objet :

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton Value="Cat">
        <RadioButton.Content>
            <Image Source="cat.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Dog">
        <RadioButton.Content>
            <Image Source="dog.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Elephant">
        <RadioButton.Content>
            <Image Source="elephant.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Monkey">
        <RadioButton.Content>
            <Image Source="monkey.png" />
        </RadioButton.Content>
    </RadioButton>
</StackLayout>

Dans cet exemple, chacun RadioButton a un Image contenu en tant que contenu, tout en définissant une valeur basée sur une chaîne. Cela permet d’identifier facilement la valeur de la case d’option case activée ed.

Grouper radioButtons

Les cases d’option fonctionnent en groupes et il existe trois approches pour regrouper les cases d’option :

  • Placez-les à l’intérieur du même conteneur parent. Il s’agit du regroupement implicite .
  • Définissez la GroupName propriété sur chaque case d’option du groupe sur la même valeur. Il s’agit du regroupement explicite .
  • Définissez la RadioButtonGroup.GroupName propriété jointe sur un conteneur parent, qui définit à son tour la GroupName propriété de tous RadioButton les objets du conteneur. Il s’agit également du regroupement explicite .

Important

RadioButton les objets n’ont pas besoin d’appartenir au même parent à regrouper. Elles s’excluent mutuellement, à condition qu’elles partagent un nom de groupe.

Regroupement explicite avec la propriété GroupName

L’exemple XAML suivant montre explicitement regrouper des RadioButton objets en définissant leurs GroupName propriétés :

<Label Text="What's your favorite color?" />
<RadioButton Content="Red"
             GroupName="colors" />
<RadioButton Content="Green"
             GroupName="colors" />
<RadioButton Content="Blue"
             GroupName="colors" />
<RadioButton Content="Other"
             GroupName="colors" />

Dans cet exemple, chacun RadioButton s’exclue mutuellement, car il partage la même GroupName valeur.

Regroupement explicite avec la propriété jointe RadioButtonGroup.GroupName

La RadioButtonGroup classe définit une GroupName propriété jointe, de type string, qui peut être définie sur un Layout<View> objet. Cela permet de transformer toute disposition en groupe de cases d’option :

<StackLayout RadioButtonGroup.GroupName="colors">
    <Label Text="What's your favorite color?" />
    <RadioButton Content="Red" />
    <RadioButton Content="Green" />
    <RadioButton Content="Blue" />
    <RadioButton Content="Other" />
</StackLayout>

Dans cet exemple, chaque RadioButton élément de l’élément StackLayout aura sa GroupName propriété définie colorssur , et sera mutuellement exclusif.

Remarque

Lorsqu’un Layout<View> objet qui définit la RadioButtonGroup.GroupName propriété jointe contient une RadioButton propriété qui définit sa GroupName propriété, la valeur de la RadioButton.GroupName propriété est prioritaire.

Répondre aux modifications d’état RadioButton

Les cases d’option peuvent avoir l’un des deux états suivants : activé ou désactivé. Lorsqu’une case d’option est case activée ed, sa IsChecked propriété est true. Lorsqu’une case d’option n’est pas case activée ed, sa IsChecked propriété est false. Une case d’option peut être désactivée en appuyant sur une autre case d’option dans le même groupe, mais elle ne peut pas être effacée en appuyant à nouveau dessus. Toutefois, vous pouvez désactiver une case d’option par programmation en affectant la valeur false à sa propriété IsChecked.

Répondre à un déclenchement d’événement

Lorsque la IsChecked propriété change, par le biais d’une manipulation utilisateur ou programmatique, l’événement CheckedChanged se déclenche. Un gestionnaire d’événements pour cet événement peut être inscrit pour répondre à la modification :

<RadioButton Content="Red"
             GroupName="colors"
             CheckedChanged="OnColorsRadioButtonCheckedChanged" />

Le code-behind contient le gestionnaire de l’événement CheckedChanged :

void OnColorsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    // Perform required operation
}

L’argument sender est le RadioButton responsable de cet événement. Vous pouvez l’utiliser pour accéder à l’objet ou pour faire la RadioButton distinction entre plusieurs RadioButton objets partageant le même CheckedChanged gestionnaire d’événements.

Répondre à une modification de propriété

La RadioButtonGroup classe définit une SelectedValue propriété jointe, de type object, qui peut être définie sur un Layout<View> objet. Cette propriété jointe représente la valeur de l’case activée dans RadioButton un groupe défini sur une disposition.

Lorsque la IsChecked propriété change, par le biais d’une manipulation utilisateur ou programmatique, la RadioButtonGroup.SelectedValue propriété jointe change également. Par conséquent, la RadioButtonGroup.SelectedValue propriété jointe peut être liée à une propriété qui stocke la sélection de l’utilisateur :

<StackLayout RadioButtonGroup.GroupName="{Binding GroupName}"
             RadioButtonGroup.SelectedValue="{Binding Selection}">
    <Label Text="What's your favorite animal?" />
    <RadioButton Content="Cat"
                 Value="Cat" />
    <RadioButton Content="Dog"
                 Value="Dog" />
    <RadioButton Content="Elephant"
                 Value="Elephant" />
    <RadioButton Content="Monkey"
                 Value="Monkey"/>
    <Label x:Name="animalLabel">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="You have chosen:" />
                <Span Text="{Binding Selection}" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
</StackLayout>

Dans cet exemple, la valeur de la RadioButtonGroup.GroupName propriété jointe est définie par la GroupName propriété sur le contexte de liaison. De même, la valeur de la RadioButtonGroup.SelectedValue propriété jointe est définie par la Selection propriété sur le contexte de liaison. En outre, la Selection propriété est mise à jour vers la Value propriété du case activée ed RadioButton.

États visuels de RadioButton

RadioButtonles objets ont Checked et Unchecked les états visuels qui peuvent être utilisés pour initier une modification visuelle lorsqu’un RadioButton objet est case activée ou non case activée ed.

L’exemple XAML suivant montre comment définir un état visuel pour les états et Unchecked les Checked états :

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CheckedStates">
                        <VisualState x:Name="Checked">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Green" />
                                <Setter Property="Opacity"
                                        Value="1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Red" />
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <Label Text="What's your favorite mode of transport?" />
        <RadioButton Content="Car" />
        <RadioButton Content="Bike" />
        <RadioButton Content="Train" />
        <RadioButton Content="Walking" />
    </StackLayout>
</ContentPage>

Dans cet exemple, le Style implicite cible des objets RadioButton. Spécifie CheckedVisualState que lorsqu’une RadioButton valeur est case activée ed, sa TextColor propriété est définie sur verte avec la Opacity valeur 1. Spécifie UncheckedVisualState qu’en RadioButton cas d’état non case activée ed, sa TextColor propriété est définie sur rouge avec la Opacity valeur 0,5. Par conséquent, l’effet global est que lorsqu’un RadioButton n’est pas case activée il est rouge et partiellement transparent, et est vert sans transparence lorsqu’il est case activée ed :

Capture d’écran des états visuels RadioButton

Pour plus d’informations sur les états visuels, consultez Xamarin.Forms Visual State Manager.

Redéfinir l’apparence de RadioButton

Par défaut, RadioButton les objets utilisent des renderers de plateforme pour utiliser des contrôles natifs sur des plateformes prises en charge. Toutefois, RadioButton la structure visuelle peut être redéfinie avec un ControlTemplate, afin que RadioButton les objets aient une apparence identique sur toutes les plateformes. Cela est possible, car la RadioButton classe hérite de la TemplatedView classe.

Le code XAML suivant montre un ControlTemplate élément qui peut être utilisé pour redéfinir la structure visuelle des RadioButton objets :

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="RadioButtonTemplate">
            <Frame BorderColor="#F3F2F1"
                   BackgroundColor="#F3F2F1"
                   HasShadow="False"
                   HeightRequest="100"
                   WidthRequest="100"
                   HorizontalOptions="Start"
                   VerticalOptions="Start"
                   Padding="0">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CheckedStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Property="BorderColor"
                                            Value="#FF3300" />
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                            Value="#F3F2F1" />
                                    <Setter Property="BorderColor"
                                            Value="#F3F2F1" />
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="0" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Grid Margin="4"
                      WidthRequest="100">
                    <Grid WidthRequest="18"
                          HeightRequest="18"
                          HorizontalOptions="End"
                          VerticalOptions="Start">
                        <Ellipse Stroke="Blue"
                                 Fill="White"
                                 WidthRequest="16"
                                 HeightRequest="16"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                        <Ellipse x:Name="check"
                                 Fill="Blue"
                                 WidthRequest="8"
                                 HeightRequest="8"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                    </Grid>
                    <ContentPresenter />
                </Grid>
            </Frame>
        </ControlTemplate>

        <Style TargetType="RadioButton">
            <Setter Property="ControlTemplate"
                    Value="{StaticResource RadioButtonTemplate}" />
        </Style>
    </ContentPage.Resources>
    <!-- Page content -->
</ContentPage>

Dans cet exemple, l’élément racine du fichier ControlTemplate est un Frame objet qui définit Checked et Unchecked des états visuels. L’objet Frame utilise une combinaison de Grid, Ellipseet ContentPresenter d’objets pour définir la structure visuelle d’un RadioButton. L’exemple inclut également un style implicite qui affectera la ControlTemplateRadioButtonTemplate propriété de tous RadioButton les objets de la page.

Remarque

L’objet ContentPresenter marque l’emplacement dans la structure visuelle où RadioButton le contenu s’affiche.

Le code XAML suivant montre RadioButton les objets qui consomment le ControlTemplate via le style implicite :

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <StackLayout RadioButtonGroup.GroupName="animals"
                 Orientation="Horizontal">
        <RadioButton Value="Cat">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="cat.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Cat"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Dog">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="dog.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Dog"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Elephant">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="elephant.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Elephant"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Monkey">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="monkey.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Monkey"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
    </StackLayout>
</StackLayout>

Dans cet exemple, la structure visuelle définie pour chacun d’eux RadioButton est remplacée par la structure visuelle définie dans le ControlTemplate, et ainsi, au moment de l’exécution, les objets de l’arborescence ControlTemplate visuelle deviennent partie de l’arborescence visuelle pour chaque RadioButton. En outre, le contenu de chaque RadioButton élément est remplacé par le ContentPresenter contenu défini dans le modèle de contrôle. Cela entraîne l’apparence suivante RadioButton :

Capture d’écran de RadioButtons templated

Pour plus d’informations sur les modèles de contrôle, consultez Xamarin.Forms les modèles de contrôle.

Désactiver un RadioButton

Parfois, une application entre dans un état où une RadioButton case activée n’est pas une opération valide. Dans ce cas, le RadioButton paramètre peut être désactivé en définissant sa IsEnabled propriété sur false.