Skip to content

Compact sizing resource does not affect MenuBar styles, remains non-compact after enabling compact sizing #10886

@cricketthomas

Description

@cricketthomas

Describe the bug

When the app enables compact sizing via the documented compact sizing resource, controls such as ListView, TextBox, etc, properly adopt compact spacing. However MenuBar does not change it retains default spacing, padding and font sizes. This makes menus visually inconsistent with other compact controls.

Why is this important?

The documentation in the sample app says that it is supported, however, when you use the stylesheet with a MenuBar, the style does not change to become more compact.

Image

Steps to reproduce the bug

Create a blank WinUI application, use the compact density styles globally, and add a MenuBar to MainWindow.xaml

App.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:App1"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="App1"
    mc:Ignorable="d">
    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>
    <Grid RowSpacing="50">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <MenuBar Grid.Row="2">
            <MenuBarItem Title="File" FontSize="5">
                <MenuFlyoutSubItem Text="New">
                    <MenuFlyoutItem Text="Plain Text Document" />
                    <MenuFlyoutItem Text="Rich Text Document" />
                    <MenuFlyoutItem Text="Other Formats..." />
                </MenuFlyoutSubItem>
                <MenuFlyoutItem Text="Open..." />
                <MenuFlyoutItem Text="Save" />
                <MenuFlyoutSeparator />
                <MenuFlyoutItem Text="Exit" />
            </MenuBarItem>

            <MenuBarItem Title="Edit">
                <MenuFlyoutItem Text="Undo" />
                <MenuFlyoutItem Text="Cut" />
                <MenuFlyoutItem Text="Copy" />
                <MenuFlyoutItem Text="Paste" />
            </MenuBarItem>

            <MenuBarItem Title="View">
                <MenuFlyoutItem Text="Output" />
                <MenuFlyoutSeparator />
                <RadioMenuFlyoutItem GroupName="OrientationGroup" Text="Landscape" />
                <RadioMenuFlyoutItem
                    GroupName="OrientationGroup"
                    IsChecked="True"
                    Text="Portrait" />
                <MenuFlyoutSeparator />
                <RadioMenuFlyoutItem GroupName="SizeGroup" Text="Small icons" />
                <RadioMenuFlyoutItem
                    GroupName="SizeGroup"
                    IsChecked="True"
                    Text="Medium icons" />
                <RadioMenuFlyoutItem GroupName="SizeGroup" Text="Large icons" />
            </MenuBarItem>

            <MenuBarItem Title="Help">
                <MenuFlyoutItem Text="About" />
            </MenuBarItem>
        </MenuBar>

        <TextBox Grid.Row="1" PlaceholderText="text box that is compact" />
    </Grid>
</Window>

Actual behavior

MenuBar does not change

Image

Expected behavior

Compact Sizing should reduce the font size, padding of the MenuBar

Screenshots

Compact Styles applied globally, but not to menubar:

Image

No compact styles applied, menubar has same styles as above:

Image

NuGet package version

WinUI 3 - Windows App SDK 1.8.3: 1.8.251106002

Windows version

Windows 11 (24H2): Build 26100

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions