Hiding the ellipsis within an AppBar

Question

When you create an AppBar or a CommandBar in a UWP app, there's always an ellipsis hiding near the side of the control, like so:

I don't want it in my app but I haven't found any methods/properties within AppBarthat would help me get rid of it. It should be possible, because many of the default Windows 10 apps don't have it. For example, there's no ellipsis on the main menu bar below:

Is it possible to hide the ellipsis using AppBar, or do I have to use a SplitView or some other control to implement this?

Answer 1

First, try not to use AppBar in your new UWP apps.

The CommandBar control for universal Windows apps has been improved to provide a superset of AppBar functionality and greater flexibility in how you can use it in your app. You should use CommandBar for all new universal Windows apps on Windows 10.

You can read more about it here.

Both CommandBar and AppBar can be full styled and templated. This gives you the ability to remove whatever UI elements you don't want to display.

This is how you do it -

Open your page in Blend, right click on CommandBar > Edit Template > Edit a Copy. Then make sure you select Define in Application as currently there's a bug in Blend which will fail to generate the styles if you choose This document.

Once you have all the styles, find the MoreButton control and set its Visibility to Collapsed (or you can remove it but what if you realise you need it later?).

Then you should have a CommandBar without the ellipsis.

Update for 2017 The visibility of the Ellipsis button can now be found in the OverflowButtonVisibility Property of a CommandBar. As above set it to Collapsed to hide it.

Answer 2

If you want to hide this button globally it enough to add

<Style x:Key="EllipsisButton" TargetType="Button">
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

to global resource file

Answer 3

I know this question is is not active any more, but for sake of completion I am proposing my answer.

Instead of changing the visibility by using Styles, I have written an AttachedProperty extension that is able to hide/show the MoreButton via data binding. This way you can show/hide it conditionally as you please.

Usage is as simple as binding your property to the extension:

<CommandBar extensions:CommandBarExtensions.HideMoreButton="{Binding MyBoolean}">
    ...
</CommandBar>

The extension code is as follows:

public static class CommandBarExtensions
{
    public static readonly DependencyProperty HideMoreButtonProperty =
        DependencyProperty.RegisterAttached("HideMoreButton", typeof(bool), typeof(CommandBarExtensions), 
            new PropertyMetadata(false, OnHideMoreButtonChanged));

    public static bool GetHideMoreButton(UIElement element)
    {
        if (element == null) throw new ArgumentNullException(nameof(element));
        return (bool)element.GetValue(HideMoreButtonProperty);
    }

    public static void SetHideMoreButton(UIElement element, bool value)
    {
        if (element == null) throw new ArgumentNullException(nameof(element));
        element.SetValue(HideMoreButtonProperty, value);
    }

    private static void OnHideMoreButtonChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var commandBar = d as CommandBar;
        if (e == null || commandBar == null || e.NewValue == null) return;
        var morebutton = commandBar.FindDescendantByName("MoreButton");
        if (morebutton != null)
        {
            var value = GetHideMoreButton(commandBar);
            morebutton.Visibility = value ? Visibility.Collapsed : Visibility.Visible;
        }
        else
        {
            commandBar.Loaded += CommandBarLoaded;
        }
    }

    private static void CommandBarLoaded(object o, object args)
    {
        var commandBar = o as CommandBar;
        var morebutton = commandBar?.FindDescendantByName("MoreButton");
        if (morebutton == null) return;
        var value = GetHideMoreButton(commandBar);
        morebutton.Visibility = value ?  Visibility.Collapsed : Visibility.Visible;
        commandBar.Loaded -= CommandBarLoaded;
    }
}

On initial binding it uses the Loaded event to apply the hiding once it has been loaded. The FindDescendantByName is another extension method that iterates the visual tree. You might want to create or grab one if your solution does not yet contain it.