feat: Add SelectorBar control#1741
Open
A-Words wants to merge 7 commits into
Open
Conversation
Add WinUI 3 SelectorBar control for WPF, a lightweight control that
lets users switch between a small number of different views or data sets.
New files:
- SelectorBar.cs: Main control derived from ListBox with single selection
enforcement, keyboard navigation (Left/Right/Home/End), and a typed
SelectionChanged event.
- SelectorBarItem.cs: Item container with Text (string) and Icon
(IconElement) dependency properties.
- SelectorBarSelectionChangedEventArgs.cs: Typed event args for
selection changes.
- SelectorBar.xaml: Fluent Design styles matching WinUI 3 source:
- Hover/Pressed only change foreground color (background stays transparent)
- Selection indicator is a small centered pill (16x3px) using Opacity
(not Visibility) so content never shifts on selection
- Padding, spacing and theme resources aligned with WinUI 3
Add a SelectorBar demo page under the Navigation category, mirroring the structure of other control pages (TabControl, RadioButton). A SelectorBar with text+icon items drives a content area that updates on selection via two-way SelectedIndex binding. - Add SelectorBarPage + SelectorBarViewModel - Register "SelectorBar" in the Navigation sidebar (MainWindowViewModel) - No Documentation button; HeaderText "Standard SelectorBar."
Mirror WinUI 3's PART_SelectionVisual for the selection indicator: - Border -> Rectangle with RadiusX=0.5 / RadiusY=1 - Width 16 -> 4 base; ScaleTransform animates ScaleX 1->4 on select (167ms, KeySpline 0,0,0,1) -> 16px final, centered via RenderTransform - Opacity 0->1 animated in; instant snap back on deselect (no exit anim) - Disabled trigger: Background -> Fill
Mirror WinUI 3 SelectorBar::OnGotFocus: when the control receives focus with no selection (or a non-focusable selected item), select the first focusable item so the pill appears and SelectionChanged fires. Without this, Tab-focusing an uninitialized SelectorBar (SelectedIndex == -1) left no selection and raised no event.
Left/Right were fixed-mapped to -1/+1 index steps, so in a RightToLeft layout (items visually reversed) pressing Right moved visually left. Treat the key as a visual direction and invert the index delta inside MoveSelection when FlowDirection == RightToLeft. The no-selection fallback stays anchored to the visual start/end (Right -> first, Left -> last) in both directions; LTR behavior is unchanged.
IsSelectableIndex only checked IsEnabled, so an item with Focusable=False or Visibility=Collapsed could still be selected on first focus and during arrow navigation (e.g. SelectedIndex became 0 for a non-focusable first item). Add an IsFocusable helper checking IsEnabled && Focusable && IsVisible (WPF's focusability triad, mirroring WinUI's Visibility + IsEnabled + IsTabStop - Focusable is WPF's focus gate; WPF's IsTabStop only governs tab order and is intentionally not required). Applied to both the direct-item and data-bound branches, so OnGotFocus, MoveSelection, and SelectFirst/Last all skip non-focusable items.
github-actions
Bot
added
controls
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull request type
Please check the type of change your PR introduces:
What is the current behavior?
WPF UI does not provide a SelectorBar control for switching between a small number of views.
Issue Number: #1317
What is the new behavior?
SelectorBarandSelectorBarItem, styled after the WinUI 3 SelectorBar.Other information
The control styling, selection indicator, focus behavior, and keyboard interaction follow the corresponding WinUI 3 control.