Választósáv

A választósáv lehetővé teszi, hogy a felhasználó kis számú különböző adatkészlet vagy nézet között váltson. Egyszerre egy elem kijelölhető.

Amikor egy felhasználó kiválaszt egy elemet a választósávon, a nézetet általában a következők szerint módosíthatja:

• navigálás az alkalmazás különböző oldalai között.
• a gyűjteményvezérlőben megjelenő adatok módosítása.

A választósáv egy egyszerű vezérlőelem, amely egy ikont és egy szöveget támogat. Korlátozott számú lehetőséget kíván megjeleníteni, hogy ne rendezzen át elemeket a különböző ablakméretekhez való igazodás érdekében.

Ez a megfelelő vezérlő?

Választósávot akkor használjon, ha lehetővé szeretné tenni, hogy a felhasználó csak korlátozott számú nézet vagy oldal között navigáljon, és egyszerre csak egy lehetőség választható ki.

Néhány példa:

• Váltás a "Legutóbbi", a "Megosztott" és a "Kedvencek" lapok között, ahol minden oldal egyedi tartalomlistát jelenít meg.
• Váltás az "Összes", az "Olvasatlan", a "Megjelölt" és a "Sürgős" nézet között, ahol minden nézet egy egyedileg szűrt e-mail-listát jelenít meg.

Mikor érdemes másik vezérlőt használni?

Vannak olyan helyzetek, amikor egy másik vezérlő használata megfelelőbb lehet.

• Használja a NavigationView-t , ha konzisztens, felső szintű alkalmazásnavigációra van szüksége, amely alkalmazkodik a különböző ablakméretekhez.
• Akkor használja a TabView-t , ha a felhasználónak képesnek kell lennie a tartalom új nézeteinek megnyitására, bezárására, átrendezésére vagy levágására.
• Akkor használja a PipsPagert , ha egyetlen adatnézet rendszeres lapozására van szüksége.
• Ha egy beállítás nincs alapértelmezés szerint kiválasztva, és a környezet nem kapcsolódik az oldalnavigációhoz, használja a RadioButtons parancsot.

Választósáv vezérlőelem létrehozása

• Fontos API-k: SelectorBar osztály, Items tulajdonság, SelectionChanged esemény, SelectorBarItem osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a választósávot működés közben

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.

Ez az XAML egy alapszintű választósáv-vezérlőt hoz létre 3 tartalomszakaszsal.

<SelectorBar x:Name="SelectorBar">
    <SelectorBarItem x:Name="SelectorBarItemRecent" 
                     Text="Recent" Icon="Clock"/>
    <SelectorBarItem x:Name="SelectorBarItemShared" 
                     Text="Shared" Icon="Share"/>
    <SelectorBarItem x:Name="SelectorBarItemFavorites" 
                     Text="Favorites" Icon="Favorite"/>
</SelectorBar>

Ez azt mutatja be, hogyan vehet fel SelectorBarItem-et a kódba.

SelectorBarItem newItem = new SelectorBarItem()
{
    Text = "New Item",
    Icon = new SymbolIcon(Symbol.Add)
};
selectorBar.Items.Add(newItem);

Választó sáv elemek

A SelectorBar Items gyűjteményt SelectorBarItem objektumokkal tölti fel. Ezt közvetlenül az XAML-ben vagy kódban teheti meg. Mivel korlátozott számú beállítás megjelenítésére szolgál, a SelectorBar nem rendelkezik ItemsSource olyan tulajdonságmal, amely külső elemgyűjteményhez kötést biztosít.

Elem tartalma

A SelectorBarItem osztály a választósáv tartalmának beállításához használt szöveg - és ikontulajdonságokat tartalmazza. Beállíthat egy vagy mindkét tulajdonságot; Javasoljuk azonban, hogy állítsa be a Text tulajdonságot, hogy az az elem tartalmasabb legyen.

A Icon tulajdonság egy IconElement tulajdonságot használ, így az alábbi származtatott ikontípusok bármelyikét használhatja:

• AnimatedIcon
• BitmapIcon
• FontIcon
• IconSourceElement
• ImageIcon (KépIkon)
• PathIcon
• SymbolIcon

Megjegyzés:

A SelectorBarItem örökli a Gyermek tulajdonságot az ItemContainertől. Ezzel a tulajdonságmal beállíthatja a tartalmat, de ezt nem javasoljuk. Az így beállított tartalom nem fogja megkapni a SelectorBarItem vezérlősablon által biztosított stílus- és vizualizációs állapotokat.

Elem kijelölése

A SelectedItem tulajdonság használatával lekérheti vagy beállíthatja a Választósáv aktív elemét. Ez szinkronizálva van a SelectorBarItem IsSelected tulajdonságával. Ha bármelyik tulajdonságot beállítja, a másik automatikusan frissül.

Amikor a Választósáv fókuszba kerül és SelectedItemnull lesz, SelectedItem automatikusan az Elemek gyűjtemény első fókuszálható példányára lesz állítva, ha van ilyen.

