Dela via


Alternativknappar

Alternativknappar, även kallade radioknappar, låter användarna välja ett alternativ från en uppsättning av två eller flera alternativ som utesluter varandra men är relaterade. Alternativknappar används alltid i grupper och varje alternativ representeras av en alternativknapp i gruppen.

I standardtillståndet är ingen knapp i en radioknappsgrupp markerad. Det vill säga, alla radioknappar är avmarkerade. När en användare har valt en alternativknapp kan användaren dock inte avmarkera knappen för att återställa gruppen till sitt ursprungliga avmarkerade tillstånd.

Det unika beteendet för en RadioButtons-grupp skiljer den från kryssrutor, som stöder flerval och avmarkerande eller rensning.

Exempel på en RadioButtons-grupp med en alternativknapp vald

Är det här rätt kontroll?

Använd alternativknappar för att låta användare välja mellan två eller flera alternativ som utesluter varandra.

En grupp med radioknappar, med en radioknapp vald

Använd alternativknappar när användare behöver se alla alternativ innan de gör ett val. Alternativknappar framhäver alla alternativ på samma sätt, vilket innebär att vissa alternativ kan få mer uppmärksamhet än nödvändigt eller önskat.

Om inte alla alternativ förtjänar samma uppmärksamhet bör du överväga att använda andra kontroller. Om du till exempel vill rekommendera ett enda bästa alternativ för de flesta användare och i de flesta situationer använder du en kombinationsruta för att visa det bästa alternativet som standardalternativ.

En kombinationsruta som visar ett standardalternativ

Om det bara finns två möjliga alternativ som kan uttryckas tydligt som ett enda binärt val, till exempel på/av eller ja/nej, kan du kombinera dem i en enda kryssruta eller växla växelkontroll . Använd till exempel en enda kryssruta för "Jag godkänner" i stället för två alternativknappar för "Jag godkänner" och "Jag håller inte med".

Använd inte två alternativknappar för ett enda binärt val:

Två radioknappar som presenterar ett binärt val

Använd en kryssruta i stället:

En kryssruta är ett bra alternativ för att presentera ett binärt val

När användare kan välja flera alternativ använder du kryssrutorna .

Kryssrutor stöder flerval

När användarnas alternativ ligger inom ett värdeintervall (till exempel 10, 20, 30, ... 100), använd en skjutreglagekontroll .

En skjutreglagekontroll som visar ett värde i ett värdeintervall

Om det finns fler än åtta alternativ använder du en kombinationsruta.

En listruta som visar flera alternativ

Om de tillgängliga alternativen baseras på en apps aktuella kontext, eller om de på annat sätt kan variera dynamiskt, använder du en listkontroll.

Rekommendationer

  • Kontrollera att syftet med och det aktuella tillståndet för en uppsättning alternativknappar är explicit.
  • Begränsa textetiketten för alternativknappen till endast en rad.
  • Om textetiketten är dynamisk bör du tänka på hur knappen automatiskt ändrar storlek och vad som händer med eventuella visuella objekt runt den.
  • Använd standardteckensnittet om inte dina varumärkesriktlinjer säger något annat.
  • Placera inte två RadioButtons-grupper sida vid sida. När två RadioButtons-grupper ligger bredvid varandra kan det vara svårt för användare att avgöra vilka knappar som tillhör vilken grupp.

Översikt över RadioButtons

RadioButtons kontra RadioButton

Det finns två sätt att skapa grupper med alternativknappar: RadioButtons och RadioButton.

  • Vi rekommenderar RadioButtons-kontrollen . Den här kontrollen förenklar layouten, hanterar tangentbordsnavigering och hjälpmedel och stöder bindning till en datakälla.
  • Du kan använda grupper med enskilda RadioButton-kontroller .

Tangentbordsåtkomst och navigeringsbeteende har optimerats i RadioButtons-kontrollen . Dessa förbättringar hjälper både tillgänglighetsfunktioner och tangentbordskunniga användare att gå igenom listan över alternativ mer snabbt och enkelt.

Utöver dessa förbättringar har den förvalda visuella layouten för individuella radioknappar i en RadioButtons-grupp optimerats genom automatiska inställningar för orientering, avstånd och marginaler. Den här optimeringen eliminerar kravet på att ange dessa egenskaper, vilket du kan behöva göra när du använder en mer primitiv grupperingskontroll, till exempel StackPanel eller Grid.

Den RadioButtons kontrollen har ett särskilt navigeringsbeteende som hjälper tangentbordsanvändare att navigera i listan snabbare och enklare.

Tangentbordsfokus

Kontrollen RadioButtons stöder två tillstånd:

  • Ingen alternativknapp har valts
  • En av alternativknapparna är vald

