[Bug] CommandBar content does not fill vertical space and shifts up when more (···) button is clicked

[velocitysystems]

Description

Content in the command bar ie. ToolBar item icons do not fill the available vertical space.
When the more (···) button on the toolbar is clicked, the content in the CommandBar shifts up.
Note: Only occurs when targeting UWP platforms > 16299.

May be related to #5661.

Steps to Reproduce

1. Create a blank Xamarin.Forms sample project with a UWP target.
2. Update to Xamarin.Forms 4.4.0 (vLatest) and target > 16299.
3. Add a page with one or more toolbar items.
4. Run the project on UWP and click the more (···) button.

Expected Behavior

The command bar should expand but not shift upward.

Actual Behavior

The command bar expands and shifts upward.

Basic Information

• Version with issue: 4.4.0 (vLatest)

• Last known good version:
  N/A - Related to UWP platform change.
  Overriding AppBarThemeMinHeight doesn't cause AppBarButton to fill available height. microsoft/microsoft-ui-xaml#275

• IDE: Microsoft Visual Studio 2019

• Platform Target Frameworks:

  • UWP: 1903 (or anything later than 16299)

Screenshots

Before

After

Reproduction Link

ToolbarIconSample.zip

[velocitysystems]

@jfversluis Hi Gerald. Do you know if this issue is fixed with #8625?

[jfversluis]

@velocitysystems it might be! I've created a new build of that PR on top of master, you should be able to download the NuGet here: https://dev.azure.com/xamarin/public/_build/results?buildId=11995&view=artifacts&type=publishedArtifacts

Would you be able to try it?

[velocitysystems]

@velocitysystems it might be! I've created a new build of that PR on top of master, you should be able to download the NuGet here: https://dev.azure.com/xamarin/public/_build/results?buildId=11995&view=artifacts&type=publishedArtifacts

Would you be able to try it?

Thanks @jfversluis. I updated the repro project to use your NuGet artifact, however I get errors when trying to build as the .nupkg appears to be missing UWP payload files?

[apwillies]

We are seeing this on UWP too. Thanks in advance.

[velocitysystems]

@jfversluis Hi Gerald, just wondering if you possibly have any update on this? A number of of our UWP users are reporting it and it’s a little ugly to be sure. Thanks!

[jfversluis]

Unfortunately, I don't have any update to share at this moment, sorry about that. Is there anything from your side that you have discovered in the meantime that could help us get to the cause of this?

[JesseLiberty]

Confirmed that this still happens with Xamarin.Forms version 4.40.991265, Windows 10 version 1903. Check of web shows no fix for this yet

[velocitysystems]

Bump. Any possible updates on this?

[YZahringer]

Allow visibility configuration of Overflow button would be a solution? #10885

[anpin]

Allow visibility configuration of Overflow button would be a solution? #10885

I would agree on this because on Android and iOS ToolbarItems / CommandBaritems are fully shown (despite the fact that target devices will usually have smaller screens). This is especially annoying if you need to port an existing app to UWP and the app has many pages with toolbar items with text only which will not be shown until you press the (···) button.

[pwillies]

@samhouts @PureWeen @hartez @jfversluis Hi XF Team, This is on our priority list too. It's also visual, but it affects every view in the app and looks very amateurish. It was reported back in December 2019.

[nbevans]

I used a suggestion to create a custom VisualStateManager as per https://stackoverflow.com/questions/33290361/how-to-make-the-commandbar-open-towards-the-bottom-of-the-screen

It seems to work fine for me?

[educos35]

Hi everybody,
I work on a Xamarin Forms (rendered in Android and UWP plateform) apps that uses navigation and toolbaritems on each pages.
I just migrate to the last plateform of XF released as NuGet package (5.0.0.2012) and I can still say that the problem is there. I could esaly reproduce the problem using the "ToolbarItemDemos" project after changing the toolbaritems text to make them longer and force the toolbar to resize. What is strange is that the behavior is different according to the place of the page on my screen. If I put the top of the page near the top of my screen, resizing is correct, and toolbar is growing down, but if I move the page on the middle of my screen, then the resize is inverted !?!

Correct behaviour (the top of the image is the top of my screen)

Incorrect behaviour (I just move the windows some pixel down)

So, what is the progress of the issue ?
Is there any workaround ? (what about the workaround mentioned by @nbevans. I do not seen how to implement it in Xamarin Solution)
Is there a preview date / version for the issue ?

Regards.

Eric.

[nbevans]

@educos35 did you try the solution in the link above? It worked for me. Not ideal but better than being blocked until Xamarin Forms has a bug fix - which could be months or worse.

[educos35]

@nbevans : Hi...thanks for your suggestion, but I am missing something in understanding how to use the OpenDownCommandBar. Should I simply add that on the MainPage.xaml of my UWP project ?

<Page.TopAppBar>
mycontrols:OpenDownCommandBar</mycontrols:OpenDownCommandBar>
</Page.TopAppBar>

It does not work...It adds a new bar above the Xamarin toolbar

I tried to replace the OpenDownCommandBar to inherit from FormsCommandBar and not from CommandBar as it seems that this is the Type used to define the Toolbar. Now, I get only one toolbar, but behaviour is like before...

Could you test ont the Xamarin Sample ToolbaritemDemos project ?

Regards.

[educos35]

Hi everybody !
Can someone tell me when this issue should be solved. I have a ticket open by my client on my app. I have to answer something...either a version, a date, or even a workaround. I tried to use the suggestion made by @nbevas, but without success.
Regards.