Przyciski radiowe

Przyciski radiowe, nazywane również przyciskami opcji, pozwalają użytkownikom wybrać jedną opcję z kolekcji co najmniej dwóch wzajemnie wykluczających się, ale powiązanych opcji. Przyciski radiowe są zawsze używane w grupach, a każda opcja jest reprezentowana przez jeden przycisk radiowy w grupie.

W stanie domyślnym nie wybrano przycisku radiowego w grupie RadioButtons. Oznacza to, że wszystkie przyciski radiowe są czyszczone. Jednak po wybraniu przycisku radiowego użytkownik nie może usunąć zaznaczenia przycisku, aby przywrócić grupę do początkowego stanu wyczyszczonego.

Pojedyncze zachowanie grupy RadioButtons odróżnia ją od pól wyboru , które obsługują wybór wielokrotny i usuwanie zaznaczenia lub czyszczenia.

Czy jest to właściwa kontrola?

Użyj przycisków radiowych, aby umożliwić użytkownikom wybór spośród co najmniej dwóch wzajemnie wykluczających się opcji.

Użyj przycisków radiowych, gdy użytkownicy muszą zobaczyć wszystkie opcje przed dokonaniem wyboru. Przyciski radiowe podkreślają wszystkie opcje w równym stopniu, co oznacza, że niektóre opcje mogą zwracać większą uwagę niż jest to konieczne lub pożądane.

O ile wszystkie opcje nie zasługują na taką samą uwagę, rozważ użycie innych kontrolek. Aby na przykład zalecić jedną najlepszą opcję dla większości użytkowników i w większości sytuacji, użyj pola kombi , aby wyświetlić tę najlepszą opcję jako opcję domyślną.

Jeśli istnieją tylko dwie możliwe opcje, które można wyraźnie wyrazić jako pojedynczy wybór binarny, na przykład włącz/wyłącz lub tak/nie, połącz je w pojedyncze pole wyboru lub przełącznik . Na przykład użyj jednego pola wyboru dla opcji "Zgadzam się" zamiast dwóch przycisków radiowych dla opcji "Zgadzam się" i "Nie zgadzam się".

Nie używaj dwóch przycisków radiowych dla jednego wyboru binarnego:

Zamiast tego użyj pola wyboru:

Gdy użytkownicy mogą wybrać wiele opcji, użyj pól wyboru .

Gdy opcje użytkowników znajdują się w zakresie wartości (na przykład 10, 20, 30, ... 100) użyj kontrolki suwaka .

Jeśli istnieje więcej niż osiem opcji, użyj listy rozwijanej .

Jeśli dostępne opcje są oparte na bieżącym kontekście aplikacji lub mogą się różnić dynamicznie, użyj kontrolki listy.

Rekomendacje

• Upewnij się, że cel i bieżący stan zestawu przycisków radiowych są jawne.
• Ogranicz etykietę tekstową przycisku radiowego do pojedynczego wiersza.
• Jeśli etykieta tekstowa jest dynamiczna, zastanów się, jak przycisk zostanie automatycznie zmieniony i co się stanie z wizualizacjami wokół niego.
• Użyj czcionki domyślnej, chyba że wytyczne dotyczące marki informują o tym inaczej.
• Nie umieszczaj obok siebie dwóch grup RadioButtons. Gdy dwie grupy RadioButtons znajdują się obok siebie, trudno jest użytkownikom określić, które przyciski należą do której grupy.

RadioButtons — omówienie

RadioButtons kontra RadioButton

Istnieją dwa sposoby tworzenia grup przycisków radiowych: RadioButtons i RadioButton.

• Zalecamy sterowanie RadioButtons. Ta kontrolka upraszcza układ, obsługuje nawigację za pomocą klawiatury i ułatwienia dostępu oraz obsługuje powiązanie ze źródłem danych.
• Można użyć grup poszczególnych kontrolek RadioButton .

Dostęp do klawiatury i zachowanie nawigacji zostały zoptymalizowane w kontrolce RadioButtons . Te ulepszenia pomagają zarówno użytkownikom korzystającym z ułatwień dostępu, jak i zaawansowanym użytkownikom klawiatury w szybszym i łatwiejszym przemieszczaniu się przez listę opcji.

Oprócz tych ulepszeń domyślny układ wizualny poszczególnych przycisków radiowych w grupie RadioButtons został zoptymalizowany za pomocą zautomatyzowanych ustawień orientacji, odstępów i marginesów. Ta optymalizacja eliminuje potrzebę określania tych właściwości, co mogłoby być konieczne przy użyciu bardziej pierwotnej kontrolki grupowania, jak na przykład StackPanel lub Grid.

