减少底部应用程序栏中的应用程序栏按钮大小在 windows 通用应用程序中用于移动视图答案

【问题标题】：Reduce the Appbar Button Size in Bottom appbar In windows Universal app For the Mobile View减少底部应用程序栏中的应用程序栏按钮大小在 windows 通用应用程序中用于移动视图
【发布时间】：2016-06-10 11:08:00
【问题描述】：

我正在做 windows 通用平台 (UWP) 的项目。在这个项目中，我有一个关于底部 Appbar 的问题。

我设计了一个底部 Appbar 并添加了一个 7 Appbar Button.which 在桌面和表格视图中正确显示，但在移动视图中它没有正确显示。我捕获了移动和桌面视图的底部 Appbar 照片。所以请提供移动视图的解决方案，我如何管理所有 7 个 appbar 按钮？如何减小 appbar 按钮的大小？因此它将在移动视图中正确显示。

代码：

<Page.BottomAppBar>
    <AppBar x:Name="applicationbar" Background="#FFE45427">
        <StackPanel x:Name="bottombar"   Orientation="Horizontal" HorizontalAlignment="Center">

            <AppBarButton Label="HOME" x:Name="appbarhome" Click="appbarhome_Click">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Images/DashboardImages/product-default-small.png" />
                </AppBarButton.Icon>
            </AppBarButton>



            <AppBarButton Label="Sales" x:Name="appbarsales" Click="appbarsales_Click">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Images/DashboardImages/menu_sales.png"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="Product" x:Name="appbarproduct" Click="appbarproduct_Click">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Images/DashboardImages/menu_product.png" />
                </AppBarButton.Icon>
            </AppBarButton>

            <AppBarButton Label="POS" x:Name="appbarpos" Click="appbarpos_Click">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Images/DashboardImages/menu_pos.png"/>
                </AppBarButton.Icon>
            </AppBarButton>

            <AppBarButton Label="Customer" x:Name="customer" Click="customer_Click">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Images/DashboardImages/menu_customers.png"/>
                </AppBarButton.Icon>
            </AppBarButton>

            <AppBarButton Label="About US" x:Name="aboutUs" Click="aboutUs_Click">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Images/DashboardImages/menu_aboutus.png"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="Logout" x:Name="mobile_logout_commandbar" Click="mobile_logout_commandbar_Click">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="Images/DashboardImages/menu_logout.png"/>
                </AppBarButton.Icon>

            </AppBarButton>


        </StackPanel>

    </AppBar>


</Page.BottomAppBar>

图片：

【问题讨论】：

您应该对视图大小的变化做出反应，当它变窄时，将一些项目放在SecondaryCommands 菜单中。减小按钮的宽度会使它们更难点击，这不是解决此问题的方法。

标签： xaml win-universal-app windows-10 uwp

【解决方案1】：

我建议改变设计。如果那不是一个选项，请选择包含所有应用栏按钮的水平滚动查看器。

【讨论】：

【解决方案2】：

我们可以提供 Minheight 和 MaxHeight 来减小按钮大小，但在 Mobile 视图中看起来不会更好，因此我们需要使用 Menuflylaouts。

代码：

<AppBarButton Icon="OpenWith" Label="More.."  x:Name="more_item">
                    <AppBarButton.Flyout>
                        <MenuFlyout>
                            <MenuFlyout.MenuFlyoutPresenterStyle>
                                <Style TargetType="MenuFlyoutPresenter">
                                    <Setter Property="Margin" Value="0,-31,0,0" />
                                    <Setter Property="Background" Value="#FFE45427" />
                                    <Setter Property="FontSize" Value="12" />
                                    <Setter Property="BorderBrush" Value="Transparent" />
                                    <Setter Property="MaxWidth" Value="70"/>
                                </Style>
                            </MenuFlyout.MenuFlyoutPresenterStyle>
                            <MenuFlyoutItem Text="Logout" FontSize="13" Padding="8,8,0,8"   Click="logout_Click" />
                            <MenuFlyoutItem Text="About Us" FontSize="13" Padding="8,8,0,8"  Click="aboutus_click" />
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>

这样我们可以轻松地在应用栏中添加多个按钮，并且在移动视图中看起来会更好。

【讨论】：