Barra selettore
Una barra selettore consente a un utente di passare da un numero ridotto di set o visualizzazioni di dati diversi. È possibile selezionare solo un elemento alla volta.
Quando un utente seleziona un elemento nella barra del selettore, la visualizzazione viene in genere modificata in base a:
- spostamento tra pagine diverse nell'app.
- modifica dei dati visualizzati in un controllo raccolta.
La barra selettore è un controllo leggero che supporta un'icona e un testo. È progettato per presentare un numero limitato di opzioni in modo da non ridisporre gli elementi per adattarsi alle diverse dimensioni della finestra.
È il controllo giusto?
Usare un controllo SelectorBar quando si desidera consentire a un utente di spostarsi tra un numero limitato di visualizzazioni o pagine e può essere selezionata solo un'opzione alla volta.
Alcuni esempi includono:
- Passaggio tra le pagine "Recenti", "Condiviso" e "Preferiti", in cui ogni pagina visualizza un elenco univoco di contenuto.
- Passaggio tra le visualizzazioni Tutti", "Non letti", "Contrassegnati" e "Urgenti", in cui ogni visualizzazione visualizza un elenco filtrato univoco di elementi di posta elettronica.
Scenari per l'uso di un controllo diverso
Esistono alcuni scenari in cui potrebbe essere più appropriato utilizzare un altro controllo.
- Usare NavigationView quando è necessario uno spostamento coerente e di primo livello dell'app che si adatta alle diverse dimensioni della finestra.
- Usare TabView quando l'utente deve essere in grado di aprire, chiudere, riorganizzare o rimuovere nuove visualizzazioni del contenuto.
- Usare PipsPager quando è necessaria una paginazione regolare di una singola vista dati.
- Usare RadioButtons quando un'opzione non è selezionata per impostazione predefinita e il contesto non è correlato allo spostamento tra le pagine.
Piattaforma UWP e WinUI 2
Importante
Il controllo SelectorBar non è disponibile per UWP e WinUI 2. Per più alternative, consultare la sezione NavigationView o TabView.
Creare un controllo SelectorBar
- API importanti: Classe SelectorBar, Proprietà elementi, Evento SelectionChanged, Classe SelectorBarItem
L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub
Questo XAML crea un controllo SelectorBar di base con 3 sezioni di contenuto.
<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>
Viene illustrato come aggiungere un oggetto SelectorBarItem nel codice.
SelectorBarItem newItem = new SelectorBarItem()
{
Text = "New Item",
Icon = new SymbolIcon(Symbol.Add)
};
selectorBar.Items.Add(newItem);
Elementi SelectorBar
È possibile popolare la raccolta Elementi SelectorBar con gli oggetti SelectorBarItem. È possibile farlo direttamente in XAML o nel codice. Poiché è destinato a visualizzare un numero limitato di opzioni, SelectorBar non dispone di una proprietà ItemsSource per l'associazione a una raccolta esterna di elementi.
Contenuto elemento
La classe SelectorBarItem fornisce le proprietà Testo e Icona usate per impostare il contenuto della barra del selettore. È possibile impostare una o entrambe le proprietà; è tuttavia consigliabile impostare la proprietà Text per rendere l'elemento più significativo.
La proprietà Icon accetta un elemento IconElement, in modo da poter usare uno di questi tipi di icona derivati:
Nota
SelectorBarItem eredita la proprietà Child da ItemContainer. È possibile usare questa proprietà per impostare il contenuto, ma non è consigliabile. In questo modo, il set di contenuto non otterrà gli stati di stile e di visualizzazione forniti dal modello di controllo SelectorBarItem.
Selezione degli elementi
È possibile utilizzare la proprietà SelectedItem per ottenere o impostare l'elemento attivo di SelectorBar. Questa operazione viene sincronizzata con la proprietà IsSelected di SelectorBarItem. Se si imposta una delle due proprietà, l'altra verrà aggiornata automaticamente.
Ogni volta che SelectorBar ottiene lo stato attivo e SelectedItem è null, SelectedItem viene impostato automaticamente sulla prima istanza attivabile della raccolta Elementi, se presente.
Ogni volta che l'elemento selezionato viene rimosso dalla raccolta Items, la proprietà SelectedItem viene impostata su null. Se SelectedItem è impostato su null mentre il selettore ha lo stato attivo, SelectorBar non avrà alcun elemento selezionato, ma mantiene lo stato attivo.
Se si imposta SelectedItem su un elemento che non è attualmente presente nella raccolta Items, viene generata un'eccezione.
Non esiste alcuna proprietà SelectedIndex, ma è possibile ottenere l'indice di SelectedItem come segue:
int currentSelectedIndex =
selectorBar.Items.IndexOf(selectorBar.SelectedItem);
Selezione cambiata
Gestire l'evento SelectionChanged per rispondere alla selezione degli utenti e modificare ciò che viene visualizzato all'utente. L'evento SelectionChanged viene generato quando un elemento viene selezionato in uno dei modi seguenti:
- Automazione interfaccia utente
- Stato attivo tabulazione (e viene selezionato un nuovo elemento)
- Spostamento sinistro e destro all'interno di SelectorBar
- Evento toccato tramite mouse o tocco
- Selezione a livello di codice tramite la proprietà SelectorBar.SelectedItem o la proprietà IsSelected di SelectorBarItem.
Quando un utente seleziona un elemento, in genere, si modifica la visualizzazione spostandosi tra pagine diverse nell'app o modificando i dati visualizzati in un controllo raccolta. Esempi di entrambi sono visualizzati qui.
Spostarsi con animazioni di transizione
Suggerimento
Questi esempi sono disponibili nella pagina SelectorBar dell'app Raccolta WinUI. Usare l'app Raccolta WinUI per eseguire e visualizzare il codice completo.
In questo esempio, viene illustrata la gestione dell'evento SelectionChanged per spostarsi tra pagine diverse. Lo spostamento usa SlideNavigationTransitionEffect per far scorrere le pagine da sinistra o destra, in base alle esigenze.
<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;
}
Visualizzare raccolte diverse in itemsView
In questo esempio, viene illustrato come modificare l'origine dati di un controllo ItemsView quando l'utente seleziona un'opzione in SelectorBar.
<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;
}
}
Scaricare il codice di esempio
- Esempio di Raccolta WinUI: visualizza tutti i controlli XAML in un formato interattivo.
