Search code examples
xamluwpoverlappingcommandbar

UWP CommandBar overlapping


I have an issue with CommandBar in UWP Apps (see pictures below)

enter image description here here you can see the CommandBar in CompactMode and a TextBlock with Text "Title". When I now expand (click on the three dots) the CommandBar, the TextBlock disappears, like shown here:

enter image description here How can I prevent the TextBlock from disappearing?

When I close the expanded CommandBar, it goes back to the state, from picture 1, showing the TextBlock.

The Code:

<Grid x:Name="cmdBarDesktop" Grid.Row="0">
  <CommandBar ClosedDisplayMode="Compact" IsOpen="True" IsSticky="True">
    <CommandBar.PrimaryCommands>
        <AppBarButton x:Name="AppBarListDesktop" Icon="List" Label="Listenform" Grid.Column="1" Click="AppBarList_Click" />
        <AppBarButton x:Uid="AppBarAdd" Icon="Add" Label="Hinzufügen" Grid.Column="3" Click="AppBarAdd_Click" />
    </CommandBar.PrimaryCommands>
  </CommandBar>
</Grid>

<Grid x:Name="titleGrid" VerticalAlignment="Center" Grid.Row="0">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>

  <TextBlock Text="Hausaufgaben" Style="{StaticResource TitleTextBlockStyle}" Grid.Column="1" VerticalAlignment="Center" />
</Grid>

Solution

  • Inside Content of the CommandBar control you can add a TextBlock.

     <CommandBar ClosedDisplayMode="Compact">
                <CommandBar.Content>
                    <TextBlock Text="Title" />
                </CommandBar.Content>
    
                <CommandBar.PrimaryCommands>
                    <AppBarButton Icon="List"
                                  Label="Listenform" />
                    <AppBarButton Icon="Add"
                                  Label="Hinzufügen" />
                </CommandBar.PrimaryCommands>
     </CommandBar>
    

    It will solve your problem in both scenarios.