James Ko James Ko - 9 months ago 45
C# Question

Hiding the ellipsis within an AppBar

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:

top right corner

I don't want it in my app but I haven't found any methods/properties within

AppBar
that 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:

enter image description here

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 Source

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.