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

我正在研究Windows通用平台（UWP）的项目。在此项目中，我有一个关于底部Appbar的发布。减少底部appbar中的Appbar按钮大小在Windows通用应用程序中对于移动视图

我设计了一个底部的Appbar，并添加了一个7 Appbar Button.which在桌面和列表视图中正确显示，但在移动视图中显示不正确。我捕获了Mobile和Desktop视图的底部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>

图片：

Image of the Bottombar for Mobile and Dekstop view

来源

2016-06-10 Hardik Kothari

您应该查看大小更改，当其变窄时，将[SecondaryCommands]（https://msdn.microsoft.com/library/windows/apps/dn279434）菜单中的某些项目放入。减小按钮的宽度使它们更难以点击，并且不是解决这个问题的方法。 –

我们可以提供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>

这种方式，我们可以很容易地在应用程序栏添加muliple按钮，它会看在移动视图更好。

来源

2016-07-02 04:51:57

我会建议在设计上的变化。如果这不是一个选项去水平scrollviewer包含所有的appbar按钮。

来源

2016-06-10 11:13:43

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

回答

相关问题