Xamarin.Forms Radiobutton

Das Beispiel herunterladen

ist Xamarin.FormsRadioButton eine Art von Schaltfläche, mit der Benutzer eine Option aus einer Gruppe auswählen können. Jede Option wird durch ein Optionsfeld dargestellt, und Sie können nur ein Optionsfeld in einer Gruppe auswählen. Standardmäßig zeigt jedes RadioButton Element Text an:

Screenshot der

Auf einigen Plattformen kann jedoch ein RadioButtonView-Element angezeigt werden, und auf allen Plattformen kann die Darstellung jeder RadioButton mit einem ControlTemplateneu definiert werden:

Das RadioButton -Steuerelement definiert die folgenden Eigenschaften:

• Contentvom Typ object, der definiert, string oder View vom angezeigt RadioButtonwerden soll.
• IsCheckedvom Typ bool, der definiert, ob überprüft RadioButton wird. Diese Eigenschaft verwendet eine TwoWay Bindung und hat den Standardwert false.
• GroupNamevom Typ string, der den Namen definiert, der angibt, welche RadioButton Steuerelemente sich gegenseitig ausschließen. Diese Eigenschaft hat den Standardwert null.
• Value, vom Typ object, der einen optionalen eindeutigen Wert definiert, der zugeordnet ist RadioButton.
• BorderColorvom Typ Color, der die Rahmenstrichfarbe definiert.
• BorderWidth, vom Typ double, der die Breite des RadioButton Rahmens definiert.
• CharacterSpacingvom Typ double, der den Abstand zwischen den Zeichen eines angezeigten Texts definiert.
• CornerRadiusvom Typ int, der den Eckenradius des RadioButtondefiniert.
• FontAttributesvom Typ FontAttributes, der das Textformat bestimmt.
• FontFamily, vom Typ string, der die Schriftfamilie definiert.
• FontSizevom Typ double, der den Schriftgrad definiert.
• TextColorvom Typ Color, der die Farbe des angezeigten Texts definiert.
• TextTransformvom Typ TextTransform, der die Groß-/Kleinschreibung eines angezeigten Texts definiert.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Das RadioButton -Steuerelement definiert auch ein CheckedChanged Ereignis, das ausgelöst wird, wenn sich die IsChecked Eigenschaft ändert, entweder durch benutzerseitige oder programmgesteuerte Bearbeitung. Das CheckedChangedEventArgs Objekt, das das CheckedChanged Ereignis begleitet, verfügt über eine einzelne Eigenschaft mit dem Namen Value, vom Typ bool. Wenn das Ereignis ausgelöst wird, wird der Wert der CheckedChangedEventArgs.Value -Eigenschaft auf den neuen Wert der IsChecked -Eigenschaft festgelegt.

RadioButton Die Gruppierung kann von der RadioButtonGroup -Klasse verwaltet werden, die die folgenden angefügten Eigenschaften definiert:

• GroupNamevom Typ string, der den Gruppennamen für RadioButton Objekte in einem Layout<View>definiert.
• SelectedValuevom Typ object, der den Wert des überprüften RadioButton Objekts innerhalb einer Layout<View> Gruppe darstellt. Diese angefügte Eigenschaft verwendet standardmäßig eine TwoWay Bindung.

Weitere Informationen zur GroupName angefügten Eigenschaft finden Sie unter Gruppierung von RadioButtons. Weitere Informationen zur SelectedValue angefügten Eigenschaft finden Sie unter Reagieren auf RadioButton-Zustandsänderungen.

Erstellen von RadioButtons

Die Darstellung eines RadioButton wird durch den Datentyp definiert, der der RadioButton.Content -Eigenschaft zugewiesen ist:

• Wenn der RadioButton.Content Eigenschaft ein stringzugewiesen wird, wird sie auf jeder Plattform angezeigt, horizontal ausgerichtet neben dem Optionsfeldkreis.
• Wenn dem RadioButton.Content ein Viewzugewiesen wird, wird es auf unterstützten Plattformen (iOS, UWP) angezeigt, während nicht unterstützte Plattformen auf eine Zeichenfolgendarstellung des View Objekts (Android) zurückgreifen. In beiden Fällen wird der Inhalt horizontal ausgerichtet neben dem Optionsfeldkreis angezeigt.
• Wenn auf ControlTemplate ein RadioButtonangewendet wird, kann der RadioButton.Content -Eigenschaft auf allen Plattformen zugewiesen View werden. Weitere Informationen finden Sie unter Neudefinieren der RadioButton-Darstellung.

Anzeigen von zeichenfolgenbasiertem Inhalt

Ein RadioButton zeigt Text an, wenn der Content -Eigenschaft ein stringzugewiesen wird:

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

In diesem Beispiel RadioButton werden Objekte implizit innerhalb desselben übergeordneten Containers gruppiert. Dieser XAML-Code führt zu der Darstellung, die in den folgenden Screenshots gezeigt wird:

Anzeigen beliebiger Inhalte

Unter iOS und UWP kann beliebiger RadioButton Inhalt angezeigt werden, wenn der Content -Eigenschaft ein Viewzugewiesen wird:

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

In diesem Beispiel RadioButton werden Objekte implizit innerhalb desselben übergeordneten Containers gruppiert. Dieser XAML-Code führt zu der Darstellung, die in den folgenden Screenshots gezeigt wird:

Unter Android zeigen Objekte eine Zeichenfolgenbasierte Darstellung des Objekts an, RadioButton das View als Inhalt festgelegt wurde:

Hinweis

Wenn auf ControlTemplate ein RadioButtonangewendet wird, kann der RadioButton.Content -Eigenschaft auf allen Plattformen zugewiesen View werden. Weitere Informationen finden Sie unter Neudefinieren der RadioButton-Darstellung.

Zuordnen von Werten zu RadioButtons

Jedes RadioButton Objekt verfügt über eine Value -Eigenschaft vom Typ object, die einen optionalen eindeutigen Wert definiert, der dem Optionsfeld zugeordnet werden soll. Dadurch kann sich der Wert eines RadioButton von seinem Inhalt unterscheiden und ist besonders nützlich, wenn RadioButton Objekte Objekte anzeigen View .

Im folgenden XAML-Code wird das Festlegen der Content Eigenschaften und Value für jedes RadioButton Objekt veranschaulicht:

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

In diesem Beispiel verfügt jedes RadioButton über einen Image als Inhalt, während gleichzeitig ein zeichenfolgenbasierter Wert definiert wird. Dadurch kann der Wert des aktivierten Optionsfelds leicht identifiziert werden.

Gruppierung von RadioButtons

Optionsfelder funktionieren in Gruppen, und es gibt drei Ansätze zum Gruppieren von Optionsfeldern:

• Platzieren Sie sie im selben übergeordneten Container. Dies wird als implizite Gruppierung bezeichnet.
• Legen Sie die GroupName -Eigenschaft für jedes Optionsfeld in der Gruppe auf den gleichen Wert fest. Dies wird als explizite Gruppierung bezeichnet.
• Legen Sie die RadioButtonGroup.GroupName angefügte Eigenschaft für einen übergeordneten Container fest, wodurch wiederum die GroupName -Eigenschaft aller RadioButton Objekte im Container festgelegt wird. Dies wird auch als explizite Gruppierung bezeichnet.

Wichtig

RadioButton -Objekte müssen nicht zu demselben übergeordneten Element gehören, um gruppiert zu werden. Sie schließen sich gegenseitig aus, sofern sie einen Gruppennamen teilen.

Explizite Gruppierung mit der GroupName-Eigenschaft

Das folgende XAML-Beispiel zeigt das explizite Gruppieren von RadioButton Objekten durch Festlegen ihrer GroupName Eigenschaften:

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

In diesem Beispiel schließen sich beide RadioButton gegenseitig aus, da sie denselben GroupName Wert haben.

Explizite Gruppierung mit der angefügten RadioButtonGroup.GroupName-Eigenschaft

Die RadioButtonGroup -Klasse definiert eine GroupName angefügte Eigenschaft vom Typ string, die für ein Layout<View> -Objekt festgelegt werden kann. Dadurch kann jedes Layout in eine Optionsfeldgruppe umgewandelt werden:

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

In diesem Beispiel wird für jede RadioButton in der StackLayout -Eigenschaft die GroupName -Eigenschaft festgelegt colors, und sie schließt sich gegenseitig aus.

Hinweis

Wenn ein Layout<View> Objekt, das die RadioButtonGroup.GroupName angefügte Eigenschaft festlegt, eine RadioButton enthält, die seine GroupName Eigenschaft festlegt, hat der Wert der RadioButton.GroupName Eigenschaft Vorrang.

Reagieren auf RadioButton-Statusänderungen

Ein Optionsfeld hat zwei Zustände: aktiviert und deaktiviert. Wenn ein Optionsfeld aktiviert ist, ist trueseine IsChecked -Eigenschaft . Wenn ein Optionsfeld deaktiviert ist, ist falseseine IsChecked -Eigenschaft . Ein Optionsfeld kann durch Tippen eines anderen Optionsfelds in derselben Gruppe deaktiviert werden, aber es kann nicht durch erneutes Tippen gelöscht werden. Sie können ein Optionsfeld jedoch programmgesteuert durch Festlegen der IsChecked-Eigenschaft auf false deaktivieren.

Reagieren auf das Auslösen eines Ereignisses

Wenn sich die IsChecked Eigenschaft ändert, entweder durch benutzerseitige oder programmgesteuerte Bearbeitung, wird das CheckedChanged Ereignis ausgelöst. Ein Ereignishandler für dieses Ereignis kann registriert werden, um auf die Änderung zu reagieren:

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

Das CodeBehind enthält den Handler für das CheckedChanged -Ereignis:

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

Das sender Argument ist für RadioButton dieses Ereignis verantwortlich. Sie können dies verwenden, um auf das RadioButton -Objekt zuzugreifen oder zwischen mehreren RadioButton Objekten zu unterscheiden, die denselben CheckedChanged Ereignishandler verwenden.

