Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
A választógombok, más néven opciógombok, lehetővé teszik a felhasználók számára, hogy két vagy több kölcsönösen kizáró, de kapcsolódó lehetőség közül egyet válasszanak. A választógombok mindig csoportokban használatosak, és minden egyes választást a csoport egy választógombja képvisel.
Az alapértelmezett állapotban nincs választógomb a RadioButtons csoportban. Vagyis minden választógomb ki van ürítve. Miután azonban a felhasználó egyszer kiválasztott egy választógombot, nem tudja a kijelölést törölni, hogy visszaállítsa a csoportot az eredeti törölt állapotába.
A RadioButtons-csoport egyedi viselkedése megkülönbözteti a jelölőnégyzetektől, amelyek támogatják a többes kijelölést és a kijelölés megszüntetését, illetve törlést.
Ez a megfelelő vezérlő?
A választógombokkal két vagy több egymást kölcsönösen kizáró lehetőség közül választhatnak a felhasználók.
A választógombokat akkor használja, ha a felhasználóknak minden lehetőséget látniuk kell a kijelölés előtt. A választógombok az összes lehetőséget egyformán hangsúlyozzák, ami azt jelenti, hogy egyes lehetőségek a szükségesnél vagy a kívántnál nagyobb figyelmet vonhatnak le.
Ha az összes lehetőség nem érdemel egyenlő figyelmet, fontolja meg más vezérlők használatát. Ha például egyetlen legjobb lehetőséget szeretne javasolni a legtöbb felhasználó számára, és a legtöbb helyzetben, használjon kombinált listát , hogy alapértelmezett beállításként a legjobb lehetőséget jelenítse meg.
Ha csak két lehetséges lehetőség van, amelyek egyértelműen kifejezhetők egyetlen bináris választási lehetőségként, például be-/ki- vagy igen/nem, egyesítse őket egyetlen jelölőnégyzetbe vagy kapcsolókapcsoló-vezérlőbe . Használja például az "Elfogadom" jelölőnégyzetet két választógomb helyett az "Elfogadom" és a "Nem értek egyet".
Ne használjon két választógombot egyetlen bináris választáshoz:
Ehelyett jelölje be a következő jelölőnégyzetet:
Ha a felhasználók több lehetőséget is kijelölhetnek, jelölje be a jelölőnégyzeteket.
Ha a felhasználók beállításai értéktartományon belül vannak (például 10, 20, 30, ... 100) használjon csúszkavezérlőt .
Ha nyolcnál több lehetőség közül választhat, használjon kombinált listát.
Ha az elérhető lehetőségek egy alkalmazás aktuális környezetén alapulnak, vagy más módon dinamikusan változhatnak, használjon listavezérlőt.
Recommendations
- Győződjön meg arról, hogy a választógomb-készlet célja és aktuális állapota legyen kifejezett.
- Korlátozza a választógomb szövegfeliratát egyetlen sorra.
- Ha a szövegcímke dinamikus, gondolja át, hogy a gomb hogyan méreteződik át automatikusan, és mi történik a körülötte lévő vizualizációkkal.
- Használja az alapértelmezett betűtípust, hacsak a márka irányelvei másként nem rendelkeznek.
- Ne tegyen két RadioButtons csoportot egymás mellé. Ha két RadioButtons-csoport van egymás mellett, a felhasználók nehezen tudják meghatározni, hogy melyik gomb melyik csoporthoz tartozik.
RadioButtons – áttekintés
RadioButtons vs RadioButton
Kétféleképpen lehet rádiógomb csoportokat létrehozni: a RadioButtons és a RadioButton segítségével.
- Javasoljuk a RadioButtons vezérlő használatát . Ez a vezérlő leegyszerűsíti az elrendezést, kezeli a billentyűzet navigációt és az akadálymentességet, és támogatja az adatforráshoz való kötést.
- Használhatja az egyes RadioButton-vezérlők csoportjait .
A billentyűzethozzáférés és a navigációs viselkedés optimalizálva lett a RadioButtons vezérlőben. Ezek a fejlesztések megkönnyítik és felgyorsítják mind az akadálymentesség, mind a billentyűzetet használó haladó felhasználók számára a lehetőségek listáján való gyorsabb és könnyebb navigációt.
Ezen fejlesztések mellett a RadioButtons-csoportok egyes választógombjainak alapértelmezett vizuális elrendezése automatikus tájolással, térköz- és margóbeállításokkal lett optimalizálva. Ez az optimalizálás kiküszöböli a tulajdonságok megadásának követelményét, mivel előfordulhat, hogy meg kell adnia ezeket, amikor egy primitívebb csoportosítási vezérlőt használ, például StackPanel vagy Grid.
RadioButtons-csoport navigálása
A RadioButtons vezérlő speciális navigációs viselkedéssel rendelkezik, amellyel a billentyűzet felhasználói gyorsabban és könnyebben navigálhatnak a listában.
Billentyűzetfókusz
A RadioButtons vezérlő két állapotot támogat:
- Nincs választógomb kijelölve
- Egy választógomb van kiválasztva
A következő szakaszok az egyes állapotokban lévő vezérlő fókuszviselkedését ismertetik.
Nincs választógomb kijelölve
Ha nincs választógomb kijelölve, a listában az első választógomb lesz a fókuszban.
Megjegyzés:
Nincs kijelölve az az elem, amely a tabulátor fókuszát fogadja a kezdeti tabulátornavigációból.
Lista tabulátorfókusz nélkül, kijelölés nélkül
Lista a kezdeti tabulátorfókusszal, kijelölés nélkül
Egy választógomb van kiválasztva
Amikor a felhasználó a Tab billentyűvel lép be a listába, ahol már ki van választva egy választógomb, a kiválasztott választógomb kerül a fókuszba.
Tabulátorfókusz nélküli lista
Lista a kezdeti tabulátorfókuszsal
Billentyűzet-navigáció
Az általános billentyűzet-navigációs viselkedésről további információt a Billentyűzet interakciói – Navigáció című témakörben talál.
Ha egy RadioButtons csoport egyik elemének már van fókusza, a felhasználó használhatja a nyílbillentyűket a csoport elemei közötti "belső navigációhoz". A Fel és Le nyílbillentyűk az "XAML jelölőnyelvben" meghatározott "következő" vagy "előző" logikai elemre lépnek. A Balra és Jobbra nyílbillentyűk térbelileg mozognak.
Navigáció egyoszlopos vagy egysoros elrendezésben
Egyoszlopos vagy egysoros elrendezésben a billentyűzet-navigáció a következő viselkedést eredményezi:
Egyoszlopos
A Fel és a Le nyílbillentyű az elemek között mozog.
A Balra és a Jobbra nyílbillentyűk nem tesznek semmit.
Egysoros
A Balra és a Fel nyílbillentyű az előző elemre, a Jobbra és a Le nyílbillentyű pedig a következő elemre kerül.
Navigáció többoszlopos, többsoros elrendezésekben
Többoszlopos, többsoros rácskiosztás esetén a billentyűzetes navigáció a következő viselkedést eredményezi:
Balra/Jobbra nyílbillentyűk
A Balra és a Jobbra nyílbillentyűk vízszintesen mozgatják a fókuszt egy sor elemei között.
Ha a fókusz egy oszlop utolsó elemére kerül, és a Jobbra vagy a Balra nyílbillentyűt lenyomja, a fókusz a következő vagy az előző oszlop utolsó elemére kerül (ha van ilyen).
Fel/Le nyílbillentyűk
A Fel és a Le nyílbillentyű függőlegesen mozgatja a fókuszt egy oszlop elemei között.
Ha a fókusz egy oszlop utolsó elemére kerül, és a Le nyílbillentyűt lenyomja, a fókusz a következő oszlop első elemére kerül (ha van ilyen). Ha a fókusz az oszlop első elemén van, és a Fel nyílbillentyűt lenyomja, a fókusz az előző oszlop utolsó elemére kerül (ha van ilyen)
További információ: Billentyűzettel kapcsolatos interakciók.
Csomagolás
A RadioButtons csoport nem tördeli a fókuszt az első sorból vagy oszlopból az utolsóba, illetve az utolsó sorból vagy oszlopból az elsőbe. Ennek az az oka, hogy amikor a felhasználók képernyőolvasót használnak, a határérzék és a kezdet és a vég egyértelmű jelzése elveszik, ami megnehezíti a látássérült felhasználók számára a listában való navigálást.
A RadioButtons vezérlő nem támogatja az enumerálást sem, mert a vezérlő ésszerű számú elemet kíván tartalmazni (lásd : Ez a megfelelő vezérlőelem?).
A kijelölés a fókuszt követi
Amikor a billentyűzettel navigál egy RadioButtons csoport elemei között, amikor a fókusz egyik elemről a másikra kerül, az újonnan szűrt elem ki lesz jelölve, és a korábban szűrt elem törlődik.
Billentyűzet-navigáció előtt
Fókusz és kijelölés a billentyűzet navigációja előtt.
A billentyűzet navigációja után
Fókusz és kijelölés a billentyűzet navigációja után, ahol a Le nyílbillentyű a 3. választógombra helyezi a fókuszt, kijelöli, és törli a 2. választógombot.
A ctrl+nyílbillentyűkkel a kijelölés módosítása nélkül is áthelyezheti a fókuszt a navigáláshoz. A fókusz áthelyezése után a szóközbillentyű használatával kiválaszthatja a fókuszt tartalmazó elemet.
Navigálás játékpaddal és távvezérléssel
Ha játékpanelt vagy távvezérlőt használ a választógombok közötti mozgáshoz, a "kijelölés a fókuszt követi" viselkedés le van tiltva, és a felhasználónak az "A" gombbal kell kiválasztania a jelenleg fókuszban lévő választógombot.
Akadálymentességi viselkedés
Az alábbi táblázat azt ismerteti, hogy a Narrátor hogyan kezeli a RadioButtons csoportot és mit közöl. Ez a viselkedés attól függ, hogy a felhasználó hogyan állította be a Narrátor részletes beállításait.
| Tevékenység | A Narrátor közleménye |
|---|---|
| A fókusz egy kijelölt elemre kerül | "name, Rádiógomb, kiválasztva, x a N-ből" |
| A fókusz nem kijelölt elemre kerül (Ha Ctrl-nyílbillentyűkkel vagy Xbox játékpaddal navigál, amely azt jelzi, hogy a kijelölés nem követi a fókuszt.) |
"name, Rádiógomb, nincs kiválasztva, x a N" |
Megjegyzés:
A név, amit a Narrátor bejelent minden egyes elemhez, az AutomationProperties.Name hozzárendelt tulajdonság értéke, ha elérhető az elem számára; ellenkező esetben az elem ToString metódusa által visszaadott érték.
x az aktuális elem száma. N a csoport elemeinek teljes száma.
WinUI 3 RadioButtons-csoport létrehozása
![]()
A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.
A RadioButtons vezérlő az ItemsControlhoz hasonló tartalommodellt használ. Ez azt jelenti, hogy:
- Töltse fel úgy, hogy közvetlenül az Elemek gyűjteménybe ad hozzá elemeket, vagy adatokat köt az ItemsSource tulajdonsághoz.
- A SelectedIndex vagy a SelectedItem tulajdonsággal lekérheti és beállíthatja, hogy melyik beállítás van kiválasztva.
- A SelectionChanged esemény kezelése a beállítás kiválasztásakor végrehajtandó művelet végrehajtásához.
Itt egy egyszerű RadioButtons vezérlőelemet deklarál három lehetőséggel. A Fejléc tulajdonság úgy van beállítva, hogy címkét adjon a csoportnak, és a SelectedIndex tulajdonság alapértelmezett beállításként van beállítva.
<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>
Az eredmény így néz ki:
Ha meg szeretne tenni egy műveletet, amikor a felhasználó kiválaszt egy lehetőséget, kezelje a SelectionChanged eseményt . Itt módosíthatja a "ExampleBorder" () nevű <Border x:Name="ExampleBorder" Width="100" Height="100"/> háttérszínét.
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;
}
}
}
Jótanács
A kijelölt elemet a SelectionChangedEventArgs.AddedItems tulajdonságból is lekérheti. A 0. indexben csak egy elem lesz kijelölve, így a kijelölt elem a következőképpen jelenhet meg: string colorName = e.AddedItems[0] as string;.
Kijelölési állapotok
A választógombnak két állapota van: kiválasztva vagy törölve. Ha egy beállítás ki van jelölve egy RadioButtons csoportban, az értékét a SelectedItem tulajdonságból, a gyűjteményben pedig a SelectedIndex tulajdonságból szerezheti be. A választógombok törölhetők, ha egy felhasználó egy másik választógombot jelöl ki ugyanabban a csoportban, de nem törölhető, ha a felhasználó ismét kiválasztja. A választógombok csoportját azonban programozott módon törölheti azáltal, hogy a SelectedItem = nullvagy SelectedIndex = -1értéket állítja be. (Ha a SelectedIndex a Items gyűjtemény tartományán kívül eső értékre állítja, az nem eredményez kijelölést.)
Rádiógombok tartalma
Az előző példában egyszerű sztringekkel kitöltötte a RadioButtons vezérlőelemet. A vezérlő megadta a választógombokat, és mindegyikhez a karaktersorokat használta címkeként.
A RadioButtons vezérlőelemet azonban bármilyen objektummal feltöltheti. Általában azt szeretné, hogy az objektum szöveges címkeként használható sztring-ábrázolásokat biztosítson. Bizonyos esetekben a kép megfelelő lehet a szöveg helyett.
Itt a SymbolIcon elemeket használjuk a vezérlő feltöltéséhez.
<RadioButtons Header="Select an icon option:">
<SymbolIcon Symbol="Back"/>
<SymbolIcon Symbol="Attach"/>
<SymbolIcon Symbol="HangUp"/>
<SymbolIcon Symbol="FullScreen"/>
</RadioButtons>
Az elemeket az egyes RadioButton-vezérlőkkel is feltöltheti RadioButtons . Ez egy különleges eset, amelyet később tárgyalunk. Lásd: RadioButton-vezérlők a RadioButtons csoportban.
Az objektumok használatának egyik előnye, hogy az RadioButtons vezérlőelemet az adatmodell egy egyéni típusához kötheti. A következő szakasz ezt mutatja be.
Adatkötés
A RadioButtons vezérlő támogatja az ItemsSource tulajdonsághoz való adatkötést. Ez a példa bemutatja, hogyan kötheti a vezérlőt egy egyéni adatforráshoz. A példa megjelenése és működése megegyezik az előző háttérszín-példával, de itt a színkefék az adatmodellben vannak tárolva ahelyett, hogy az SelectionChanged eseménykezelőben lettek létrehozva.
<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 vezérlők a RadioButtons csoportban
Az elemeket egyéni RadioButton-vezérlőkkel is feltöltheti RadioButtons . Előfordulhat, hogy hozzáférést szeretne bizonyos tulajdonságokhoz, például AutomationProperties.Name; vagy rendelkezik meglévő RadioButton kóddal, de szeretné kihasználni a RadioButtons elrendezését és navigációját.
<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>
Ha RadioButton vezérlőelemeket használ egy RadioButtons csoportban, a RadioButtons vezérlőelem tudja, hogyan kell bemutatni a RadioButton, így nem lesz két kijelölési kör.
Vannak azonban olyan viselkedések, amelyekről tisztában kell lennie. Javasoljuk, hogy az ütközések elkerülése érdekében az egyes vezérlőkön vagy a RadioButtons-on kezelje az állapotokat és eseményeket, de ne mindkettőn.
Ez a táblázat a kapcsolódó eseményeket és tulajdonságokat jeleníti meg mindkét vezérlőn.
| RadioButton | Rádiógombok |
|---|---|
| Bejelölve, Nincs bejelölve, Kattintás | KiválasztásVáltozott |
| Ellenőrzött | SelectedItem, SelectedIndex |
Ha egyéni RadioButton(például Checked vagy Unchecked) eseményeket kezel, és a RadioButtons.SelectionChanged eseményt is, mindkét esemény aktiválódik. Először a RadioButton esemény következik be, majd a RadioButtons.SelectionChanged esemény következik be, ami ütközéseket okozhat.
A IsChecked, SelectedItemés SelectedIndex tulajdonságok szinkronizálva maradnak. Az egyik tulajdonság módosítása frissíti a másik kettőt.
A RadioButton.GroupName tulajdonság figyelmen kívül lesz hagyva. A csoportot a RadioButtons vezérlőelem hozza létre.
Több oszlop definiálása
Alapértelmezés szerint a RadioButtons vezérlő függőlegesen, egyetlen oszlopban rendezi el a választógombokat. Beállíthatja a MaxColumns tulajdonságot, hogy a vezérlő több oszlopban rendezze el a választógombokat. (Ha ezt teszi, a rendszer oszlop-fő sorrendben helyezi el őket, ahol az elemek felülről lefelé, majd balról jobbra töltődnek be.)
<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>
Jótanács
Ha az elemeket egyetlen vízszintes sorba szeretné rendezni, állítsa MaxColumns egyenlőnek a csoport elemeinek számával.
Saját RadioButton-csoport létrehozása
Fontos
Javasoljuk, hogy a RadioButtons vezérlővel csoportosítsa RadioButton elemeket.
A választógombok csoportokban működnek. Az egyes RadioButton-vezérlőket kétféleképpen csoportosíthatja:
- Helyezze őket ugyanabba a szülőtárolóba.
- Állítsa az egyes választógombok GroupName tulajdonságát ugyanarra az értékre.
Ebben a példában a választógombok első csoportja implicit módon csoportosítva van, mivel ugyanabban a stackpanelen van. A második csoport két verempanel között oszlik meg, így GroupName használatával explicit módon csoportosíthatja őket egyetlen csoportba.
<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;
}
}
}
A RadioButton vezérlők e két csoportja a következőképpen néz ki:
A választógomb állapota
A választógombnak két állapota van: kiválasztva vagy törölve. Ha egy választógomb ki van jelölve, annak IsChecked tulajdonsága igaz.true A rádiógomb törlésekor a IsChecked tulajdonsága a falselesz. A választógombok törölhetők, ha egy felhasználó egy másik választógombot jelöl ki ugyanabban a csoportban, de nem törölhető, ha a felhasználó ismét kiválasztja. Azonban törölheti a választógombot programozott módon, ha annak IsChecked tulajdonságát falseértékre állítja.
Megfontolandó vizualizációk
Az egyes RadioButton vezérlőelemek alapértelmezett térköze eltér a RadioButtons csoport által biztosított térközökétől. Ha a RadioButtons térközt az egyes RadioButton vezérlőkre szeretné alkalmazni, használja a Margin0,0,7,3értékét, ahogyan az itt látható.
<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>
Az alábbi képeken a választógombok preferált elrendezése látható egy csoporton belül.
Megjegyzés:
WinUI RadioButtons vezérlőelem használata esetén a térköz, a margók és a tájolás már optimalizálva van.
Kapcsolódó témakörök
Windows developer