减少底部appbar中的Appbar按钮大小在Windows通用应用程序中用于移动视图

Question

我正在开发Windows通用平台（UWP）的项目。在这个项目中，我发布了一个关于底部Appbar的文章。

我设计了一个底部的Appbar并添加了一个7 Appbar Button.Wich在桌面和制表视图中正确显示，但在移动视图中它没有正确显示。我拍摄了移动和桌面视图的底部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>

图片：

Answer 1

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

Answer 2

我们可以提供Minheight和MaxHeight以减少按钮大小，但在移动视图中看起来不会更好，所以我们需要使用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>

这样我们就可以在app栏中轻松添加多个按钮，在移动视图中它会更好看。