Reagieren auf eine Eigenschaftsänderung

Die RadioButtonGroup -Klasse definiert eine SelectedValue angefügte Eigenschaft vom Typ object, die für ein Layout<View> -Objekt festgelegt werden kann. Diese angefügte Eigenschaft stellt den Wert des aktivierten RadioButton innerhalb einer Gruppe dar, die für ein Layout definiert ist.

Wenn sich die IsChecked Eigenschaft ändert, entweder durch benutzerseitige oder programmgesteuerte Bearbeitung, ändert sich auch die RadioButtonGroup.SelectedValue angefügte Eigenschaft. Daher kann die RadioButtonGroup.SelectedValue angefügte Eigenschaft Daten sein, die an eine Eigenschaft gebunden sind, die die Auswahl des Benutzers speichert:

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

In diesem Beispiel wird der Wert der RadioButtonGroup.GroupName angefügten Eigenschaft von der GroupName -Eigenschaft im Bindungskontext festgelegt. Auf ähnliche Weise wird der Wert der RadioButtonGroup.SelectedValue angefügten Eigenschaft von der Selection -Eigenschaft im Bindungskontext festgelegt. Darüber hinaus wird die Selection -Eigenschaft in die Value -Eigenschaft des aktivierten RadioButtonaktualisiert.

Visuelle RadioButton-Zustände

RadioButton -Objekte verfügen Checked über und Unchecked visuelle Zustände, die verwendet werden können, um eine visuelle Änderung zu initiieren, wenn ein RadioButton aktiviert oder deaktiviert ist.

Im folgenden XAML-Beispiel wird gezeigt, wie sie einen visuellen Zustand für die Checked Zustände und Unchecked definieren:

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

Bei diesem Beispiel gilt der implizite Style für RadioButton-Objekte. Gibt CheckedVisualState an, dass die -Eigenschaft beim Überprüfen TextColor von RadioButton auf grün mit dem Opacity Wert 1 festgelegt wird. Gibt UncheckedVisualState an, dass die -Eigenschaft auf Rot mit dem Opacity Wert 0,5 festgelegt wird, TextColor wenn sich ein RadioButton in einem nicht aktivierten Zustand befindet. Daher ist der Gesamteffekt, dass, wenn ein RadioButton deaktiviert ist, rot und teilweise transparent und grün ohne Transparenz ist, wenn es überprüft wird:

Weitere Informationen zu visuellen Zuständen finden Sie unter Xamarin.Forms: Visual State-Manager.

Überarbeitete Darstellung von RadioButton

Standardmäßig verwenden Objekte Plattformrenderer, RadioButton um native Steuerelemente auf unterstützten Plattformen zu verwenden. Die visuelle Struktur kann jedoch mit neu ControlTemplatedefiniert werden, RadioButton sodass RadioButton Objekte auf allen Plattformen identisch aussehen. Dies ist möglich, da die RadioButton -Klasse von der TemplatedView -Klasse erbt.

Der folgende XAML-Code zeigt eine ControlTemplate , die verwendet werden kann, um die visuelle Struktur von RadioButton Objekten neu zu definieren:

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

In diesem Beispiel ist das Stammelement von ControlTemplate ein Frame -Objekt, das und Unchecked visuelle Zustände definiertChecked. Das Frame -Objekt verwendet eine Kombination von Grid- , Ellipse- und ContentPresenter -Objekten, um die visuelle Struktur eines RadioButtonzu definieren. Das Beispiel enthält auch einen impliziten Stil, der der RadioButtonTemplateControlTemplate -Eigenschaft aller RadioButton Objekte auf der Seite zuweist.

Hinweis

Das ContentPresenter -Objekt markiert die Position in der visuellen Struktur, an der RadioButton Der Inhalt angezeigt wird.

Der folgende XAML-Code zeigt RadioButton Objekte, die den ControlTemplate über den impliziten Stil nutzen:

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

In diesem Beispiel wird die für jede RadioButton definierte visuelle Struktur durch die visuelle Struktur ersetzt, die ControlTemplatein definiert ist. Daher werden die Objekte im ControlTemplate zur Laufzeit Teil der visuellen Struktur für jedes RadioButton. Darüber hinaus wird der Inhalt für jede RadioButton in der ContentPresenter Steuerelementvorlage definiert ersetzt. Dies führt zu folgendem RadioButton Aussehen:

Weitere Informationen zu Steuerelementvorlagen finden Sie unter Xamarin.Forms Steuerelementvorlagen.

Deaktivieren eines RadioButton-Steuerelements

Manchmal wechselt eine Anwendung in einen Zustand, in dem ein RadioButton überprüfter Vorgang kein gültiger Vorgang ist. In solchen Fällen kann das RadioButton deaktiviert werden, indem die zugehörige IsEnabled-Eigenschaft auf false festgelegt wird.

Verwandte Links

• RadioButton-Demos (Beispiel)
• Xamarin.Forms-Schaltfläche
• Xamarin.Forms: Visual State-Manager