microsoft / microsoft/microsoft-ui-xaml

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

Open
#10,886 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-Menus bug team-Controls
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the compact resource merged in App.xaml and the MenuBar usage in MainWindow.xaml. Compare the MenuBar styling with the compact controls shown in the reproduction, then run the sample to verify the font size and padding change when Compact.xaml is enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.