UWP commandbar more button not showing up with DynamicOverflowEnabled

Question

I have a UWP app in which I am using CustomMediaTransportControls. within those controls I've added some extra buttons within the commandbar PrimaryCommands and have set IsDynamicOverflowEnabled=true according to the docs it should automatically send the primary commands to the overflow menu when the screen size is not enough for all the buttons. and it should drop them out according to MediaTransportControlsHelper.DropoutOrder property on each appbarButton.

Problem

When screen size is less the controls seem to go into overflow menu as expected, but I cant access or see them because the More button is never visible, which is strange because I have tried to set OverflowButtonVisibility=visible and even tried it with Auto but that button never shows up on the UI. the fact that I know that primary commands are going to overflow is because I explicitly set the more button to visible, from within the templated style of the commandbar and then I see it in the UI, but its not ideal because it shows up even when it doesn't have anything in the overflow. so I changed it back to default binding value as it was before.

Also I am using re-templated style of the commandbar because I wanted to set the horizontalAlignment of the primary command buttons as center.

In this first image you can see all of controls are showing up

but here when I have resized the window to a smaller size I see less controls but no overflow menu ( more ) button.

Also note that app project has creators update as minimum target so DynamicOverflow should work because it was introduced in Anniversary update.

Update 1

In the picture below you can see I added a normal command bar to the page and it shows the more button even when there is no overflow buttons. obviously it is shown for the labels I guess.

and here you can see that upon resizing, the more button does get the extra buttons in it.

So the question is, why isn't it working with MediaTransportControls commandbar? I even tried default transportcontrols without any custom styling and just enabled all the buttons on it with is..buttonvisible and I got the same bug there as well. and which stage is this feature being prevented? and how can I override the behaviour?

With Live property explorer I can confirm that the visibility of more button is set to collapsed and if I set it to visible right there in property explorer I can see the button, now what I don't understand is why is it collapsed? even when I set overflowbuttonvisibility to visible in my xaml style?

Muhammad Touseef Muhammad Touseef · Accepted Answer · 2018-04-04T14:08:39

After a lot of playing with my custom control I had to dynamically override the behaviour and create a little of my own behaviour in order to make this work.

I got following 2 controls in my Loaded event of the control

private void FluentMtc_Loaded(object sender, RoutedEventArgs e)
{
    //secondaryItemControl to check how many items are in overflow menu
    _secondarycontrols = (CommandBarOverflowPresenter)(((Popup)this.FindDescendantByName("OverflowPopup")).Child).FindDescendantByName("SecondaryItemsControl");
    //to toggle visibility of more button
    _moreButton = (Button)this.FindDescendantByName("MoreButton");
}

And I subscribed to DynamicOverflowItemsChanging event of the CommandBar within my OnApplyTemplate() method of my custom media transport controls.

    protected override void OnApplyTemplate()
    {

        var barr = (CommandBar)GetTemplateChild("MediaControlsCommandBar");

        //the event to control the dynamicoverflow automatically.
        barr.DynamicOverflowItemsChanging += (s, e) =>
        {
            if (_secondarycontrols.Items.Count == 0 && e.Action == CommandBarDynamicOverflowAction.AddingToOverflow)
                _moreButton.Visibility = Visibility.Visible;
            else if (_secondarycontrols.Items.Count == 1 && e.Action == CommandBarDynamicOverflowAction.RemovingFromOverflow)
                _moreButton.Visibility = Visibility.Collapsed;
        };

        //base implementation
        base.OnApplyTemplate();
    }

As you can see that within the event I dynamically check the number of items in secondayoverflow menu and control visibility of the more button accordingly. This is obviously a workaround, but if anyone find a proper reason as of why MediaTransportControls commandbar has this bug, please do post another answer on this post.

Also note that FindDescendent methods are coming from uwp community toolkit extensions nuget package.

UWP commandbar more button not showing up with DynamicOverflowEnabled

1 Answers