Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Fluent Theme: MenuItem does not align Header #9980

Closed
bent-rasmussen opened this issue Oct 22, 2024 · 0 comments · Fixed by #10735
Closed

Fluent Theme: MenuItem does not align Header #9980

bent-rasmussen opened this issue Oct 22, 2024 · 0 comments · Fixed by #10735
Labels
Good First Issue metadata: Issue should be easy to implement, good for first-time contributors Investigate Requires further investigation by the WPF team. Win 11 Theming

Comments

@bent-rasmussen
Copy link

bent-rasmussen commented Oct 22, 2024 •
edited
Loading

Description

A usability aspect of menus is that they are easy to visually scan. If some menu items do not have icons, then their headers are not aligned with headers that do have icons. This degrades usability somewhat. The default "theme" does not exhibit this issue.

I am not sure if this is simply the way Fluent is supposed to be, so this is just a guess.

Default Fluent
Image Image

Reproduction Steps

  • Create a .NET 9 desktop app with the new Fluent theme
  • Add a Menu like so:
<Window
    x:Class="MenuIconAlignment.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="clr-namespace:MenuIconAlignment"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="400"
    Height="250"
    ThemeMode="Light"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <Grid>

        <Menu
            Margin="50,-100,0,0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            VerticalContentAlignment="Center">
            <MenuItem Header="File" IsSubmenuOpen="True">

                <MenuItem Header="Open">
                    <MenuItem.Icon>
                        <TextBlock FontFamily="Segoe Fluent Icons" Text="&#xE1A5;" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Exit" />

            </MenuItem>
        </Menu>

    </Grid>
</Window>

Expected behavior

Headers are vertically aligned.

Image

Actual behavior

Headers are not vertically aligned.

Image

Regression?

Well, without fluent, headers are aligned, with fluent they are not but of course fluent is a new theme.

Known Workarounds

No response

Impact

Degraded usability; slows down visual scanning.

Configuration

Property Value
SDK .NET 9 RC2
OS Name Microsoft Windows 11 Pro
Version 10.0.22631 Build 22631
System SKU Surface_Pro_8_1983

Other information

No response
@himgoyalmicro himgoyalmicro added Investigate Requires further investigation by the WPF team. Win 11 Theming Good First Issue metadata: Issue should be easy to implement, good for first-time contributors labels Oct 23, 2024
@lindexi lindexi mentioned this issue Feb 25, 2025
Open
@dipeshmsft dipeshmsft mentioned this issue Apr 8, 2025
Merged
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
Good First Issue metadata: Issue should be easy to implement, good for first-time contributors Investigate Requires further investigation by the WPF team. Win 11 Theming
Projects
WPF Fluent Theming
Status: ☑ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixed MenuItem Header alignment wrt to Icons dipeshmsft/wpf
2 participants
@bent-rasmussen @himgoyalmicro