question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CommandBarFlyout has gap between primary and secondary commands when secondary are shown above.

See original GitHub issue

Describe the bug CommandBarFlyout has gap between primary and secondary commands when secondary are shown above primary due to the constrained space. Gap is shown only first time, bug could be repeated with both WUX and MUX 2.6.2 versions of CommandBarFlyout, everything was tested on OS 19043

Steps to reproduce the bug

  1. VS2019, new blank C++/CX app, target 19041, min target 17763
  2. Add button aligned to the bottom of page with attached CommandBarFlyout
    <Page.Resources>
        <CommandBarFlyout x:Name="CommandBarFlyout1">
            <AppBarButton Label="Share" Icon="Share" ToolTipService.ToolTip="Share" />
            <AppBarButton Label="Save" Icon="Save" ToolTipService.ToolTip="Save" />
            <AppBarButton Label="Delete" Icon="Delete" ToolTipService.ToolTip="Delete" />
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton x:Name="ResizeButton1" Label="Resize"/>
                <AppBarButton x:Name="MoveButton1" Label="Move"/>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Page.Resources>

    <Button VerticalAlignment="Bottom" Content="Show Flyout" Flyout="{StaticResource CommandBarFlyout1}"/>
  1. Press button - flyout is shown with gap between primary and secondary commands
  2. Press button again - flyout is shown without gap between primary and secondary commands

Expected behavior CommandBarFlyout should show secondary commands above primary ones without any gap between

Screenshots Windows.UI.Xaml version image

Microsoft.UI.Xaml version from XamlControlsGallery image

Microsoft.UI.Xaml version 2.6.2 in ControlsResourcesVersion=“Version1” mode image

Version Info CommandBarFlyout from both Microsoft.UI.Xaml 2.6.2 and Windows.UI.Xaml has this bug Host OS 19043.1165 UWP App, WinUI 2.6.2

Windows app type:

UWP Win32
Yes
Windows version Saw the problem?
Insider Build (xxxxx)
May 2021 Update (19043) Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)
Device form factor Saw the problem?
Desktop Yes
Xbox
Surface Hub
IoT

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:10 (10 by maintainers)

github_iconTop GitHub Comments

3reactions
zhuxb711commented, Sep 4, 2021

They just don’t want to fix this issue since I mention it on Aug, 2020 #3209

0reactions
zadjii-msftcommented, Apr 5, 2023

Not to necro an old thread, but we saw this with the Terminal too - until we switched to the Microsoft.UI.Xaml.Controls:CommandBarFlyout version. Then it just worked like a charm. We were able to do that as a drop-in replacement, just change the namespace.

Figured that future readers may find that helpful.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Command bar flyout - Windows apps
When and how the primary and secondary commands are displayed depends on the display mode. The command bar flyout has two display modes: ......
Read more >
Flyout is behind SecondaryCommands - xaml
The second command will show as Flyout and you should not show two flyout. And I think you may change the flyout to...
Read more >
Announcing Windows 10 Insider Preview Build 17704
Hello Windows Insiders! Today, we are releasing Windows 10 Insider Preview Build 17704 (RS5) to Windows Insiders in the Fast ring in ...
Read more >
Windows UI Library | XAML Brewer, by Diederik Krols
In this article we walk through a UWP app that demonstrates two new pagination controls that ship with the upcoming WinUI 2.6.
Read more >
Windows 10 Redstone 5 (Version 1809): All changes, new ...
On this page, we have collated all the changes and new features brought by all Windows 10 Redstone 5 (Version 1809) insider builds...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found