Nawigowanie po grupie RadioButtons

Kontrolka RadioButtons ma specjalne zachowanie nawigacji, które ułatwia użytkownikom klawiaturowym szybsze i łatwiejsze poruszanie się po liście.

Fokus klawiatury

Kontrolka RadioButtons obsługuje dwa stany:

• Nie wybrano przycisku radiowego
• Wybrano jeden przycisk radiowy

W następnych sekcjach opisano zachowanie fokusu kontrolki w każdym stanie.

Nie wybrano przycisku radiowego

Gdy żaden przycisk radiowy nie jest wybrany, pierwszy przycisk radiowy na liście otrzymuje fokus.

Uwaga / Notatka

Element, który otrzymuje fokus z początkowej nawigacji tabulatorem, nie jest wybrany.

Lista bez fokusu tabulatora, brak zaznaczenia

Lista ze wstępnym skupieniem uwagi na karcie, bez wyboru

Wybrano jeden przycisk radiowy

Gdy użytkownik przechodzi do listy, z której jest już zaznaczony przycisk radiowy, wybrany przycisk radiowy otrzymuje fokus.

Lista bez fokusu zakładki

Lista z początkowym fokusem na karcie

Nawigacja za pomocą klawiatury

Aby uzyskać więcej informacji na temat ogólnych zachowań nawigacji za pomocą klawiatury, zobacz Interakcje klawiatury — nawigacja.

Gdy element w grupie RadioButtons ma już fokus, użytkownik może używać strzałek do "nawigacji wewnętrznej" między elementami w grupie. Klawisze strzałek w górę i w dół przechodzą do "następnego" lub "poprzedniego" elementu logicznego, zgodnie z definicją w znaczniku XAML. Klawisze strzałek w lewo i w prawo przesuwają przestrzennie.

Nawigacja w układach z jedną kolumną lub jednym wierszem

W układzie z jedną kolumną lub jednym wierszem nawigacja za pomocą klawiatury powoduje następujące zachowanie:

Pojedyncza kolumna

Strzałka w górę i strzałka w dół przemieszczają się między elementami.
Strzałka w lewo i strzałka w prawo nie robią nic.

Pojedynczy wiersz

Klawisze strzałek w lewo i w górę przechodzą do poprzedniego elementu, a klawisze strzałek w prawo i w dół przechodzą do następnego elementu.

Nawigacja w układach wielokolumnowych i wielowierszowych

W układzie w formie siatki zawierającym wiele kolumn i wierszy nawigacja za pomocą klawiatury powoduje następujące zachowanie:

klawisze strzałek w lewo/w prawo

Klawisze strzałek w lewo i w prawo przesuwają fokus poziomo między elementami w wierszu.

Gdy fokus znajduje się na ostatnim elemencie w kolumnie, a naciśnięty zostanie klawisz strzałki w prawo lub w lewo, fokus przechodzi do ostatniego elementu w następnej lub poprzedniej kolumnie (jeśli istnieje).

klawisze strzałek w górę/w dół

Klawisze strzałek w górę i w dół przesuwają fokus w pionie między elementami w kolumnie.

Kiedy fokus jest na ostatnim elemencie w kolumnie i naciśnięta zostanie strzałka w dół, fokus przenosi się do pierwszego elementu w następnej kolumnie, o ile istnieje. Gdy fokus znajduje się na pierwszym elemencie w kolumnie i naciśnięciu strzałki w górę, fokus zostanie przeniesiony do ostatniego elementu w poprzedniej kolumnie (jeśli istnieje)

Aby uzyskać więcej informacji, zobacz Interakcje z klawiaturą.

Zawijanie

Grupa przycisków radiowych nie przenosi fokusu z pierwszego wiersza lub kolumny do ostatniego czy od ostatniego wiersza lub kolumny do pierwszego. Dzieje się tak dlatego, że gdy użytkownicy korzystają z czytnika zawartości ekranu, poczucie granicy i wyraźne wskazanie początku i końca zostaje utracone, co utrudnia użytkownikom niedowidzącym nawigowanie po liście.

Kontrolka RadioButtons nie obsługuje również wyliczenia, ponieważ kontrolka ma zawierać rozsądną liczbę elementów (zobacz Czy jest to właściwa kontrolka?).

Wybór jest zgodny z fokusem

Gdy używasz klawiatury do nawigowania między elementami w grupie RadioButtons, kiedy punkt skupienia przenosi się z jednego elementu do następnego, nowo skoncentrowany element zostanie wybrany, a wcześniej skupiony element zostanie odznaczony.

