Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

207
Visualizações
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 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:

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?

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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.

over 4 years ago · Santiago Trujillo Relatório

0

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

over 4 years ago · Santiago Trujillo Relatório

0

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.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda