CommandBar does not show label fully

Question

CommandBar does not show label fully

Hong 1,436

  <Grid 
      x:Name="gridRoot" 
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      PointerEntered="Grid_PointerEntered" 
      PointerExited="Grid_PointerExited" PointerMoved="Grid_PointerMoved"
      SizeChanged="gridRoot_SizeChanged"
      VerticalAlignment="Stretch"
      HorizontalAlignment="Stretch"
      toolkit:VisibleBoundsPadding.PaddingMask="All"
        >
      
      <CommandBar
          x:Name="foo"
          VerticalAlignment="Bottom"
          Margin="0" 
          IsOpen="True"
          ClosedDisplayMode="Compact"
          >
          <AppBarButton 
              x:Name="abEmail" 
              Label="Test Email Button" 
              ToolTipService.ToolTip="For debugging" 
              Icon="Mail" 
              Click="abbEmailLog_Click"/>
      </CommandBar>
<grid>

When the CommandBar is open, it looks like the following:

User's image

When it is closed, it looks like the following:

enter image description here

How can I make the CommandBar display the label fully?

Junjie Zhu - MSFT 21,731 Reputation points

2023-11-01T03:29:38.8533333+00:00

Hello @Hong ,

Did my answer help you?

1 answer

Your answer

Junjie Zhu - MSFT 21,731 Reputation points

2023-11-01T03:29:38.8533333+00:00

Hello @Hong ,

Did my answer help you?

Answer 1

Junjie Zhu - MSFT 21,731

Hello @Hong ,

Welcome to Microsoft Q&A!

If you want to use AppBarButton in the bottom of the page, it is recommended to use Page.BottomAppBar.

 <Page.BottomAppBar>
        <CommandBar
          x:Name="foo"
          IsOpen="True"
          ClosedDisplayMode="Compact">
            <AppBarButton 
              x:Name="abEmail" 
              Label="Test Email Button" 
              ToolTipService.ToolTip="For debugging" 
              Icon="Mail"/>
        </CommandBar>
</Page.BottomAppBar>

User's image

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Hong 1,436 Reputation points

2023-10-24T11:48:32.9933333+00:00

Thank you for the answer. I am sorry but I have just realized that I should have stated that I did use <Page.BottomAppBar> initially without the issue but the problem started to occur after I moved the CommandBar into a Grid. The problem with the use of <Page.BottomAppBar> is that the window size will change when the CommandBar is made invisible (i.e. Collapse). I wonder if there is a way to make the <Page.BottomAppBar> on the top of the root Grid.

I read the official document before I posted this question. It gave me the impression that CommandBar can be used like a regular control and placed anywhere.

"Touch devices: If the command bar must remain visible to a user when the touch keyboard, or Soft Input Panel (SIP), appears then you can assign the command bar to the BottomAppBar property of a Page and it will move to remain visible when the SIP is present. Otherwise, you should place the command bar inline and positioned relative to your app content."

Junjie Zhu - MSFT 21,731

Hello @Hong ,

You can change the height of the CommandBar to meet your needs.

<Grid 
    x:Name="gridRoot" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    VerticalAlignment="Stretch"
    HorizontalAlignment="Stretch">
    <CommandBar
        x:Name="foo"
        IsOpen="True"
        VerticalAlignment="Bottom"
        Loaded="foo_Loaded"
        Opened="foo_Opened"
        Closed="foo_Closed"
        ClosedDisplayMode="Compact">
            
        <AppBarButton 
            x:Name="abEmail" 
            Label="Test Email Button" 
            ToolTipService.ToolTip="For debugging" 
            Icon="Mail"/>
            
    </CommandBar>
</Grid>

private void foo_Loaded(object sender, RoutedEventArgs e)
{
    foo.Height = abEmail.ActualHeight;
}
private void foo_Opened(object sender, object e)
{
    foo.Height = abEmail.ActualHeight;
}

private void foo_Closed(object sender, object e)
{
    foo.Height = abEmail.Height;
}

Hong 1,436 Reputation points

2023-10-25T15:01:36.4266667+00:00

Thank you. This works. Is the CommandBar supposed to work in this way or is there a glitch?

I thought that I'd better start another question related to this.
Junjie Zhu - MSFT 21,731 Reputation points

2023-10-26T02:22:03.74+00:00

If the answer is the right solution, please click "Accept Answer" and kindly upvote it.

Is the CommandBar supposed to work in this way or is there a glitch?

Because the Grid does not have a BottomAppBar, what I provide is a workaround to the problem of using the CommandBar at the bottom of the Grid.

I see the community has already answered your question.

Share via

CommandBar does not show label fully

1 answer

Your answer