UWP NavigationView BackButton Not work properly

Question

I have set the ExtendViewIntoTitleBar property for my page and IsTitleBarAutoPaddingEnabled="False" for my NavigationView But now I can not easily click the back button (mouse cant hover back button)

Please see the image below

and this is microsoft sample project (xaml controls gallery) that work fine with this two proeprty

And another question I have is how can I put the program name next to the back button like in the Microsoft sample project?

Answer 1

The default drag area is still there, it's just not visible. The pointer over and clicked event will only work for the parts of the button that are slightly larger then the titlebar. There's a fix however: by setting another UI element that can act as the drag-gable zone.

<Grid>
 <muxc:NavigationView/>
          
<Grid Height="32" VerticalAlignment="Top">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="32"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid x:Name="DragGrid" Background="Transparent" Grid.Column="1">
    <TextBlock Text="App Title" Margin="8,8,0,0"/>
  </Grid>
 </Grid>
</Grid>

Then, set your custom grid as the window's titlebare by adding it in the contructor:

public MainPage()
        {
            this.InitializeComponent();
            Window.Current.SetTitleBar(DragGrid);
        }