Xamarin.Forms Radiobutton

  • Article

Télécharger l’exemple Télécharger l’exemple

est Xamarin.FormsRadioButton 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, chacun RadioButton affiche le texte :

Capture d’écran des radiobuttons défaut

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

Capture d’écran des 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 .RadioButton
  • IsChecked, de type bool, qui définit si est RadioButton vérifié. Cette propriété utilise une TwoWay liaison et a une valeur par défaut de false.
  • GroupName, de type string, qui définit le nom qui spécifie les contrôles qui RadioButton s’excluent mutuellement. Cette propriété a la valeur par défaut .null
  • Value, de type object, qui définit une valeur unique facultative associée à .RadioButton
  • BorderColor, de type Color, qui définit la couleur du 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 de tout 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 de tout texte affiché.
  • TextTransform, de type TextTransform, qui définit la casse de tout texte affiché.

Ces propriétés sont soutenues par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et stylées.

Le RadioButton contrôle définit également un événement déclenché lorsque la propriété change, par le IsChecked biais d’une CheckedChanged manipulation par utilisateur ou par programme. 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 de groupe des RadioButton objets d’un Layout<View>.
  • SelectedValue, de type object, qui représente la valeur de l’objet vérifié RadioButton au sein d’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 de RadioButton.

Créer des RadioButtons

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

  • Lorsque la RadioButton.Content propriété se voit attribuer un string, elle s’affiche sur chaque plateforme, alignée horizontalement à côté du cercle de case d’option.
  • Lorsque le RadioButton.Content est affecté à , Viewil s’affiche sur les plateformes prises en charge (iOS, UWP), tandis que les plateformes non prises en charge sont de secours vers une représentation sous forme de chaîne de l’objet View (Android). Dans les deux cas, le contenu s’affiche horizontalement à côté du cercle de case d’option.
  • Lorsqu’un ControlTemplate est appliqué à un RadioButton, un 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 affiche le texte lorsque la Content propriété se voit attribuer 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 donne l’apparence illustrée dans les captures d’écran suivantes :

Capture d’écran des RadioButtons textuels

Afficher du contenu arbitraire

Sur iOS et UWP, un peut afficher du RadioButton contenu arbitraire lorsque la Content propriété est affectée à :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 donne l’apparence illustrée dans les captures d’écran suivantes :

Capture d’écran des radiobuttons basés sur les vues

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

Capture d’écran de RadioButton basé sur la vue sur Android

Notes

Lorsqu’un ControlTemplate est appliqué à un RadioButton, un 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 à la valeur d’un RadioButton d’être différente de son contenu et est particulièrement utile lorsque RadioButton des objets affichent des View objets.

Le code XAML suivant montre la définition des Content propriétés et Value 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 comme 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 cochée.

RadioButtons de groupe

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 d’un regroupement implicite .
  • Définissez la GroupName propriété sur chaque case d’option du groupe sur la même valeur. Il s’agit d’un regroupement explicite .
  • Définissez la RadioButtonGroup.GroupName propriété jointe sur un conteneur parent, qui à son tour définit 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 pour être regroupés. Ils s’excluent mutuellement, à condition qu’ils partagent un nom de groupe.

Regroupement explicite avec la propriété GroupName

L’exemple XAML suivant montre explicitement le regroupement d’objets en RadioButton 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, chacune RadioButton d’elles s’exclue mutuellement, car elle 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 n’importe quelle disposition en un 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 dans le StackLayout aura sa GroupName propriété définie sur colors, et sera mutuellement exclusive.

Notes

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

Répondre aux changements d’état de RadioButton

Les cases d’option peuvent avoir l’un des deux états suivants : activé ou désactivé. Lorsqu’une case d’option est activée, sa IsChecked propriété est true. Lorsqu’une case d’option est décochée, sa IsChecked propriété est false. Une case d’option peut être effacé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 par utilisateur ou par programme, 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 responsable RadioButton 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’élément coché RadioButton au sein d’un groupe défini sur une disposition.

Lorsque la IsChecked propriété change, par le biais d’une manipulation par utilisateur ou par programme, la RadioButtonGroup.SelectedValue propriété jointe change également. Par conséquent, la RadioButtonGroup.SelectedValue propriété jointe peut être liée à des données liées à 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 vérifié RadioButton.

États visuels RadioButton

RadioButton les objets ont Checked des états visuels et Unchecked qui peuvent être utilisés pour initier une modification visuelle lorsqu’un RadioButton est coché ou décoché.

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

<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, les objets cibles implicites StyleRadioButton . spécifie CheckedVisualState que lorsqu’un RadioButton est coché, sa TextColor propriété est définie sur vert avec la Opacity valeur 1. spécifie UncheckedVisualState que lorsqu’un RadioButton est dans un état non coché, sa TextColor propriété est définie sur rouge avec une Opacity valeur de 0,5. Par conséquent, l’effet global est que lorsqu’un RadioButton est décoché, il est rouge et partiellement transparent, et est vert sans transparence lorsqu’il est vérifié :

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, les RadioButton objets utilisent des convertisseurs de plateforme pour utiliser des contrôles natifs sur les plateformes prises en charge. Toutefois, RadioButton la structure visuelle peut être redéfinie avec un ControlTemplateobjet , 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 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 de ControlTemplate est un Frame objet qui définit Checked et Unchecked des états visuels. L’objet Frame utilise une combinaison d’objets Grid, Ellipseet ContentPresenter pour définir la structure visuelle d’un RadioButton. L’exemple inclut également un style implicite qui affectera à la RadioButtonTemplateControlTemplate propriété de tous RadioButton les objets de la page.

Notes

L’objet ContentPresenter marque l’emplacement dans la structure visuelle où RadioButton le contenu sera affiché.

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 RadioButton d’eux est remplacée par la structure visuelle définie dans , ControlTemplateet par conséquent, au moment de l’exécution, les objets dans le ControlTemplate deviennent partie de l’arborescence visuelle pour chaque RadioButton. En outre, le contenu de chacune d’elles RadioButton est remplacé par le ContentPresenter défini dans le modèle de contrôle. Cela se traduit par l’apparence suivante RadioButton :

Capture d’écran des radiobuttons

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

Désactiver un RadioButton

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