Suggestion: Add Compact Dictionary to WinUI 2.1

CompactMode Xaml Property

Summary

Compact Styles bundled with Microsoft.Xaml.UI and applied via a property rather than a separate ResourceDictionary

Rationale

At present Microsoft has pushed the idea of Compact styles for controls being handled by adding a Resource Dictionary to the app. But with Microsoft.Xaml.UI potentially replacing the default UWP controls - perhaps it would be a good idea to handle the compact styles in the controls themselves. Have it be an option that can be inherited by all controls when a CompactMode= True is set on a parent panel, page or app.xaml level.

Functional Requirements

• Avoid loading multiple templates in memory so the controls get loaded with the templates required
• Consistent compact resources used to match Fluent Design and OS use, without risk of outdated Resource Dictionaries and drift into inconsistent usage. (this can of course be overridden if a developer required something more bespoke)

Usage Examples

Detailed Feature Design

Some examples: <Grid Width="*" Height="300" CompactMode="True"> ... </Grid>

<TextBox Header="Username" HeaderPosition="Left" CompactMode="True" />

This could include one or more of:

• an API proposal (any supported language or pseudocode is fine)
• design mockups for a new user experience
• details on accessibility compliance for new UI
• other implementation notes –>

Open Questions

Please pay attention to DatePickerFlyout and TimePickerFlyout problem which is described in PR 351

Release Checklists

Prerelease readiness

• Dev: quality review + code review done
• Dev: test coverage added
• Dev: initial accessibility review done
• Dev: data metrics plan ready
• PM: spec up to date
• PM: feature ready for feedback
• PM: docs.microsoft.com updates ready

Stable release readiness

• Dev: feature previously shipped in a prerelease NuGet package
• Dev: Azure CI tests passing
• Dev: data metrics ready
• Dev: accessibility review done
• Dev: API review done
• Dev: IDL attribute switched from preview to public
• PM: spec done
• PM: glob/loc, privacy, security, license compliance ready
• PM: customer validation done
• PM: docs.microsoft.com updated
• PM: Xaml Controls Gallery updated

[JustinXinLiu]

I like the idea, however I’d go with an enum property instead of bool so it could support more than two modes.

[deanchalk]

For me the big problem with using something like an enum and building this into the controls themselves is that it violates the ‘look-less’ principal of XAML controls. The control’s implementation should have no reference to it’s ‘look’. Also, what if you want to restyle a template in Blend? Will these Control Templates end up massive and full of style triggers depending on this enum? A much better way in my opinion is to achieve this with Resource Dictionaries, and maybe have an app-level enum to switch dictionaries - like this:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.DensityDictionaries>
            <ResourceDictionary x:Key="Standard">
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml.Controls.StandardMode" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Compact">
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml.Controls.CompactMode" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </ResourceDictionary.DensityDictionaries>
    </ResourceDictionary>
</Application.Resources>