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.