使用单击事件最小化 UWP 中的 CommandBar

Question

我的 UWP 应用程序中有一个命令栏，我想隐藏该栏并仅在用户单击隐藏按钮时显示一个省略号按钮。此外，我希望在启动应用程序时命令栏为 opened/shown。

这是我的命令栏的样子，

当我点击最后一个按钮时，我正试图得到这样的东西：

这是我的设计器代码：

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

对于我的按钮点击事件：

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

Answer 1

你应该这样做，这样 -

首先删除您现有的命令栏，因为您是在您在页面中实现的网格或框架下实现它的。所以你不需要垂直底部对齐或水平拉伸。

XAML

在这里，我将应用栏模式设置为紧凑，这样每次您的页面加载时，它都会根据需要采用紧凑模式。

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

将这行代码添加到网格之外意味着您的 xaml 引用结束的底部

below tihs- mc:Ignorable="d">

然后在应用栏按钮上单击事件 -

C#

此外，如果应用栏处于 Compact 模式，它将 Minimal 再次 Compact 再来一次

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

输出

您可以根据您的要求进行自定义，也可以为此使用工具按钮。

更新

对于您的评论问题- 首先在 xaml -

中设置默认值

OverflowButtonVisibility="Collapsed"

并更新了 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;
    }
}

Answer 2

在按钮 click 事件中设置 IsOpen = false、ClosedDisplayMode = Minimal 和 OverflowButtonVisibility = Visible。

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

在Opening事件中设置OverflowButtonVisibility = Collapsed

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

在Opened事件中设置ClosedDisplayMode = Compact

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

使用单击事件最小化 UWP 中的 CommandBar

Minimise a CommandBar in UWP with on click event

commandbar

uwp