How to increase the command bar height in compact mode in a UWP app?

Question

I want to increase the Height of the command bar when its property "ClosedDisplayMode" is set to "Compact". I even tried it by editing the default styles but i couldn't solve it. Please help me. I have added the image of the commandbar to resize

Answer 1

Your question and it's header are two different things, if you want to increase the height of the command bar then follow this:

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

As shown from the previous answer, but if you want to increase the height of the command bar only when the app is in compact mode then you'll have to use visual states like below:

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Normal">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="900"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Value="40" Target="{Themeresource AppBarThemeCompactHeight}"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Mobile">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Value="80" Target="{Themeresource AppBarThemeCompactHeight}"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

Answer 2

In your App.xaml page add the below resources

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

Now the height will be increased.By default height is 48 and you can change as per your requirement