Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

UWP Toolbar autohide "More" (...) button

SergTomcatSergTomcat Member ✭✭

I need help with taming CommandBar in UWP application.

Desired behaviour is like this:

  1. If there is no items, ToolBar is empty (exactly like it works now)
<ContentPage.ToolbarItems>
</ContentPage.ToolbarItems>

  1. If there is no Secondary buttons, only primary buttons is shown (now it still shows "more" button that do nothing)
<ContentPage.ToolbarItems>
        <ToolbarItem Text="" IconImageSource="button.png" Clicked="DoSomePrimaryStuff" Order="Primary"/>
</ContentPage.ToolbarItems>

  1. If there is both Primary and Secondary buttons, show Primary and move secondary into "More" button (working now as planned)
<ContentPage.ToolbarItems>
    <ToolbarItem Text="" IconImageSource="button.png" Clicked="DoSomePrimaryStuff" Order="Primary"/>
    <ToolbarItem Text="Secondary button" IconImageSource="button2.png" Clicked="DoSomeSecondaryStuff" Order="Secondary"/>
</ContentPage.ToolbarItems>

So the problem is only with second situation. Is there any way to autohide "more" button if it's empty?

And if there isn't, please help or advise on how to attach to some event or property so when the bar is appearing, I could manually find that button inside CommandBar and hide/show it if necessary.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    There isn't a control on UWP to present the navigationbar. It is customized by Forms:

    So we can't dynamically adjust its appearance on UWP.
    However, we could achieve it by adding this key in the App on UWP:

    <Application
        x:Class="NavigationSample.UWP.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:NavigationSample.UWP"
        RequestedTheme="Light">
        <Application.Resources>
            <x:Double x:Key="AppBarExpandButtonThemeWidth">0</x:Double>
        </Application.Resources>
    </Application>
    
  • SergTomcatSergTomcat Member ✭✭

    @LandLu said:
    However, we could achieve it by adding this key in the App on UWP:

            <x:Double x:Key="AppBarExpandButtonThemeWidth">0</x:Double>
    

    Can i change it from code behind dynamically before opening certain pages?

  • JohnHardmanJohnHardman GBUniversity admin
    edited July 23

    @LandLu said:
    AppBarExpandButtonThemeWidth

    There is also the scenario on UWP where there are only primary toolbar items, but where the screen width is large enough for all of the primary toolbar items to be displayed without overflowing into the "more" dropdown menu. In that case, it would be good if the ellipsis/more button did not appear (but if items did overflow into the dropdown menu that the button does appear).

    Note that I don't need the button to show the text on the primary toolbar items (by default, it serves two functions - showing the text, and performing the dropdown) as I use the following in my app.xaml on UWP:

            <Style
                TargetType="uwp:FormsCommandBar">
                <Setter Property="DefaultLabelPosition" Value="Right" />
            </Style>
    

    Any idea how to make the button only appear if the dropdown would contain something, whether overflowed primary toolbar items, or secondary toolbar items?

Sign In or Register to comment.