하단 Appbar의 Appbar 버튼 크기 줄이기 Windows Universal App 모바일보기

저는 Windows Universal Project (UWP) 프로젝트에서 작업 중입니다.이 프로젝트에서 맨 아래 Appbar에 관한 발행이 있습니다.하단 Appbar의 Appbar 버튼 크기 줄이기 Windows Universal App 모바일보기

저는 밑바닥 Appbar를 디자인하고 7 Appbar Button을 추가했습니다. 바탕 화면 및 도표보기에는 올바르게 표시되지만 모바일보기에서는 제대로 표시되지 않습니다. 모바일 및 데스크톱보기의 하단 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

나는 디자인의 변화를 추천 할 것입니다. 모든 appbar 버튼을 포함하는 가로 스크롤 뷰어에 대한 옵션이 없다면.

출처

2016-06-10 11:13:43

하단 Appbar의 Appbar 버튼 크기 줄이기 Windows Universal App 모바일보기

답변

관련 문제