{ "captureMethod": "WPF RenderTargetBitmap", "limitation": "Offscreen WPF captures omit DWM window shadow and Mica or Acrylic backdrop; no shadow has been simulated.", "entries": [ {"kind": "route", "route": "home", "title": "Home", "theme": "light", "state": "default", "file": "home-light.png"}, {"kind": "route", "route": "colors", "title": "Colors", "theme": "light", "state": "default", "file": "colors-light.png"}, {"kind": "route", "route": "icons", "title": "Icons", "theme": "light", "state": "default", "file": "icons-light.png"}, {"kind": "route", "route": "typography", "title": "Typography", "theme": "light", "state": "default", "file": "typography-light.png"}, {"kind": "card", "route": "typography", "title": "Type ramp", "theme": "light", "state": "default", "file": "typography-sample-01-light.png"}, {"kind": "route", "route": "buttons", "title": "Buttons", "theme": "light", "state": "default", "file": "buttons-light.png"}, {"kind": "card", "route": "buttons", "title": "A simple Button with text content.", "theme": "light", "state": "default", "file": "buttons-sample-01-light.png"}, {"kind": "card", "route": "buttons", "title": "A Button with graphical content.", "theme": "light", "state": "default", "file": "buttons-sample-02-light.png"}, {"kind": "card", "route": "buttons", "title": "Built-in appearances applied to Button: Accent for the primary action, Subtle for low-emphasis commands.", "theme": "light", "state": "default", "file": "buttons-sample-03-light.png"}, {"kind": "card", "route": "buttons", "title": "Place icons before or after text when the symbol helps the action scan faster.", "theme": "light", "state": "default", "file": "buttons-sample-04-light.png"}, {"kind": "card", "route": "buttons", "title": "Use HyperlinkButton for lightweight navigation and related secondary actions.", "theme": "light", "state": "default", "file": "buttons-sample-05-light.png"}, {"kind": "card", "route": "buttons", "title": "Use DropDownButton when all available actions live in the flyout.", "theme": "light", "state": "default", "file": "buttons-sample-06-light.png"}, {"kind": "card", "route": "buttons", "title": "Use SplitButton when there is one default action plus alternate actions in the flyout.", "theme": "light", "state": "default", "file": "buttons-sample-07-light.png"}, {"kind": "card", "route": "buttons", "title": "Use RepeatButton when holding the pointer should raise Click repeatedly.", "theme": "light", "state": "default", "file": "buttons-sample-08-light.png"}, {"kind": "card", "route": "buttons", "title": "Use ToggleButton when a command switches a state on or off and should look pressed while active.", "theme": "light", "state": "default", "file": "buttons-sample-09-light.png"}, {"kind": "card", "route": "buttons", "title": "Use ToggleSplitButton when the primary half toggles a state and the flyout chooses which variant of that state to apply.", "theme": "light", "state": "default", "file": "buttons-sample-10-light.png"}, {"kind": "accent", "route": "buttons", "title": "Buttons", "theme": "light", "state": "blue", "file": "buttons-light-accent-blue.png"}, {"kind": "accent", "route": "buttons", "title": "Buttons", "theme": "light", "state": "orange", "file": "buttons-light-accent-orange.png"}, {"kind": "card", "route": "buttons", "title": "A simple Button with text content.", "theme": "light", "state": "disabled", "file": "buttons-sample-01-light-disabled.png"}, {"kind": "route", "route": "selection", "title": "Selection", "theme": "light", "state": "default", "file": "selection-light.png"}, {"kind": "card", "route": "selection", "title": "Use check boxes for independent options. Add three-state only when an indeterminate value has meaning.", "theme": "light", "state": "default", "file": "selection-sample-01-light.png"}, {"kind": "card", "route": "selection", "title": "Use radio buttons when people must choose exactly one option from a visible group.", "theme": "light", "state": "default", "file": "selection-sample-02-light.png"}, {"kind": "card", "route": "selection", "title": "Use toggle switches for settings that take effect immediately.", "theme": "light", "state": "default", "file": "selection-sample-03-light.png"}, {"kind": "card", "route": "selection", "title": "Use rating when a compact ordered preference is more natural than a numeric input.", "theme": "light", "state": "default", "file": "selection-sample-04-light.png"}, {"kind": "card", "route": "selection", "title": "Use a combo box when the choices are useful but do not need to stay visible.", "theme": "light", "state": "default", "file": "selection-sample-05-light.png"}, {"kind": "card", "route": "selection", "title": "Use toggle switches for settings that take effect immediately.", "theme": "light", "state": "toggled", "file": "selection-sample-03-light-toggled.png"}, {"kind": "route", "route": "inputs", "title": "Inputs", "theme": "light", "state": "default", "file": "inputs-light.png"}, {"kind": "card", "route": "inputs", "title": "Use text boxes for short text entry. Add icons, clear buttons, and limits when they clarify the expected input.", "theme": "light", "state": "default", "file": "inputs-sample-01-light.png"}, {"kind": "card", "route": "inputs", "title": "Show helper text for guidance and validation states for committed feedback.", "theme": "light", "state": "default", "file": "inputs-sample-02-light.png"}, {"kind": "card", "route": "inputs", "title": "Use AutoSuggestBox for search and autocomplete: handle TextChanged to filter suggestions and QuerySubmitted to act on the choice.", "theme": "light", "state": "default", "file": "inputs-sample-03-light.png"}, {"kind": "card", "route": "inputs", "title": "Use password boxes for protected text entry, with reveal and strength affordances when appropriate.", "theme": "light", "state": "default", "file": "inputs-sample-04-light.png"}, {"kind": "card", "route": "inputs", "title": "Use number boxes for numeric entry with optional spin buttons, bounds, and supporting descriptions.", "theme": "light", "state": "default", "file": "inputs-sample-05-light.png"}, {"kind": "card", "route": "inputs", "title": "Use sliders when a relative value is easier to choose visually than typing a precise number.", "theme": "light", "state": "default", "file": "inputs-sample-06-light.png"}, {"kind": "card", "route": "inputs", "title": "Use text boxes for short text entry. Add icons, clear buttons, and limits when they clarify the expected input.", "theme": "light", "state": "entered", "file": "inputs-sample-01-light-entered.png"}, {"kind": "route", "route": "forms", "title": "Forms", "theme": "light", "state": "default", "file": "forms-light.png"}, {"kind": "card", "route": "forms", "title": "Use TimePicker for choosing a time from hour, minute, and AM/PM columns in a flyout.", "theme": "light", "state": "default", "file": "forms-sample-01-light.png"}, {"kind": "card", "route": "forms", "title": "Use DatePicker for choosing a date from day, month, and year columns in a flyout.", "theme": "light", "state": "default", "file": "forms-sample-02-light.png"}, {"kind": "card", "route": "forms", "title": "Use ColorPicker for choosing a color from a saturation/value spectrum with a hue slider, alpha, RGB/HSV channel text input, and hex input.", "theme": "light", "state": "default", "file": "forms-sample-03-light.png"}, {"kind": "card", "route": "forms", "title": "Use a compact form for account access, with clear labels and a primary action.", "theme": "light", "state": "default", "file": "forms-sample-04-light.png"}, {"kind": "card", "route": "forms", "title": "Combine contact, shipping, and quantity fields when a form needs several related decisions.", "theme": "light", "state": "default", "file": "forms-sample-05-light.png"}, {"kind": "card", "route": "forms", "title": "Use form controls to edit a small set of preferences and show confirmation after saving.", "theme": "light", "state": "default", "file": "forms-sample-06-light.png"}, {"kind": "route", "route": "data", "title": "Data", "theme": "light", "state": "default", "file": "data-light.png"}, {"kind": "card", "route": "data", "title": "Use ListView for compact single-column collections and richer item layouts.", "theme": "light", "state": "default", "file": "data-sample-01-light.png"}, {"kind": "card", "route": "data", "title": "Set EmptyContent for an intentional no-data state and animate removals when items leave the list.", "theme": "light", "state": "default", "file": "data-sample-02-light.png"}, {"kind": "card", "route": "data", "title": "Use ListBox for compact selection lists; set SelectionMode to Extended to allow selecting multiple items.", "theme": "light", "state": "default", "file": "data-sample-03-light.png"}, {"kind": "card", "route": "data", "title": "Use PersonPicture to represent people and contact status in data-heavy views.", "theme": "light", "state": "default", "file": "data-sample-04-light.png"}, {"kind": "card", "route": "data", "title": "Use Card variants to group related data with different levels of visual emphasis.", "theme": "light", "state": "default", "file": "data-sample-05-light.png"}, {"kind": "card", "route": "data", "title": "Use Image to present pictures with a theme-aware stroke; CornerRadius drives the rounded clip from square to circular.", "theme": "light", "state": "default", "file": "data-sample-06-light.png"}, {"kind": "card", "route": "data", "title": "Set ItemsLayout to Grid when items read better as tiles that wrap across the list; List keeps one item per row.", "theme": "light", "state": "default", "file": "data-sample-07-light.png"}, {"kind": "route", "route": "data-binding", "title": "Data binding", "theme": "light", "state": "default", "file": "data-binding-light.png"}, {"kind": "card", "route": "data-binding", "title": "Add or remove items at runtime. The list updates through INotifyCollectionChanged.", "theme": "light", "state": "default", "file": "data-binding-sample-01-light.png"}, {"kind": "card", "route": "data-binding", "title": "Switch between Single, Multiple, and Extended selection modes.", "theme": "light", "state": "default", "file": "data-binding-sample-02-light.png"}, {"kind": "card", "route": "data-binding", "title": "Use an inline DataTemplate when every item shares the same row shape.", "theme": "light", "state": "default", "file": "data-binding-sample-03-light.png"}, {"kind": "route", "route": "trees", "title": "Trees", "theme": "light", "state": "default", "file": "trees-light.png"}, {"kind": "card", "route": "trees", "title": "Use TreeViewItem nesting for compact folder, outline, or category hierarchies.", "theme": "light", "state": "default", "file": "trees-sample-01-light.png"}, {"kind": "card", "route": "trees", "title": "Handle SelectedItemChanged when selecting a node should update related content.", "theme": "light", "state": "default", "file": "trees-sample-02-light.png"}, {"kind": "card", "route": "trees", "title": "Use multiple selection when people need to select several nodes from the same hierarchy.", "theme": "light", "state": "default", "file": "trees-sample-03-light.png"}, {"kind": "card", "route": "trees", "title": "Set IsExpanded directly, or walk the item collection when a command controls the tree.", "theme": "light", "state": "default", "file": "trees-sample-04-light.png"}, {"kind": "route", "route": "menus", "title": "Menus", "theme": "light", "state": "default", "file": "menus-light.png"}, {"kind": "card", "route": "menus", "title": "Use Menu for persistent command groups with submenus, keyboard cues, separators, and checked states.", "theme": "light", "state": "default", "file": "menus-sample-01-light.png"}, {"kind": "card", "route": "menus", "title": "Use ContextMenu for actions that apply to a selected item or region.", "theme": "light", "state": "default", "file": "menus-sample-02-light.png"}, {"kind": "card", "route": "menus", "title": "Use ToolTip for short hints that clarify icons, disabled commands, or risky actions.", "theme": "light", "state": "default", "file": "menus-sample-03-light.png"}, {"kind": "card", "route": "menus", "title": "Use Flyout for lightweight, light-dismiss popups (details, quick forms, confirmations) anchored to a control.", "theme": "light", "state": "default", "file": "menus-sample-04-light.png"}, {"kind": "card", "route": "menus", "title": "Use ContentDialog for modal prompts that require an explicit choice (confirmations, errors, sign-in).", "theme": "light", "state": "default", "file": "menus-sample-05-light.png"}, {"kind": "card", "route": "menus", "title": "Use TeachingTip for contextual, non-blocking coaching anchored to a UI element.", "theme": "light", "state": "default", "file": "menus-sample-06-light.png"}, {"kind": "card", "route": "menus", "title": "Use CommandBarFlyout for a compact command strip with an overflow menu; commands dismiss the flyout when invoked.", "theme": "light", "state": "default", "file": "menus-sample-07-light.png"}, {"kind": "popup", "route": "menus", "title": "Context menu open", "theme": "light", "state": "open", "file": "menus-context-menu-open-light.png"}, {"kind": "popup", "route": "menus", "title": "Flyout open", "theme": "light", "state": "open", "file": "menus-flyout-open-light.png"}, {"kind": "popup", "route": "menus", "title": "Command bar flyout open", "theme": "light", "state": "open", "file": "menus-command-bar-flyout-open-light.png"}, {"kind": "overlay", "route": "menus", "title": "Content dialog open", "theme": "light", "state": "open", "file": "menus-content-dialog-open-light.png"}, {"kind": "route", "route": "navigation", "title": "Navigation", "theme": "light", "state": "default", "file": "navigation-light.png"}, {"kind": "card", "route": "navigation", "title": "Use a left pane for persistent destinations, with a header and separator to group the items.", "theme": "light", "state": "default", "file": "navigation-sample-01-light.png"}, {"kind": "card", "route": "navigation", "title": "Use top navigation for a small set of peer destinations that should leave the full width for content.", "theme": "light", "state": "default", "file": "navigation-sample-02-light.png"}, {"kind": "card", "route": "navigation", "title": "Use compact mode to preserve space, and enable the back button when the current view can navigate backward.", "theme": "light", "state": "default", "file": "navigation-sample-03-light.png"}, {"kind": "card", "route": "navigation", "title": "Use InfoBadge in NavigationViewItem to call attention to item state without changing the item label.", "theme": "light", "state": "default", "file": "navigation-sample-04-light.png"}, {"kind": "card", "route": "navigation", "title": "Use BreadcrumbBar to show the path to the current location and jump back to any ancestor.", "theme": "light", "state": "default", "file": "navigation-sample-05-light.png"}, {"kind": "card", "route": "navigation", "title": "Use PipsPager for compact page indication and switching, as in carousels and onboarding flows.", "theme": "light", "state": "default", "file": "navigation-sample-06-light.png"}, {"kind": "card", "route": "navigation", "title": "Use SelectorBar to switch between peer views of one page, and SlideNavigationPresenter to slide the view in from the side the selection moved.", "theme": "light", "state": "default", "file": "navigation-sample-07-light.png"}, {"kind": "card", "route": "navigation", "title": "Use PipsPager for compact page indication and switching, as in carousels and onboarding flows.", "theme": "light", "state": "page-selected", "file": "navigation-sample-06-light-page-selected.png"}, {"kind": "route", "route": "tabs", "title": "Tabs", "theme": "light", "state": "default", "file": "tabs-light.png"}, {"kind": "card", "route": "tabs", "title": "Use TabControl for a small set of peer panels that share the same space.", "theme": "light", "state": "default", "file": "tabs-sample-01-light.png"}, {"kind": "card", "route": "tabs", "title": "Use TabStripPlacement to move the tab row when the layout benefits from a side rail.", "theme": "light", "state": "default", "file": "tabs-sample-02-light.png"}, {"kind": "card", "route": "tabs", "title": "Use TabView for document-style tabs with add and close affordances.", "theme": "light", "state": "default", "file": "tabs-sample-03-light.png"}, {"kind": "card", "route": "tabs", "title": "Use TabControl for a small set of peer panels that share the same space.", "theme": "light", "state": "selected", "file": "tabs-sample-01-light-selected.png"}, {"kind": "route", "route": "layout", "title": "Layout", "theme": "light", "state": "default", "file": "layout-light.png"}, {"kind": "card", "route": "layout", "title": "Use Border to frame a region, StackPanel spacing for readable rows, and Separator to divide related content.", "theme": "light", "state": "default", "file": "layout-sample-01-light.png"}, {"kind": "card", "route": "layout", "title": "Use DockPanel when one element should pin to an edge while the remaining content fills the available space.", "theme": "light", "state": "default", "file": "layout-sample-02-light.png"}, {"kind": "card", "route": "layout", "title": "Use Expander for secondary settings that should start collapsed until needed.", "theme": "light", "state": "default", "file": "layout-sample-03-light.png"}, {"kind": "card", "route": "layout", "title": "Use DockPanel inside Expander headers and content when the summary and secondary action need edge alignment.", "theme": "light", "state": "default", "file": "layout-sample-04-light.png"}, {"kind": "card", "route": "layout", "title": "Use SmoothScrollViewer for a constrained list; its Fluence scrollbar shows the scroll position.", "theme": "light", "state": "default", "file": "layout-sample-05-light.png"}, {"kind": "card", "route": "layout", "title": "Use Expander for secondary settings that should start collapsed until needed.", "theme": "light", "state": "expanded", "file": "layout-sample-03-light-expanded.png"}, {"kind": "card", "route": "layout", "title": "Use SmoothScrollViewer for a constrained list; its Fluence scrollbar shows the scroll position.", "theme": "light", "state": "scrolled", "file": "layout-sample-05-light-scrolled.png"}, {"kind": "route", "route": "status", "title": "Status", "theme": "light", "state": "default", "file": "status-light.png"}, {"kind": "card", "route": "status", "title": "Use ProgressBar for measurable work where the current value can be reported.", "theme": "light", "state": "default", "file": "status-sample-01-light.png"}, {"kind": "card", "route": "status", "title": "Use indeterminate mode when work is active but no reliable percentage is available.", "theme": "light", "state": "default", "file": "status-sample-02-light.png"}, {"kind": "card", "route": "status", "title": "Use step progress for ordered tasks where users understand the current milestone.", "theme": "light", "state": "default", "file": "status-sample-03-light.png"}, {"kind": "card", "route": "status", "title": "Use ProgressRing when space is tight or when progress belongs next to compact content.", "theme": "light", "state": "default", "file": "status-sample-04-light.png"}, {"kind": "card", "route": "status", "title": "Use InfoBar for inline messages that explain status, validation, or recoverable outcomes.", "theme": "light", "state": "default", "file": "status-sample-05-light.png"}, {"kind": "card", "route": "status", "title": "Use InfoBar for inline messages that explain status, validation, or recoverable outcomes.", "theme": "light", "state": "dismissed", "file": "status-sample-05-light-dismissed.png"}, {"kind": "route", "route": "accessibility", "title": "Accessibility", "theme": "light", "state": "default", "file": "accessibility-light.png"}, {"kind": "card", "route": "accessibility", "title": "Keyboard focus and explicit tab order.", "theme": "light", "state": "default", "file": "accessibility-sample-01-light.png"}, {"kind": "card", "route": "accessibility", "title": "High contrast remaps Fluence semantic brushes to Windows system colors.", "theme": "light", "state": "default", "file": "accessibility-sample-02-light.png"}, {"kind": "card", "route": "accessibility", "title": "Icon-only buttons expose AutomationProperties.Name for screen readers.", "theme": "light", "state": "default", "file": "accessibility-sample-03-light.png"}, {"kind": "card", "route": "accessibility", "title": "Right-to-left layout mirrors Fluence controls for RTL locales.", "theme": "light", "state": "default", "file": "accessibility-sample-04-light.png"}, {"kind": "card", "route": "accessibility", "title": "InfoBar and TextBox validation use LiveRegionChanged to announce status changes without interrupting the user.", "theme": "light", "state": "default", "file": "accessibility-sample-05-light.png"}, {"kind": "card", "route": "accessibility", "title": "RatingControl supports full keyboard navigation and exposes the RangeValue automation pattern.", "theme": "light", "state": "default", "file": "accessibility-sample-06-light.png"}, {"kind": "route", "route": "settings", "title": "Settings", "theme": "light", "state": "default", "file": "settings-light.png"}, {"kind": "route", "route": "home", "title": "Home", "theme": "dark", "state": "default", "file": "home-dark.png"}, {"kind": "route", "route": "colors", "title": "Colors", "theme": "dark", "state": "default", "file": "colors-dark.png"}, {"kind": "route", "route": "icons", "title": "Icons", "theme": "dark", "state": "default", "file": "icons-dark.png"}, {"kind": "route", "route": "typography", "title": "Typography", "theme": "dark", "state": "default", "file": "typography-dark.png"}, {"kind": "card", "route": "typography", "title": "Type ramp", "theme": "dark", "state": "default", "file": "typography-sample-01-dark.png"}, {"kind": "route", "route": "buttons", "title": "Buttons", "theme": "dark", "state": "default", "file": "buttons-dark.png"}, {"kind": "card", "route": "buttons", "title": "A simple Button with text content.", "theme": "dark", "state": "default", "file": "buttons-sample-01-dark.png"}, {"kind": "card", "route": "buttons", "title": "A Button with graphical content.", "theme": "dark", "state": "default", "file": "buttons-sample-02-dark.png"}, {"kind": "card", "route": "buttons", "title": "Built-in appearances applied to Button: Accent for the primary action, Subtle for low-emphasis commands.", "theme": "dark", "state": "default", "file": "buttons-sample-03-dark.png"}, {"kind": "card", "route": "buttons", "title": "Place icons before or after text when the symbol helps the action scan faster.", "theme": "dark", "state": "default", "file": "buttons-sample-04-dark.png"}, {"kind": "card", "route": "buttons", "title": "Use HyperlinkButton for lightweight navigation and related secondary actions.", "theme": "dark", "state": "default", "file": "buttons-sample-05-dark.png"}, {"kind": "card", "route": "buttons", "title": "Use DropDownButton when all available actions live in the flyout.", "theme": "dark", "state": "default", "file": "buttons-sample-06-dark.png"}, {"kind": "card", "route": "buttons", "title": "Use SplitButton when there is one default action plus alternate actions in the flyout.", "theme": "dark", "state": "default", "file": "buttons-sample-07-dark.png"}, {"kind": "card", "route": "buttons", "title": "Use RepeatButton when holding the pointer should raise Click repeatedly.", "theme": "dark", "state": "default", "file": "buttons-sample-08-dark.png"}, {"kind": "card", "route": "buttons", "title": "Use ToggleButton when a command switches a state on or off and should look pressed while active.", "theme": "dark", "state": "default", "file": "buttons-sample-09-dark.png"}, {"kind": "card", "route": "buttons", "title": "Use ToggleSplitButton when the primary half toggles a state and the flyout chooses which variant of that state to apply.", "theme": "dark", "state": "default", "file": "buttons-sample-10-dark.png"}, {"kind": "card", "route": "buttons", "title": "A simple Button with text content.", "theme": "dark", "state": "disabled", "file": "buttons-sample-01-dark-disabled.png"}, {"kind": "route", "route": "selection", "title": "Selection", "theme": "dark", "state": "default", "file": "selection-dark.png"}, {"kind": "card", "route": "selection", "title": "Use check boxes for independent options. Add three-state only when an indeterminate value has meaning.", "theme": "dark", "state": "default", "file": "selection-sample-01-dark.png"}, {"kind": "card", "route": "selection", "title": "Use radio buttons when people must choose exactly one option from a visible group.", "theme": "dark", "state": "default", "file": "selection-sample-02-dark.png"}, {"kind": "card", "route": "selection", "title": "Use toggle switches for settings that take effect immediately.", "theme": "dark", "state": "default", "file": "selection-sample-03-dark.png"}, {"kind": "card", "route": "selection", "title": "Use rating when a compact ordered preference is more natural than a numeric input.", "theme": "dark", "state": "default", "file": "selection-sample-04-dark.png"}, {"kind": "card", "route": "selection", "title": "Use a combo box when the choices are useful but do not need to stay visible.", "theme": "dark", "state": "default", "file": "selection-sample-05-dark.png"}, {"kind": "card", "route": "selection", "title": "Use toggle switches for settings that take effect immediately.", "theme": "dark", "state": "toggled", "file": "selection-sample-03-dark-toggled.png"}, {"kind": "route", "route": "inputs", "title": "Inputs", "theme": "dark", "state": "default", "file": "inputs-dark.png"}, {"kind": "card", "route": "inputs", "title": "Use text boxes for short text entry. Add icons, clear buttons, and limits when they clarify the expected input.", "theme": "dark", "state": "default", "file": "inputs-sample-01-dark.png"}, {"kind": "card", "route": "inputs", "title": "Show helper text for guidance and validation states for committed feedback.", "theme": "dark", "state": "default", "file": "inputs-sample-02-dark.png"}, {"kind": "card", "route": "inputs", "title": "Use AutoSuggestBox for search and autocomplete: handle TextChanged to filter suggestions and QuerySubmitted to act on the choice.", "theme": "dark", "state": "default", "file": "inputs-sample-03-dark.png"}, {"kind": "card", "route": "inputs", "title": "Use password boxes for protected text entry, with reveal and strength affordances when appropriate.", "theme": "dark", "state": "default", "file": "inputs-sample-04-dark.png"}, {"kind": "card", "route": "inputs", "title": "Use number boxes for numeric entry with optional spin buttons, bounds, and supporting descriptions.", "theme": "dark", "state": "default", "file": "inputs-sample-05-dark.png"}, {"kind": "card", "route": "inputs", "title": "Use sliders when a relative value is easier to choose visually than typing a precise number.", "theme": "dark", "state": "default", "file": "inputs-sample-06-dark.png"}, {"kind": "card", "route": "inputs", "title": "Use text boxes for short text entry. Add icons, clear buttons, and limits when they clarify the expected input.", "theme": "dark", "state": "entered", "file": "inputs-sample-01-dark-entered.png"}, {"kind": "route", "route": "forms", "title": "Forms", "theme": "dark", "state": "default", "file": "forms-dark.png"}, {"kind": "card", "route": "forms", "title": "Use TimePicker for choosing a time from hour, minute, and AM/PM columns in a flyout.", "theme": "dark", "state": "default", "file": "forms-sample-01-dark.png"}, {"kind": "card", "route": "forms", "title": "Use DatePicker for choosing a date from day, month, and year columns in a flyout.", "theme": "dark", "state": "default", "file": "forms-sample-02-dark.png"}, {"kind": "card", "route": "forms", "title": "Use ColorPicker for choosing a color from a saturation/value spectrum with a hue slider, alpha, RGB/HSV channel text input, and hex input.", "theme": "dark", "state": "default", "file": "forms-sample-03-dark.png"}, {"kind": "card", "route": "forms", "title": "Use a compact form for account access, with clear labels and a primary action.", "theme": "dark", "state": "default", "file": "forms-sample-04-dark.png"}, {"kind": "card", "route": "forms", "title": "Combine contact, shipping, and quantity fields when a form needs several related decisions.", "theme": "dark", "state": "default", "file": "forms-sample-05-dark.png"}, {"kind": "card", "route": "forms", "title": "Use form controls to edit a small set of preferences and show confirmation after saving.", "theme": "dark", "state": "default", "file": "forms-sample-06-dark.png"}, {"kind": "route", "route": "data", "title": "Data", "theme": "dark", "state": "default", "file": "data-dark.png"}, {"kind": "card", "route": "data", "title": "Use ListView for compact single-column collections and richer item layouts.", "theme": "dark", "state": "default", "file": "data-sample-01-dark.png"}, {"kind": "card", "route": "data", "title": "Set EmptyContent for an intentional no-data state and animate removals when items leave the list.", "theme": "dark", "state": "default", "file": "data-sample-02-dark.png"}, {"kind": "card", "route": "data", "title": "Use ListBox for compact selection lists; set SelectionMode to Extended to allow selecting multiple items.", "theme": "dark", "state": "default", "file": "data-sample-03-dark.png"}, {"kind": "card", "route": "data", "title": "Use PersonPicture to represent people and contact status in data-heavy views.", "theme": "dark", "state": "default", "file": "data-sample-04-dark.png"}, {"kind": "card", "route": "data", "title": "Use Card variants to group related data with different levels of visual emphasis.", "theme": "dark", "state": "default", "file": "data-sample-05-dark.png"}, {"kind": "card", "route": "data", "title": "Use Image to present pictures with a theme-aware stroke; CornerRadius drives the rounded clip from square to circular.", "theme": "dark", "state": "default", "file": "data-sample-06-dark.png"}, {"kind": "card", "route": "data", "title": "Set ItemsLayout to Grid when items read better as tiles that wrap across the list; List keeps one item per row.", "theme": "dark", "state": "default", "file": "data-sample-07-dark.png"}, {"kind": "route", "route": "data-binding", "title": "Data binding", "theme": "dark", "state": "default", "file": "data-binding-dark.png"}, {"kind": "card", "route": "data-binding", "title": "Add or remove items at runtime. The list updates through INotifyCollectionChanged.", "theme": "dark", "state": "default", "file": "data-binding-sample-01-dark.png"}, {"kind": "card", "route": "data-binding", "title": "Switch between Single, Multiple, and Extended selection modes.", "theme": "dark", "state": "default", "file": "data-binding-sample-02-dark.png"}, {"kind": "card", "route": "data-binding", "title": "Use an inline DataTemplate when every item shares the same row shape.", "theme": "dark", "state": "default", "file": "data-binding-sample-03-dark.png"}, {"kind": "route", "route": "trees", "title": "Trees", "theme": "dark", "state": "default", "file": "trees-dark.png"}, {"kind": "card", "route": "trees", "title": "Use TreeViewItem nesting for compact folder, outline, or category hierarchies.", "theme": "dark", "state": "default", "file": "trees-sample-01-dark.png"}, {"kind": "card", "route": "trees", "title": "Handle SelectedItemChanged when selecting a node should update related content.", "theme": "dark", "state": "default", "file": "trees-sample-02-dark.png"}, {"kind": "card", "route": "trees", "title": "Use multiple selection when people need to select several nodes from the same hierarchy.", "theme": "dark", "state": "default", "file": "trees-sample-03-dark.png"}, {"kind": "card", "route": "trees", "title": "Set IsExpanded directly, or walk the item collection when a command controls the tree.", "theme": "dark", "state": "default", "file": "trees-sample-04-dark.png"}, {"kind": "route", "route": "menus", "title": "Menus", "theme": "dark", "state": "default", "file": "menus-dark.png"}, {"kind": "card", "route": "menus", "title": "Use Menu for persistent command groups with submenus, keyboard cues, separators, and checked states.", "theme": "dark", "state": "default", "file": "menus-sample-01-dark.png"}, {"kind": "card", "route": "menus", "title": "Use ContextMenu for actions that apply to a selected item or region.", "theme": "dark", "state": "default", "file": "menus-sample-02-dark.png"}, {"kind": "card", "route": "menus", "title": "Use ToolTip for short hints that clarify icons, disabled commands, or risky actions.", "theme": "dark", "state": "default", "file": "menus-sample-03-dark.png"}, {"kind": "card", "route": "menus", "title": "Use Flyout for lightweight, light-dismiss popups (details, quick forms, confirmations) anchored to a control.", "theme": "dark", "state": "default", "file": "menus-sample-04-dark.png"}, {"kind": "card", "route": "menus", "title": "Use ContentDialog for modal prompts that require an explicit choice (confirmations, errors, sign-in).", "theme": "dark", "state": "default", "file": "menus-sample-05-dark.png"}, {"kind": "card", "route": "menus", "title": "Use TeachingTip for contextual, non-blocking coaching anchored to a UI element.", "theme": "dark", "state": "default", "file": "menus-sample-06-dark.png"}, {"kind": "card", "route": "menus", "title": "Use CommandBarFlyout for a compact command strip with an overflow menu; commands dismiss the flyout when invoked.", "theme": "dark", "state": "default", "file": "menus-sample-07-dark.png"}, {"kind": "popup", "route": "menus", "title": "Context menu open", "theme": "dark", "state": "open", "file": "menus-context-menu-open-dark.png"}, {"kind": "popup", "route": "menus", "title": "Flyout open", "theme": "dark", "state": "open", "file": "menus-flyout-open-dark.png"}, {"kind": "popup", "route": "menus", "title": "Command bar flyout open", "theme": "dark", "state": "open", "file": "menus-command-bar-flyout-open-dark.png"}, {"kind": "overlay", "route": "menus", "title": "Content dialog open", "theme": "dark", "state": "open", "file": "menus-content-dialog-open-dark.png"}, {"kind": "route", "route": "navigation", "title": "Navigation", "theme": "dark", "state": "default", "file": "navigation-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use a left pane for persistent destinations, with a header and separator to group the items.", "theme": "dark", "state": "default", "file": "navigation-sample-01-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use top navigation for a small set of peer destinations that should leave the full width for content.", "theme": "dark", "state": "default", "file": "navigation-sample-02-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use compact mode to preserve space, and enable the back button when the current view can navigate backward.", "theme": "dark", "state": "default", "file": "navigation-sample-03-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use InfoBadge in NavigationViewItem to call attention to item state without changing the item label.", "theme": "dark", "state": "default", "file": "navigation-sample-04-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use BreadcrumbBar to show the path to the current location and jump back to any ancestor.", "theme": "dark", "state": "default", "file": "navigation-sample-05-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use PipsPager for compact page indication and switching, as in carousels and onboarding flows.", "theme": "dark", "state": "default", "file": "navigation-sample-06-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use SelectorBar to switch between peer views of one page, and SlideNavigationPresenter to slide the view in from the side the selection moved.", "theme": "dark", "state": "default", "file": "navigation-sample-07-dark.png"}, {"kind": "card", "route": "navigation", "title": "Use PipsPager for compact page indication and switching, as in carousels and onboarding flows.", "theme": "dark", "state": "page-selected", "file": "navigation-sample-06-dark-page-selected.png"}, {"kind": "route", "route": "tabs", "title": "Tabs", "theme": "dark", "state": "default", "file": "tabs-dark.png"}, {"kind": "card", "route": "tabs", "title": "Use TabControl for a small set of peer panels that share the same space.", "theme": "dark", "state": "default", "file": "tabs-sample-01-dark.png"}, {"kind": "card", "route": "tabs", "title": "Use TabStripPlacement to move the tab row when the layout benefits from a side rail.", "theme": "dark", "state": "default", "file": "tabs-sample-02-dark.png"}, {"kind": "card", "route": "tabs", "title": "Use TabView for document-style tabs with add and close affordances.", "theme": "dark", "state": "default", "file": "tabs-sample-03-dark.png"}, {"kind": "card", "route": "tabs", "title": "Use TabControl for a small set of peer panels that share the same space.", "theme": "dark", "state": "selected", "file": "tabs-sample-01-dark-selected.png"}, {"kind": "route", "route": "layout", "title": "Layout", "theme": "dark", "state": "default", "file": "layout-dark.png"}, {"kind": "card", "route": "layout", "title": "Use Border to frame a region, StackPanel spacing for readable rows, and Separator to divide related content.", "theme": "dark", "state": "default", "file": "layout-sample-01-dark.png"}, {"kind": "card", "route": "layout", "title": "Use DockPanel when one element should pin to an edge while the remaining content fills the available space.", "theme": "dark", "state": "default", "file": "layout-sample-02-dark.png"}, {"kind": "card", "route": "layout", "title": "Use Expander for secondary settings that should start collapsed until needed.", "theme": "dark", "state": "default", "file": "layout-sample-03-dark.png"}, {"kind": "card", "route": "layout", "title": "Use DockPanel inside Expander headers and content when the summary and secondary action need edge alignment.", "theme": "dark", "state": "default", "file": "layout-sample-04-dark.png"}, {"kind": "card", "route": "layout", "title": "Use SmoothScrollViewer for a constrained list; its Fluence scrollbar shows the scroll position.", "theme": "dark", "state": "default", "file": "layout-sample-05-dark.png"}, {"kind": "card", "route": "layout", "title": "Use Expander for secondary settings that should start collapsed until needed.", "theme": "dark", "state": "expanded", "file": "layout-sample-03-dark-expanded.png"}, {"kind": "card", "route": "layout", "title": "Use SmoothScrollViewer for a constrained list; its Fluence scrollbar shows the scroll position.", "theme": "dark", "state": "scrolled", "file": "layout-sample-05-dark-scrolled.png"}, {"kind": "route", "route": "status", "title": "Status", "theme": "dark", "state": "default", "file": "status-dark.png"}, {"kind": "card", "route": "status", "title": "Use ProgressBar for measurable work where the current value can be reported.", "theme": "dark", "state": "default", "file": "status-sample-01-dark.png"}, {"kind": "card", "route": "status", "title": "Use indeterminate mode when work is active but no reliable percentage is available.", "theme": "dark", "state": "default", "file": "status-sample-02-dark.png"}, {"kind": "card", "route": "status", "title": "Use step progress for ordered tasks where users understand the current milestone.", "theme": "dark", "state": "default", "file": "status-sample-03-dark.png"}, {"kind": "card", "route": "status", "title": "Use ProgressRing when space is tight or when progress belongs next to compact content.", "theme": "dark", "state": "default", "file": "status-sample-04-dark.png"}, {"kind": "card", "route": "status", "title": "Use InfoBar for inline messages that explain status, validation, or recoverable outcomes.", "theme": "dark", "state": "default", "file": "status-sample-05-dark.png"}, {"kind": "card", "route": "status", "title": "Use InfoBar for inline messages that explain status, validation, or recoverable outcomes.", "theme": "dark", "state": "dismissed", "file": "status-sample-05-dark-dismissed.png"}, {"kind": "route", "route": "accessibility", "title": "Accessibility", "theme": "dark", "state": "default", "file": "accessibility-dark.png"}, {"kind": "card", "route": "accessibility", "title": "Keyboard focus and explicit tab order.", "theme": "dark", "state": "default", "file": "accessibility-sample-01-dark.png"}, {"kind": "card", "route": "accessibility", "title": "High contrast remaps Fluence semantic brushes to Windows system colors.", "theme": "dark", "state": "default", "file": "accessibility-sample-02-dark.png"}, {"kind": "card", "route": "accessibility", "title": "Icon-only buttons expose AutomationProperties.Name for screen readers.", "theme": "dark", "state": "default", "file": "accessibility-sample-03-dark.png"}, {"kind": "card", "route": "accessibility", "title": "Right-to-left layout mirrors Fluence controls for RTL locales.", "theme": "dark", "state": "default", "file": "accessibility-sample-04-dark.png"}, {"kind": "card", "route": "accessibility", "title": "InfoBar and TextBox validation use LiveRegionChanged to announce status changes without interrupting the user.", "theme": "dark", "state": "default", "file": "accessibility-sample-05-dark.png"}, {"kind": "card", "route": "accessibility", "title": "RatingControl supports full keyboard navigation and exposes the RangeValue automation pattern.", "theme": "dark", "state": "default", "file": "accessibility-sample-06-dark.png"}, {"kind": "route", "route": "settings", "title": "Settings", "theme": "dark", "state": "default", "file": "settings-dark.png"} ] }