microsoft / microsoft/microsoft-ui-xaml
Wrong layout for AppBarButton in TextCommandBarFlyout
- Dominant language
- C++
- Stars
- 8.4k
- Forks
- 942
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 105
Description
### Describe the bug
When adding more than 6 `AppBar(Toggle)Button`s to a `TextCommandBarFlyout`, additional ones flow over to the text area and have messed-up layout

### Steps to reproduce the bug
```
textBox.SelectionFlyout.Opening += Menu_Opening;
textBox.ContextFlyout.Opening += Menu_Opening;
```
...
```
void Menu_Opening(object? sender, object e)
{
var myFlyout = sender as TextCommandBarFlyout;
var sButton = new AppBarToggleButton { Icon = new FontIcon { Glyph = "\uEDE0" }, Label = "Strikethrough" };
myFlyout.PrimaryCommands.Add(sButton);
var highlightButton = new AppBarToggleButton { Icon = new FontIcon { Glyph = "\uE7E6" }, Label = "Highlight" };
myFlyout.PrimaryCommands.Add(highlightButton);
var fontColorButton = new AppBarToggleButton { Icon = new FontIcon { Glyph = "\uE8D3" }, Label = "Font Color" };
myFlyout.PrimaryCommands.Add(fontColorButton);
var linkButton = new AppBarToggleButton { Icon = new FontIcon { Glyph = "\uE71B" }, Label = "Hyperlink", };
myFlyout.PrimaryCommands.Add(linkButton);
var lButton = new AppBarToggleButton { Icon = new FontIcon { Glyph = "\uE8FD" }, Label = "Unordered List", };
myFlyout.PrimaryCommands.Add(lButton);
var l2Button = new AppBarToggleButton { Icon = new FontIcon { Glyph = "\uEA37" }, Label = "Ordered List", };
myFlyout.PrimaryCommands.Add(l2Button);
}
```
Right-click test area
### Expected behavior
This is the result on UWP and how it should look like

### Screenshots
_No response_
### NuGet package version
WinUI 3 - Windows App SDK 1.8 Experimental 1: 1.8.250515001-experimental2
### Windows version
Windows 11 (24H2): Build 26100
Contributor guide
Research direction
Start by reproducing the issue with a RichEditBox, TextCommandBarFlyout, and more than six AppBarToggleButtons, then open the flyout from the right-click test area. Inspect the TextCommandBarFlyout and AppBarButton layout behavior and compare it with the expected UWP result. Done means additional commands remain in the command area without flowing into or disrupting the text area.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100