feat: Implement compact sizing for controls via VisualDensity

[Copilot]

FluentThemeData.visualDensity existed but only buttons responded to it. This wires up compact sizing across all controls listed in the WinUI3 Compact.xaml density spec, plus additional surface and flyout controls.

Each control reads FluentTheme.of(context).visualDensity.baseSizeAdjustment.dy and applies it to height constraints. With VisualDensity.compact (vertical=-2), this yields -8px — matching WinUI3 compact values (e.g., TextBox 32→24, NavigationView items 40→32).

Controls updated

• TextBox (PasswordBox inherits) — minHeight
• ComboBox — item container height
• DatePicker / TimePicker — button minHeight
• TreeView — item minHeight
• NavigationView — pane items, indicators, title bar toggle/back buttons
• ListTile — minHeight
• AutoSuggestBox — overlay tile height and scroll offset calculation
• MenuBar — minHeight
• Expander — header minHeight
• InfoBar — container minHeight
• NumberBox — compact overlay height and positioning offset
• Tooltip — TooltipThemeData.standard height

All adjusted values are clamped to [0, ∞).

Example app

Added a Visual Density setting to the Settings page with Standard and Compact radio options. The selection is wired through AppTheme to both light and dark FluentThemeData configurations, allowing live toggling of compact sizing across the entire example app.

Usage

FluentThemeData(
  visualDensity: VisualDensity.compact,
)

Control	Standard	Compact
TextBox	32px	24px
ComboBox item	38px	30px
DatePicker/TimePicker	32px	24px
NavigationView items	40px	32px
ListTile	40px	32px
MenuBar	40px	32px
Expander	42px	34px
InfoBar	48px	40px
NumberBox overlay	100px	92px
Tooltip	32px	24px

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Implement compact sizing</issue_title>
<issue_description>The flutter/material library has support for a compact, dense mode. Native Windows UI have built-in support for that

Controls that support compact styling:

• ListView
• TextBox
  • PasswordBox
  • AutoSuggestBox
• ComboBox
• DatePicker
• TimePicker
• TreeView
• NavigationView
• MenuBar

Proposal

In FluentThemeData, add a VisualDensity visualDensity property (just like material). To view, VisualDensity density = FluentTheme.of(context).visualDensity;. In each theme factory, check for the visual density and adapt accordingly.

Additional context

• winui3gallery://item/CompactSizing
• https://learn.microsoft.com/en-us/windows/apps/design/basics/content-basics
• https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/dll/DensityStyles/Compact.xaml
• https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/dll/DensityStyles/CompactDatePickerTimePickerFlyout.xaml
  </issue_description>

<agent_instructions>In the end, update the Changelog.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Implement compact sizing #1172

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[bdlukaa]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces compact sizing for a wide range of controls by leveraging VisualDensity. The changes are consistently applied across all affected components, such as TextBox, ComboBox, ListTile, and NavigationView. The implementation correctly adjusts height constraints based on visualDensity.baseSizeAdjustment.dy and safely clamps the resulting values to prevent negative heights. The code is clean and the approach is well-executed, effectively addressing the feature request.

[bdlukaa]

@copilot Update the example app to support changing the visual density in the Settings page.

[Copilot]

@copilot Update the example app to support changing the visual density in the Settings page.

Done in 993bdd1. Added a "Visual Density" section to the Settings page with Standard/Compact radio buttons. The setting is wired through AppTheme to both light and dark FluentThemeData configurations.

Changes:

• theme.dart: Added visualDensity property with getter/setter + notifyListeners()
• main.dart: Both theme and darkTheme now use appTheme.visualDensity instead of hardcoded VisualDensity.standard
• settings.dart: New "Visual Density" section between Navigation Indicator and Accent Color, with a description and Standard/Compact radio options

[bdlukaa]

@copilot Suggest more widgets to apply the visual density factor.

[Copilot]

@copilot Suggest more widgets to apply the visual density factor.

After analyzing the codebase, here are additional widgets that could benefit from visual density adjustments:

Strong candidates:

Widget	File	Current	Compact	Notes
Expander	surfaces/expander.dart:321	42px minHeight	34px	Header row — directly comparable to list items
InfoBar	surfaces/info_bar.dart:399	48px minHeight	40px	Container height — still fits icon + message
TabView	navigation/tab_view/tab_view.dart:14	34px tile height	28px	Tab strip — consistent with compact nav items
NumberBox overlay	form/number_box.dart:14	100px overlay	~92px	Spinner popup height
Tooltip	flyouts/tooltip.dart:764	32px height	24px	Tooltip box height

Weaker / skip:

Widget	Reason
Slider (_preferredHeight: 32)	This is the value label tooltip, not the track — reducing feels odd
Tab close button (24×32)	Already small; shrinking hurts touch targets
BreadcrumbBar (minHeight: 19)	Already minimal
ToggleSwitch / RadioButton / Checkbox (20px)	Not in WinUI3 Compact.xaml spec; 20px is already small

My recommendation is Expander, InfoBar, and TabView as the highest-value additions — they're interactive surface/navigation controls with clear compact equivalents.

[bdlukaa]

@copilot Update Expander, InfoBar, NumberBox and Tooltip to support visual density.

[Copilot]

@copilot Update Expander, InfoBar, NumberBox and Tooltip to support visual density.

Done in cbc4a6e. Applied visual density to all four controls:

Control	Standard	Compact	Location
Expander	42px	34px	Header minHeight
InfoBar	48px	40px	Container minHeight
NumberBox	100px	92px	Compact overlay height + positioning offset
Tooltip	32px	24px	TooltipThemeData.standard height

CHANGELOG updated to list all 13 supported controls.