0

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

Luca Benatti
  • 175
  • 3
  • Hi, have you modified the default style? Can you provide the target version and minimum version of your application, as well as the system version? I created a `CommandBar` in the 1909 system, and the same problem did not occur. – Richard Zhang Apr 12 '20 at 23:38
  • @RichardZhang-MSFT for me it occurs with the default style, both with a MinTargetVersion of 17763 and a MinTargetVersion of 19041. I created an extended bug report at https://stackoverflow.com/questions/64524669/uwp-commandbar-moves-vertically-when-isopen-changes. Any help or workaround would be appreciated. – hansmbakker Oct 25 '20 at 14:33

2 Answers2

1

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.

ardget
  • 2,561
  • 1
  • 5
  • 4
0

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.

ardget
  • 2,561
  • 1
  • 5
  • 4
  • I tried it before posting the problem. But it doesn't work, same bug occurs. If you try to modify a copy of the model for AppBarButton the style turns into the one for AppBar (so I can't find the default Style). If you change DefaultLabelPosition property into Right everything works fine, (only Collapsed and Bottom raise the problem). I can't have the same command bar as the one in Allarms and Clock W10 app, to be clear. – Luca Benatti Apr 13 '20 at 07:19
  • Sorry, I can't well understand what's your question. As far as i know, it's surely possible to make CommandBar look like that in Alarm & Clock app by modifying Styles; Roughly, CommandBar(Height=48->40 and Stride=12->16) and AppBarButton(Height=60->56). If you are facing some trouble in writing your original Styles, please describe it in detail, providing all the relevant codes. – ardget Apr 14 '20 at 12:52