Przed nawigacją za pomocą klawiatury

Fokus i zaznaczenie przed nawigacją za pomocą klawiatury.

Po nawigacji za pomocą klawiatury

Fokus i zaznaczenie po nawigacji za pomocą klawiatury, gdzie strzałki w dół przenosi fokus do przycisku radiowego 3, wybiera go i czyści przycisk radiowy 2.

Fokus można przenosić bez zmieniania zaznaczenia za pomocą Ctrl+strzałka, aby nawigować. Po przeniesieniu fokusu możesz użyć paska spacji, aby wybrać element, który ma obecnie fokus.

Nawigowanie za pomocą konsoli gry i zdalnego sterowania

Jeśli używasz konsoli gry lub zdalnego sterowania, aby przejść między przyciskami radiowymi, zachowanie "wybór następuje fokus" jest wyłączone, a użytkownik musi nacisnąć przycisk "A", aby wybrać przycisk radiowy, który aktualnie ma fokus.

Zachowanie dostępności

W poniższej tabeli opisano, jak Narrator obsługuje grupę RadioButtons i co jest ogłaszane. To zachowanie zależy od tego, jak użytkownik ustawił preferencje szczegółów Narratora.

Akcja	Ogłoszenie Narratora
Fokus przenosi się do wybranego elementu	"name, przycisk opcji, zaznaczony, x z N"
Przeniesienie fokusu do niezaznaczonego elementu (w przypadku nawigowania za pomocą klawiszy Ctrl i strzałek lub gamepada Xbox, co wskazuje, że wybór nie następuje po punkcie uwagi).	"name, RadioButton, nie zaznaczony, x z N"

Uwaga / Notatka

Nazwa ogłaszana przez Narratora dla każdego elementu jest wartością właściwości AutomationProperties.Name dołączonej, jeśli jest dostępna dla elementu; w przeciwnym razie jest to wartość zwracana przez metodę ToString elementu.

x jest liczbą bieżącego elementu. N to całkowita liczba elementów w grupie.

Tworzenie grupy radiobuttonów WinUI

• Ważne interfejsy API: Klasa RadioButtons, właściwość SelectedItem, właściwość SelectedIndex, zdarzenie SelectionChanged, Klasa RadioButton, właściwość IsChecked, zdarzenie Checked

Otwórz aplikację Galeria WinUI 3 i zobacz przycisk RadioButton w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Kontrolka RadioButtons używa modelu zawartości podobnego do elementu ItemsControl. Oznacza to, że można wykonywać następujące czynności:

• Wypełnij je, dodając elementy bezpośrednio do kolekcji Items lub przez powiązanie danych z właściwością ItemsSource .
• Użyj właściwości SelectedIndex lub SelectedItem , aby pobrać i ustawić wybraną opcję.
• Obsłuż zdarzenie SelectionChanged, aby wykonać akcję po wybraniu opcji.

W tym miejscu deklarujesz prostą kontrolkę RadioButtons z trzema opcjami. Właściwość nagłówka jest ustawiona tak, aby nadać grupie etykietę, a właściwość jest ustawiona na podanie opcji domyślnej.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged">
    <x:String>Red</x:String>
    <x:String>Green</x:String>
    <x:String>Blue</x:String>
</RadioButtons>

Wynik wygląda następująco:

Aby wykonać akcję, gdy użytkownik wybierze opcję, obsłuż zdarzenie SelectionChanged . W tym miejscu zmienisz kolor tła elementu obramowania o nazwie "ExampleBorder" ().

private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ExampleBorder != null && sender is RadioButtons rb)
    {
        string colorName = rb.SelectedItem as string;
        switch (colorName)
        {
            case "Red":
                ExampleBorder.Background = new SolidColorBrush(Colors.Red);
                break;
            case "Green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
                break;
        }
    }
}

Wskazówka

Możesz również pobrać wybrany element z właściwości SelectionChangedEventArgs.AddedItems . W indeksie 0 zostanie wybrany tylko jeden element, więc można pobrać wybrany element w następujący sposób: string colorName = e.AddedItems[0] as string;.

Stany wyboru

Przycisk radiowy ma dwa stany: zaznaczone lub niezaznaczone. Po wybraniu RadioButtons opcji w grupie można pobrać jej wartość z właściwości SelectedItem i jej lokalizację w kolekcji z właściwości SelectedIndex . Przycisk radiowy można wyczyścić, jeśli użytkownik wybierze inny przycisk radiowy w tej samej grupie, ale nie można go wyczyścić, jeśli użytkownik wybierze go ponownie. Można jednak wyczyścić grupę przycisków radiowych programowo, ustawiając ją SelectedItem = nulllub SelectedIndex = -1. (Ustawienie dowolnej wartości dla SelectedIndex poza zakresem kolekcji Items skutkuje brakiem zaznaczenia).

