1

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

这是我的命令栏的样子，

命令栏

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

命令栏隐藏

这是我给设计师的代码： 

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

2 回答 2

1

设置IsOpen = false,ClosedDisplayMode = Minimal并OverflowButtonVisibility = Visible在您的按钮click事件中。

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

OverflowButtonVisibility = Collapsed在Opening事件中设置

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

ClosedDisplayMode = Compact在Opened事件中设置

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

在此处输入图像描述

于 2017-10-30T09:21:25.063 回答
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 引用结束的位置的底部

在 tihs- mc:Ignorable="d">

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

C＃

另外，如果应用程序栏处于压缩模式，我会将其最小化，否则再次压缩它

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

输出

截图

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

更新

对于您评论过的问题-首先在 xaml 中设置默认值-

OverflowButtonVisibility="已折叠"

并更新了 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;
    }
}
于 2017-10-30T04:32:00.127 回答