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;
    }

Answer 1

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;
}

Answer 2

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;
    }
}