Zawartość elementu RadioButtons

W poprzednim przykładzie kontrolka RadioButtons została wypełniona prostymi ciągami. Element sterujący dostarczył przyciski radiowe i użył ciągów znaków jako etykiet dla każdego z przycisków.

Można jednak wypełnić kontrolkę RadioButtons dowolnym obiektem. Zazwyczaj obiekt ma dostarczyć reprezentację ciągu, która może być używana jako etykieta tekstowa. W niektórych przypadkach obraz może być odpowiedni zamiast tekstu.

W tym miejscu elementy SymbolIcon są używane do wypełniania kontrolki.

<RadioButtons Header="Select an icon option:">
    <SymbolIcon Symbol="Back"/>
    <SymbolIcon Symbol="Attach"/>
    <SymbolIcon Symbol="HangUp"/>
    <SymbolIcon Symbol="FullScreen"/>
</RadioButtons>

Do wypełnienia elementów można również użyć poszczególnych kontrolek RadioButtons. Jest to szczególny przypadek, który omówimy później. Zobacz kontrolki typu RadioButton w grupie RadioButtons.

Zaletą korzystania z dowolnego obiektu jest możliwość powiązania kontrolki RadioButtons z typem niestandardowym w modelu danych. W następnej sekcji pokazano to.

Powiązanie danych

Kontrolka RadioButtons wspiera powiązanie danych z właściwością ItemsSource. W tym przykładzie pokazano, jak powiązać kontrolkę z niestandardowym źródłem danych. Wygląd i funkcjonalność tego przykładu są takie same jak w poprzednim przykładzie koloru tła, ale w tym miejscu pędzle kolorów są przechowywane w modelu danych zamiast tworzenia w programie obsługi zdarzeń SelectionChanged.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged"
              ItemsSource="{x:Bind colorOptionItems}"/>

public sealed partial class MainPage : Page
{
    // Custom data item.
    public class ColorOptionDataModel
    {
        public string Label { get; set; }
        public SolidColorBrush ColorBrush { get; set; }

        public override string ToString()
        {
            return Label;
        }
    }

    List<ColorOptionDataModel> colorOptionItems;

    public MainPage1()
    {
        this.InitializeComponent();

        colorOptionItems = new List<ColorOptionDataModel>();
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
    }

    private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var option = e.AddedItems[0] as ColorOptionDataModel;
        ExampleBorder.Background = option?.ColorBrush;
    }
}

Kontrolki RadioButton w grupie RadioButtons

Do wypełnienia elementów można użyć poszczególnych kontrolek RadioButtons. Możesz to zrobić, aby uzyskać dostęp do niektórych właściwości, takich jak AutomationProperties.Name; lub masz istniejący kod RadioButton, ale chcesz skorzystać z układu i nawigacji RadioButtons.

<RadioButtons Header="Background color">
    <RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
    <RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
    <RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>

Jeśli używasz kontrolek RadioButton w grupie RadioButtons, kontrolka RadioButtons wie, jak przedstawić RadioButton, więc nie skończysz z dwoma okręgami wyboru.

Istnieją jednak pewne zachowania, o których należy pamiętać. Zalecamy obsługę stanu i zdarzeń dla poszczególnych kontrolek lub RadioButtons, ale nie równocześnie obu, aby uniknąć konfliktów.

W tej tabeli przedstawiono powiązane zdarzenia i właściwości obu kontrolek.

Przycisk radiowy	Przyciski radiowe
Zaznaczone, niezaznaczone, kliknij	WybórZmieniono
Czy sprawdzone	WybranyElement, WybranyIndeks

W przypadku obsługi zdarzeń dla indywidualnego RadioButton, takich jak Checked lub Unchecked, oraz obsługi zdarzenia RadioButtons.SelectionChanged, oba zdarzenia zostaną wyzwolone. Najpierw występuje zdarzenie RadioButton, a następnie występuje zdarzenie RadioButtons.SelectionChanged, co może spowodować konflikty.

Właściwości IsChecked, SelectedItemi SelectedIndex pozostają zsynchronizowane. Zmiana jednej właściwości spowoduje zaktualizowanie dwóch pozostałych.

Właściwość RadioButton.GroupName jest ignorowana. Grupa jest tworzona przez kontrolkę RadioButtons.

Definiowanie wielu kolumn

