Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change height of Bottom AppBar in XAML UWP

Tags:

xaml

uwp

uwp-xaml

Is there any way to decrease the height of Bottom AppBar in XAML UWP? I have the below XAML code:

<Page.BottomAppBar>
    <CommandBar Height="35">
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="Share"/>
            <AppBarButton Label="Settings"/>
            <AppBarButton Label="Settings"/>
            <AppBarButton Label="Settings"/>
            <AppBarButton Label="Settings"/>
            <AppBarButton Label="Settings"/>
            <AppBarButton Label="Settings"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Problem is, when I set height to 35 or below 50, I see an extra blank space just above the bottom AppBar. And if I use Black or Blue as background colour, that blank space renders with white colour

See the screen shot

like image 223
Yeasin Abedin Avatar asked Mar 12 '23 04:03

Yeasin Abedin


1 Answers

The easist way to fix this is to override the corresponding theme resource in the App.xaml.cs file.

<Application
    x:Class="MyApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    RequestedTheme="Light">

    <Application.Resources>
        <x:Double x:Key="AppBarThemeCompactHeight">35</x:Double>
    </Application.Resources>
</Application>

The way I found this predefined resource is, first I googled up the default Style of the CommandBar, then I basically just went through and found the ones that are related to Height.

like image 159
Justin XL Avatar answered Mar 28 '23 08:03

Justin XL