I nästa avsnitt beskrivs fokusbeteendet för kontrollen i varje tillstånd.

Ingen alternativknapp har valts

När ingen alternativknapp har valts får den första alternativknappen i listan fokus.

Anteckning

Det objekt som tar emot tabbfokus från den inledande fliknavigeringen är inte markerat.

Lista utan flikfokus, ingen markering

Lista utan flikfokus och inget markerat objekt

Lista med inledande flikfokus, ingen markering

Lista med inledande flikfokus och inget markerat objekt

En av alternativknapparna är vald

När en användare flikar in i listan där en alternativknapp redan har valts, får den valda alternativknappen fokus.

Lista utan flikfokus

Lista utan flikfokus och ett markerat objekt

Lista med inledande flikfokus

Lista med inledande flikfokus och ett markerat objekt

Tangentbordsnavigering

Mer information om allmänna navigeringsbeteenden för tangentbord finns i Tangentbordsinteraktioner – Navigering.

När ett objekt i en RadioButtons grupp redan har fokus kan användaren använda piltangenterna för "inre navigering" mellan objekten i gruppen. Piltangenterna Upp och Ned flyttas till det logiska objektet "nästa" eller "föregående", enligt definitionen i XAML-markering. Piltangenterna vänster och höger flyttas rumsligt.

I en layout med en kolumn eller en rad resulterar tangentbordsnavigering i följande beteende:

Enskild kolumn

Exempel på tangentbordsnavigering i en radioknappsgrupp med en kolumn

Uppåtpilen och nedåtpilen flyttas mellan objekt.
vänsterpilen och högerpilen gör ingenting.

Enskild rad

Exempel på tangentbordsnavigering i en radioknappsgrupp med en rad

Piltangenterna Vänster och Uppåt flyttas till föregående objekt och piltangenterna Höger och Nedåt flyttas till nästa objekt.

I en rutnätslayout med flera kolumner och flera rader resulterar tangentbordsnavigering i det här beteendet:

Vänster-/högerpiltangenter

Exempel på vågrät tangentbordsnavigering i en radioknappsgrupp med flera kolumner/rader

Piltangenterna Vänster och Höger flyttar fokus vågrätt mellan objekt i en rad.

Exempel på vågrät tangentbordsnavigering med fokus på det sista objektet i en kolumn

När fokus ligger på det sista objektet i en kolumn och höger- eller vänsterpiltangenten trycks ned flyttas fokus till det sista objektet i nästa eller föregående kolumn (om någon).

Upp-/nedpilstangenter

Exempel på lodrät tangentbordsnavigering i en radioknappsgrupp med flera kolumner/rader

Piltangenterna Uppåt och Nedåt flyttar fokus lodrätt mellan objekt i en kolumn.

Exempel på lodrät tangentbordsnavigering med fokus på det sista objektet i en kolumn

När fokus ligger på det sista objektet i en kolumn och nedåtpilen trycks ned flyttas fokus till det första objektet i nästa kolumn (om någon). När fokus ligger på det första objektet i en kolumn och uppåtpilen trycks ned flyttas fokus till det sista objektet i föregående kolumn (om någon)

Mer information finns i Tangentbordsinteraktioner.

Inslagning

Gruppen RadioButtons omsluter inte fokus från den första raden eller kolumnen till den sista, eller från den sista raden eller kolumnen till den första. Detta beror på att när användare använder en skärmläsare går en känsla av gräns och en tydlig indikation på början och slutet förlorad, vilket gör det svårt för användare med nedsatt syn att navigera i listan.

Kontrollen RadioButtons stöder inte heller uppräkning eftersom kontrollen är avsedd att innehålla ett rimligt antal objekt (se Är detta rätt kontroll?).

Markeringen följer fokus

När du använder tangentbordet för att navigera mellan objekt i en RadioButtons grupp, när fokus flyttas från ett objekt till ett annat, väljs det nyligen fokuserade objektet och det tidigare fokuserade objektet rensas.

Före tangentbordsnavigering

Exempel på fokus och val före tangentbordsnavigering

Fokus och val före tangentbordsnavigering.

Efter tangentbordsnavigering

Exempel på fokus och val efter tangentbordsnavigering

Fokus och val efter tangentbordsnavigering, där nedåtpilen flyttar fokus till alternativknapp 3, väljer den och avmarkerar alternativknappen 2.

Du kan flytta fokus utan att ändra markeringen med hjälp av Ctrl+piltangenterna för att navigera. När fokus har flyttats kan du använda blanksteget för att välja det objekt som för närvarande har fokus.

Om du använder en spelplatta eller fjärrstyrning för att flytta mellan alternativknapparna inaktiveras beteendet "markeringen följer fokus" och användaren måste trycka på A-knappen för att välja den alternativknapp som för närvarande är i fokus.