Amikor a kijelölt elemet eltávolítja a Items gyűjteményből, a SelectedItem tulajdonság értéke nulla következő lesz: . Ha SelectedItem akkor van beállítva, amikor a Választósáv rendelkezik fókuszban, a Választósávon nem lesz kijelölve egyetlen elem sem, de megtartja a fókuszt.

Amennyiben a SelectedItem gyűjteményben jelenleg nem szereplő elemet állítja be a Items részére, kivétel keletkezik.

Nincs SelectedIndex tulajdonság, de a SelectedItem indexet így kaphatja meg:

int currentSelectedIndex = 
    selectorBar.Items.IndexOf(selectorBar.SelectedItem);

A kijelölés megváltozott

Kezelje a SelectionChanged eseményt , hogy reagáljon a felhasználók kiválasztására, és módosítsa a felhasználó számára megjelenített elemeket. Az SelectionChanged esemény akkor jön létre, ha egy elem az alábbi módokon van kiválasztva:

• Felhasználói felület automatizálás
• Tabulátorfókusz (és ki van jelölve egy új elem)
• Bal és jobb oldali navigáció a választósávon belül
• Leképezett esemény egérrel vagy érintéssel
• Programozott kijelölés (a SelectorBar.SelectedItem tulajdonságon vagy a SelectorBarItem IsSelected tulajdonságán keresztül).

Amikor egy felhasználó kiválaszt egy elemet, általában úgy módosíthatja a nézetet, hogy navigál az alkalmazás különböző lapjai között, vagy módosítja a gyűjteményvezérlőben látható adatokat. Mindkettőre mutatunk példákat.

Navigálás átmeneti animációkkal

Jótanács

Ezeket a példákat a WinUI 3 Katalógus alkalmazás SelectorBar lapján találja. A WinUI 3 Katalógus alkalmazással futtathatja és tekintheti meg a teljes kódot.

Ez a példa a SelectionChanged esemény kezelését mutatja be a különböző lapok közötti navigáláshoz. A navigáció a SlideNavigationTransitionEffect használatával a lapokat balról vagy jobbról is becsúszthatja, ha szükséges.

<SelectorBar x:Name="SelectorBar2" 
             SelectionChanged="SelectorBar2_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPage1" Text="Page1" 
                     IsSelected="True" />
    <SelectorBarItem x:Name="SelectorBarItemPage2" Text="Page2" />
    <SelectorBarItem x:Name="SelectorBarItemPage3" Text="Page3" />
    <SelectorBarItem x:Name="SelectorBarItemPage4" Text="Page4" />
    <SelectorBarItem x:Name="SelectorBarItemPage5" Text="Page5" />
</SelectorBar>

<Frame x:Name="ContentFrame" IsNavigationStackEnabled="False" />

int previousSelectedIndex = 0;

private void SelectorBar2_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    SelectorBarItem selectedItem = sender.SelectedItem;
    int currentSelectedIndex = sender.Items.IndexOf(selectedItem);
    System.Type pageType;

    switch (currentSelectedIndex)
    {
        case 0:
            pageType = typeof(SamplePage1);
            break;
        case 1:
            pageType = typeof(SamplePage2);
            break;
        case 2:
            pageType = typeof(SamplePage3);
            break;
        case 3:
            pageType = typeof(SamplePage4);
            break;
        default:
            pageType = typeof(SamplePage5);
            break;
    }

    var slideNavigationTransitionEffect = 
            currentSelectedIndex - previousSelectedIndex > 0 ? 
                SlideNavigationTransitionEffect.FromRight : 
                SlideNavigationTransitionEffect.FromLeft;

    ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() 
                            { Effect = slideNavigationTransitionEffect });

    previousSelectedIndex = currentSelectedIndex;
}

Különböző gyűjtemények megjelenítése egy ItemsView-ban

Ez a példa bemutatja, hogyan módosíthatja egy ItemsView adatforrását, amikor a felhasználó kiválaszt egy lehetőséget a Választósávon.

<SelectorBar x:Name="SelectorBar3" 
             SelectionChanged="SelectorBar3_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPink" Text="Pink"
                     IsSelected="True"/>
    <SelectorBarItem x:Name="SelectorBarItemPlum" Text="Plum"/>
    <SelectorBarItem x:Name="SelectorBarItemPowderBlue" Text="PowderBlue"/>
</SelectorBar>

<ItemsView x:Name="ItemsView3" 
           ItemTemplate="{StaticResource ColorsTemplate}"/>
    <ItemsView.Layout>
        <UniformGridLayout/>
    </ItemsView.Layout>
</ItemsView/>

private void SelectorBar3_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    if (sender.SelectedItem == SelectorBarItemPink)
    {
        ItemsView3.ItemsSource = PinkColorCollection;
    }
    else if (sender.SelectedItem == SelectorBarItemPlum)
    {
        ItemsView3.ItemsSource = PlumColorCollection;
    }
    else
    {
        ItemsView3.ItemsSource = PowderBlueColorCollection;
    }
}

Kapcsolódó témakörök

• Választósáv osztály
• A navigációs tervezés alapjai