Hiding the ellipsis within an AppBar Hiding the ellipsis within an AppBar windows windows

Hiding the ellipsis within an AppBar


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 2017The 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.


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


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.