Minimise a CommandBar in UWP with on click event

Question

I have a commandbar in my UWP application, and I want to hide the bar and only display a ellipsis button when a user click on the hide button. In additional, I would like the commandbar to be opened/shown when the application is being launched.

This is what my command bar looks like,

And I am trying to get something like this, when I click on the last button:

Here is my code for the designer:

<CommandBar IsSticky="True"
                Name="WebViewCommandBar"
                Height="52"
                Background="{StaticResource CitiKioskBackgroundBrush}"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Bottom"
                OverflowButtonVisibility="Collapsed">

        <CommandBar.Transitions>
            <TransitionCollection>
            </TransitionCollection>
        </CommandBar.Transitions>

        <CommandBar.PrimaryCommands>

            <AppBarButton Icon="Back"

                          IsCompact="True"
                          IsEnabled="{Binding CanGoBack,ElementName=webView}"
                          Name="WebViewBackButton"
                          Click="WebViewBackButton_Click" />
            <AppBarButton Icon="Forward"

                          IsCompact="True"
                          IsEnabled="{Binding CanGoForward,ElementName=webView}"
                          Name="WebViewForwardButton"
                          Click="WebViewForwardButton_Click" 
                          Margin="0 0 1450 0"/>

            <AppBarButton 
                          IsCompact="True"
                          Name="WebViewContactButton"
                          Click="WebViewContactButton_Click" 
                          Foreground="White">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="ms-appx:///Assets/Images/icon_smsLocation.png"/>
                </AppBarButton.Icon>
            </AppBarButton>

            <AppBarButton Icon="Refresh"

                          IsCompact="True"
                          Name="WebViewRefreshButton"
                          Click="WebViewRefreshButton_Click" 
                          Foreground="White"/>
            <AppBarButton Icon="DockBottom"

                          IsCompact="True"
                          Name="WebViewHideNavigationButton"
                          Click="WebViewHideNavigationButton_Click" 
                          Foreground="White"/>


        </CommandBar.PrimaryCommands>

    </CommandBar>

And for my button click event:

private void WebViewHideNavigationButton_Click(object sender, RoutedEventArgs e)
    {
        WebViewCommandBar.IsOpen = false;
    }

score 2 · Accepted Answer · answered Oct 30 '17 at 09:21

Set IsOpen = false, ClosedDisplayMode = Minimal and OverflowButtonVisibility = Visible in your button click event.

private void MinimalButton_Click(object sender, RoutedEventArgs e)
{
    MyCommandBar.IsOpen = false;
    MyCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Minimal;
    MyCommandBar.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Visible;
}

Set OverflowButtonVisibility = Collapsed in Opening event

private void MyCommandBar_Opening(object sender, object e)
{
    MyCommandBar.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Collapsed;
}

Set ClosedDisplayMode = Compact in Opened event

private void MyCommandBar_Opened(object sender, object e)
{
    MyCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
}

Shubham Sahu · Answer 2 · 2017-10-30T05:40:17.773

You Should do this, this way -

First Remove your existing command bar because you are implementing it under the grid or frame you implement in page. so you don't need to align it vertically bottom or horizontally stretch.

XAML

Here i set app bar mode to compact so every time your page loads it will in compact mode as you want.

<Page.BottomAppBar>
    <CommandBar IsSticky="True" Name="WebViewCommandBar" ClosedDisplayMode="Compact">
        <AppBarButton Icon="DockBottom"
                      IsCompact="True"
                      Name="WebViewHideNavigationButton"
                      Click="WebViewHideNavigationButton_Click" 
                      Foreground="{StaticResource AppBarButtonForeground}"/>
    </CommandBar>
</Page.BottomAppBar>

Add this line of codes out of grid means bottom of where your xaml references is end

below tihs- mc:Ignorable="d">

and then on app bar button click event -

C#

In addtitionally i put if app bar is in Compact Mode the it will Minimal it else again Compact it again

private void WebViewHideNavigationButton_Click(object sender, RoutedEventArgs e)
{
    if(WebViewCommandBar.ClosedDisplayMode == AppBarClosedDisplayMode.Compact)
    {
        WebViewCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Minimal;
    }
    else
    {
        WebViewCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
    }
}

Output

Your can customize according to you requirement or you can either use toogle button for this.

Update

For your commented question- First set Default in xaml -

OverflowButtonVisibility="Collapsed"

and updated C#

private void WebViewHideNavigationButton_Click(object sender, RoutedEventArgs e)
{
    if(WebViewCommandBar.ClosedDisplayMode == AppBarClosedDisplayMode.Compact)
    {
        WebViewCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Minimal;
        WebViewCommandBar.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Visible;
    }
    else
    {
        WebViewCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
        WebViewCommandBar.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Collapsed;
    }
}

Hi, one quick question... because I dont want the ellipsis button to be shown in the command bar, hence I placed "OverflowButtonVisibility="Collapsed" in the codes.... but even the when the command bar is in minimal mode... there is no "..." shown in the bar — thalassophile, Oct 30 '17 at 05:30
are you want to show ellipse only in minimal mode ? very simple just think and code wait i am updating answer for this — Shubham Sahu, Oct 30 '17 at 05:35
Yup yup, I only want to show the ellipse when in minimal mode...Thank you so much^^ — thalassophile, Oct 30 '17 at 05:37

Minimise a CommandBar in UWP with on click event

2 Answers2

Linked