uwpcommandbar

Minimise a CommandBar in UWP with on click event


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,

CommandBar

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

CommandBar hidden

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

Solution

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

    enter image description here