Tillgänglighetsbeteende

I följande tabell beskrivs hur Skärmläsaren hanterar en RadioButtons grupp och vad som tillkännages. Det här beteendet beror på hur användaren har angett skärmläsarens detaljinställningar.

Handling Berättarens tillkännagivande
Fokus flyttas till ett markerat objekt "name, RadioButton, vald, x av N"
Fokus flyttas till ett omarkerat objekt
(Om du navigerar med Ctrl-piltangenter eller Xbox-spelplatta,
vilket indikerar att markeringen inte följer fokus.)
"name, RadioButton, ej vald, x av N"

Anteckning

Det namn som Narrator meddelar för varje objekt är värdet för AutomationProperties.Name bifogade egenskap om den är tillgänglig för objektet; Annars är det värdet som returneras av objektets ToString-metod.

x är numret på det aktuella objektet. N är det totala antalet objekt i gruppen.

Skapa en WinUI RadioButtons-grupp

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Kontrollen RadioButtons använder en innehållsmodell som liknar en ItemsControl. Det innebär att du kan:

  • Fyll i det genom att lägga till objekt direkt i samlingen Objekt eller genom att binda data till egenskapen ItemsSource .
  • Använd egenskaperna SelectedIndex eller SelectedItem för att hämta och ange vilket alternativ som är valt.
  • Hantera händelsen SelectionChanged för att vidta åtgärder när ett alternativ väljs.

Här deklarerar du en enkel RadioButtons kontroll med tre alternativ. Egenskapen Header är inställd på att ge gruppen en etikett och egenskapen SelectedIndex är inställd på att tillhandahålla ett standardalternativ.

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

Resultatet ser ut så här:

En grupp med tre alternativknappar

Om du vill vidta en åtgärd när användaren väljer ett alternativ hanterar du händelsen SelectionChanged . Här ändrar du bakgrundsfärgen för ett kantlinjeelement med namnet "ExampleBorder" (<Border x:Name="ExampleBorder" Width="100" Height="100"/>).

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

Tips

Du kan också hämta det markerade objektet från egenskapen SelectionChangedEventArgs.AddedItems . Det kommer bara att finnas ett markerat objekt, vid index 0, så du kan få det markerade objektet så här: string colorName = e.AddedItems[0] as string;.

Markeringslägen

En alternativknapp har två tillstånd: vald eller avvald. När du väljer ett alternativ i en RadioButtons grupp kan du hämta dess värde från egenskapen SelectedItem och dess plats i samlingen från egenskapen SelectedIndex . En alternativknapp kan avmarkeras om en användare väljer en annan alternativknapp i samma grupp, men det går inte att avmarkera om användaren väljer den igen. Du kan dock rensa en radioknappsgrupp programmatiskt genom att ange den SelectedItem = nulleller SelectedIndex = -1. (Om du anger SelectedIndex till ett värde utanför intervallet för Items-samlingen blir det inget val.)

RadioButtons-innehåll

I föregående exempel fyllde du i RadioButtons-kontrollen med enkla strängar. Kontrollen tillhandahöll alternativknapparna och använde strängarna som etikett för varje knapp.

Du kan dock fylla i RadioButtons kontroll med valfritt objekt. Vanligtvis vill du att objektet ska tillhandahålla en strängrepresentation som kan användas som en textetikett. I vissa fall kan en bild vara lämplig i stället för text.

Här används SymbolIcon-element för att fylla i kontrollen.

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

En grupp radioknappar med symbolikoner

Du kan också använda enskilda RadioButton-kontroller för att fylla i objekten RadioButtons . Detta är ett specialfall som vi diskuterar senare. Se RadioButton-kontroller i en RadioButtons-grupp.

En fördel med att kunna använda alla objekt är att du kan binda RadioButtons kontrollen till en anpassad typ i datamodellen. Nästa avsnitt visar detta.

Databindning

Kontrollen RadioButtons stöder databindning till dess ItemsSource-egenskap . Det här exemplet visar hur du kan binda kontrollen till en anpassad datakälla. Utseendet och funktionerna i det här exemplet är samma som föregående bakgrundsfärgsexempel, men här lagras färgpenslar i datamodellen i stället för att skapas i SelectionChanged händelsehanterare.

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

RadioButton-kontroller i en RadioButtons-grupp

Du kan använda enskilda RadioButton-kontroller för att fylla i objekten RadioButtons . Du kan göra detta för att få åtkomst till vissa egenskaper, till exempel AutomationProperties.Name; eller så kanske du har befintlig RadioButton kod, men vill dra nytta av layouten och navigeringen för 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>

