Compact Sizing in WinUI Controls

19 Jul 20221 minute to read

There are two types of spacing support for controls in WinUI.

  1. Standard - to accommodate both touch and pointer input.
  2. Compact - designed primarily to accommodate pointer input.

Compact sizing enables dense, information-rich groups of controls and can help with the following:

  • Browsing large amounts of content.
  • Maximizing visible content on a page.
  • Navigating and interacting with controls and content.

Examples of compact sizing

Compact sizing is implemented through a unique resource dictionary that can be specified in your application at either the page level or a specific layout. The resource dictionary is available in the WinUI Nuget package.

The following examples show how the Compact style can be applied for the window and an individual Grid control.

Window level

<Window.Resources>
      <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
      <ResourceDictionary Source="ms-appx:///Syncfusion.Core.WinUI/Themes/DensityStyles/Compact.xaml" />
</Window.Resources>

Grid level

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
        <ResourceDictionary Source="ms-appx:///Syncfusion.Core.WinUI/Themes/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>