CODEWITHSUNDEEP
xamluwpcommandbar
Luca Benatti
Luca Benatti

Reputation: 175

UWP - CommandBar blank space under Buttons

This code generates a blank space, a misalignment and a misposition as you can see in the image.

    <CommandBar Grid.Row="1" IsOpen="True" VerticalAlignment="Stretch">
        <AppBarButton Icon="Add" Label="Nuovo" MinHeight="40" />
    </CommandBar>

enter image description here You can see the blank space, the add icon is too high, the Label is misplaced (more space from the icon is needed).

Upvotes: 0

Views: 349

Answers (2)

ardget
ardget

Reputation: 2651

It seems that bottom gap can be eliminated rather easily by defining some heights in Application.Resources.

App.xaml

<Application.Resources>
    <x:Double x:Key="AppBarThemeMinHeight">56</x:Double>
    <x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
</Application.Resources>

MainPage.xaml

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <AppBarButton Label="New" >
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xe109;" FontSize="16"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="Select">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xe133;" FontSize="16"/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Fine Alignment (Optional)

AppBarButton (and/or AppBarToggleButton)

To adjust icon position of each button, put a copy of the default AppBarButton style in Application.Resources and alter Margin of ContentePresenter(Name="Content"). 

<ContentPresenter x:Name="Content" Margin="0,10,0,3" ... />

CommandBar

To adjust ellipsis button's position, similarly make a copy of CommandBar style and alter Padding of Button(Name="MoreButton").

<Button x:Name="MoreButton" Padding="16,17,16,0"  ... />

Then,

Screenshot (close state/open state) of the thin CommandBar copycatting the slender BottomAppBar used in Alarms & Clock UWP app.

All the explation here-in-above are based on the default styles defined in generic.xaml ver 10.0.14393.

Upvotes: 1

ardget
ardget

Reputation: 2651

CommandBar is designed to be used in Page.TopAppBar or Page.BottomAppBar. So if you just want to to show it at bottom of the page, put it in Page.BottomAppBar plainly. Then it will work without any problems.

<Page.BottomAppBar>
    <CommandBar IsOpen="True">
        <AppBarButton Icon="Add" Label="Nuovo"/>
    </CommandBar>
</Page.BottomAppBar>

Or otherwise, if you'd like to manage to use it in the Grid inside Page.Content customizing height or other behaviors, you have to redesign entire Style for CommandBar including Template and Animations, since some important properties are hard-coded in the default Style.

Upvotes: 0

Related Questions