När du använder RadioButton kontroller i en RadioButtons grupp vet RadioButtons-kontrollen hur du presenterar RadioButton, så att du inte får två markeringscirklar.

Det finns dock vissa beteenden som du bör känna till. Vi rekommenderar att du hanterar tillstånd och händelser på de enskilda kontrollerna eller på RadioButtons, men inte båda samtidigt, för att undvika konflikter.

Den här tabellen visar relaterade händelser och egenskaper för båda kontrollerna.

Radiobutton Radioknappar
Markerad, Avmarkerad, Klicka på UrvalÄndrad
ÄrMarkerad SelectedItem, SelectedIndex

Om du hanterar händelser på en enskild RadioButton, till exempel Checked eller Uncheckedoch även hanterar RadioButtons.SelectionChanged händelsen, utlöses båda händelserna. Den RadioButton händelsen inträffar först och sedan inträffar den RadioButtons.SelectionChanged händelsen, vilket kan leda till konflikter.

Egenskaperna IsChecked, SelectedItemoch SelectedIndex förblir synkroniserade. En ändring av en egenskap uppdaterar de andra två.

Egenskapen RadioButton.GroupName ignoreras. Gruppen skapas av kontrollen RadioButtons.

Definiera flera kolumner

Som standardinställning ordnar RadioButtons-kontrollen sina knappar lodrätt i en enda kolumn. Du kan ange egenskapen MaxColumns så att kontrollen ordnar alternativknapparna i flera kolumner. (När du gör detta, läggs de ut i kolumnordning, där objekten fylls uppifrån och ned, och sedan från vänster till höger.)

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

Alternativknappar i två grupper med tre kolumner

Tips

Om du vill ordna objekt på en enda vågrät rad anger du MaxColumns lika med antalet objekt i gruppen.

Skapa en egen RadioButton-grupp

Viktig

Vi rekommenderar att du använder kontrollen RadioButtons för att gruppera RadioButton element.

Alternativknappar fungerar i grupper. Du kan gruppera enskilda RadioButton-kontroller på något av två sätt:

  • Placera dem i samma överordnade behållare.
  • Ange egenskapen GroupName på varje radioknapp till samma värde.

I det här exemplet grupperas den första gruppen med alternativknappar implicit när de är i samma stackpanel. Den andra gruppen är uppdelad mellan två stackpaneler, så GroupName används för att uttryckligen gruppera dem i en enda grupp.

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

Dessa två grupper av RadioButton kontroller ser ut så här:

Alternativknappar i två grupper

Radioknappstillstånd

En alternativknapp har två tillstånd: vald eller avvald. När en alternativknapp har valts är dess egenskap IsCheckedtrue. När en alternativknapp avmarkeras, är dess IsChecked-egenskap false. En alternativknapp kan avmarkeras om en användare väljer en annan alternativknapp i samma grupp, men det går inte att avmarkera om användaren väljer den igen. Du kan dock programmatiskt rensa en alternativknapp genom att ställa in dess IsChecked-egenskap till false.

Visuella objekt att tänka på

Standardavståndet för enskilda RadioButton kontroller skiljer sig från avståndet som tillhandahålls av en RadioButtons grupp. Om du vill använda RadioButtons avstånd för enskilda RadioButton kontroller använder du ett Margin värde för 0,0,7,3, som visas här.

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

Följande bilder visar det önskade avståndet mellan alternativknapparna i en grupp.

Bild som visar en uppsättning alternativknappar, ordnade lodrätt

Bild som visar riktlinjer för avstånd mellan radioknappar

Anteckning

Om du använder en WinUI RadioButtons-kontroll är avståndet, marginalerna och orienteringen redan optimerade.

UWP och WinUI 2

Viktig

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

RadioButtons-kontrollen för UWP-appar ingår som en del av WinUI 2. Mer information, inklusive installationsinstruktioner, finns i WinUI 2. API:er för dessa kontroller finns i namnrymderna Windows.UI.Xaml.Controls och Microsoft.UI.Xaml.Controls .

Det finns två sätt att skapa alternativknappgrupper.

  • Från och med WinUI 2.3 rekommenderar vi RadioButtons-kontrollen . Den här kontrollen förenklar layouten, hanterar tangentbordsnavigering och hjälpmedel och stöder bindning till en datakälla.
  • Du kan använda grupper med enskilda RadioButton-kontroller . Om din app inte använder WinUI 2.3 eller senare är detta det enda alternativet.

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller.

Om du vill använda koden i den här artikeln med WinUI 2 använder du ett alias i XAML (vi använder muxc) för att representera Api:erna för Windows UI-bibliotek som ingår i projektet. Mer information finns i Komma igång med WinUI 2 .

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

<muxc:RadioButtons />