Reduce the Appbar Button Size in Bottom appbar In windows Universal app For the Mobile View

1
votes

I am working on the project of windows universal platform(UWP).In this Project I have a issued regarding to the bottom Appbar.

I designed a bottom Appbar and add a 7 Appbar Button.which is displayed Properly in desktop and tabulate view, but in mobile view its not properly displayed. I captured a bottom Appbar photo of the both Mobile and Desktop view. so kindly give a solution for mobile view how i manage all 7 appbar button? how to reduce appbar button size ? so it will display proper in mobile view.

Code:

<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:

Image of the Bottombar for Mobile and Dekstop view

2
xamlwin-universal-appwindows-10uwp
You should react to view size changes, when its narrow, put some of the items in the SecondaryCommands menu. Reducing width of buttons make them harder to tap and is not a solution for this problem. – Mehrzad Chehraz

2 Answers

0
votes

I would recommend change in design. If thats not an option go for horizontal scrollviewer that contains all your appbar buttons.

0
votes

We can provide Minheight and MaxHeight to reduce button size but it will not look better in Mobile view so we need to use Menuflylaouts.

Code:

<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>

and this way we can easily add muliple button in app bar and it will look better in mobile view.