Domyślnie kontrolka RadioButtons rozmieszcza przyciski radiowe w pionie w jednej kolumnie. Możesz ustawić właściwość MaxColumns , aby kontrolka rozmieściła przyciski radiowe w wielu kolumnach. (Gdy to zrobisz, są one rozmieszczone w kolejności kolumny głównej, gdzie elementy są wypełniane od góry do dołu, a następnie od lewej do prawej).

<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
    <x:String>Item 6</x:String>
</RadioButtons>

Wskazówka

Aby elementy były rozmieszczone w pojedynczym wierszu poziomym, należy ustawić MaxColumns jako liczbę elementów w grupie.

Tworzenie własnej grupy RadioButton

Ważne

Zalecamy użycie kontrolki RadioButtons do grupowania elementów RadioButton.

Przyciski radiowe działają w grupach. Poszczególne kontrolki RadioButton można grupować na jeden z dwóch sposobów:

• Umieść je w tym samym kontenerze nadrzędnym.
• Ustaw właściwość GroupName na każdy przycisk radiowy na tę samą wartość.

W tym przykładzie pierwsza grupa przycisków radiowych jest niejawnie grupowana przez bycie w tym samym panelu stosu. Druga grupa jest podzielona między dwa panele stosu, więc GroupName jest używana do jawnego grupowania ich w jedną grupę.

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 1 - implicit grouping -->
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
                         IsChecked="True"/>
        </StackPanel>
    </StackPanel>

    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 2 - grouped by GroupName -->
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked" IsChecked="True"/>
                <RadioButton Content="White" Tag="white"  GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="ExampleBorder"
            BorderBrush="#FFFFD700" Background="#FFFFFFFF"
            BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>

private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
                break;
            case "green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "white":
                ExampleBorder.Background = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "green":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "white":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

Te dwie grupy kontrolek RadioButton wyglądają następująco:

Stany przycisku radiowego

Przycisk radiowy ma dwa stany: zaznaczone lub niezaznaczone. Po wybraniu przycisku radiowego jego właściwość IsChecked ma wartość true. Gdy przycisk radiowy zostanie wyczyszczony, jego właściwość IsChecked jest false. Przycisk radiowy można wyczyścić, jeśli użytkownik wybierze inny przycisk radiowy w tej samej grupie, ale nie można go wyczyścić, jeśli użytkownik wybierze go ponownie. Można jednak wyczyścić przycisk radiowy programowo, ustawiając jego właściwość IsChecked na wartość false.

Wizualizacje do rozważenia

Domyślne odstępy między poszczególnymi kontrolkami RadioButton różnią się od odstępów udostępnianych przez grupę RadioButtons. Aby zastosować odstępy RadioButtons do poszczególnych kontrolek RadioButton, użyj wartości Margin0,0,7,3jak pokazano tutaj.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Margin" Value="0,0,7,3"/>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Background"/>
    <RadioButton Content="Item 1"/>
    <RadioButton Content="Item 2"/>
    <RadioButton Content="Item 3"/>
</StackPanel>

Na poniższych obrazach przedstawiono preferowane odstępy przycisków radiowych w grupie.

Uwaga / Notatka

Jeśli używasz kontrolki WinUI RadioButtons, odstępy, marginesy i orientacja są już zoptymalizowane.

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Element sterujący RadioButtons dla aplikacji Uniwersalnej platformy Windows jest zawarty w ramach interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tych kontrolek istnieją zarówno w przestrzeniach nazw Windows.UI.Xaml.Controls , jak i Microsoft.UI.Xaml.Controls .

• API platformy uniwersalnej Windows: Klasa RadioButton, Właściwość IsChecked, Zdarzenie Checked
• Interfejsy API WinUI 2: Klasa RadioButtons, Właściwość SelectedItem, Właściwość SelectedIndex, Zdarzenie SelectionChanged
• Otwórz aplikację Galeria WinUI 2 i zobacz przycisk RadioButton w akcji. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Istnieją dwa sposoby tworzenia grup przycisków radiowych.

• Począwszy od WinUI 2.3, zalecamy kontrolkę RadioButtons. Ta kontrolka upraszcza układ, obsługuje nawigację za pomocą klawiatury i ułatwienia dostępu oraz obsługuje powiązanie ze źródłem danych.
• Można użyć grup poszczególnych kontrolek RadioButton . Jeśli aplikacja nie korzysta z interfejsu WinUI 2.3 lub nowszego, jest to jedyna opcja.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:RadioButtons />

Tematy pokrewne

• Przyciski
• przełączniki dźwigniowe
• Pola wyboru
• Listy i kombinowane pola wyboru
• Suwaki
• Klasa RadioButtons
• Klasa RadioButton