Anteckning
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
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.
Ä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.
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.
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:
Använd en kryssruta i stället:
När användare kan välja flera alternativ använder du kryssrutorna .
När användarnas alternativ ligger inom ett värdeintervall (till exempel 10, 20, 30, ... 100), använd en skjutreglagekontroll .
Om det finns fler än åtta alternativ använder du en kombinationsruta.
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.
Navigera i en RadioButtons-grupp
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 med inledande flikfokus, ingen markering
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 med inledande flikfokus
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.
Navigering i layouter med en kolumn eller en rad
I en layout med en kolumn eller en rad resulterar tangentbordsnavigering i följande beteende:
Enskild kolumn
Uppåtpilen och nedåtpilen flyttas mellan objekt.
vänsterpilen och högerpilen gör ingenting.
Enskild 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.
Navigering i layouter med flera kolumner och flera rader
I en rutnätslayout med flera kolumner och flera rader resulterar tangentbordsnavigering i det här beteendet:
Vänster-/högerpiltangenter
Piltangenterna Vänster och Höger flyttar fokus vågrätt mellan objekt i en rad.
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
Piltangenterna Uppåt och Nedåt flyttar fokus lodrätt mellan objekt 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
Fokus och val före tangentbordsnavigering.
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.
Navigera med spelplatta och fjärrstyrning
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:
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 = null
eller 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>
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 Unchecked
och ä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
, SelectedItem
och 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>
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:
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.
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 .
- UWP-API:er: RadioButton-klass, egenskapen IsChecked, Markerad händelse
- WinUI 2 Apis: RadioButtons-klass, SelectedItem-egenskap, SelectedIndex-egenskap, SelectionChanged-händelse
- Öppna WinUI 2-galleriappen och se RadioButton i praktiken. WinUI 2-galleriappen innehåller interaktiva exempel på de flesta WinUI 2-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub.
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 />
Relaterade ämnen
Windows developer