Question

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

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引用结束的底部

低于tihs- mc：可忽略=＆＃34; d＆＃34;＆gt;

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

<强> C＃

另外，如果应用栏处于紧凑模式，它将最小再次紧凑再次

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

<强>输出

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

<强>更新

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

OverflowButtonVisibility =＆＃34;折叠＆＃34;

并更新 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

在按钮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;
}

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

2 个答案: