NavigationView can not to respond to interaction

Question

When I add a custom title bar, it does not respond to user actions.

But remove TextBlock, It is OK.

I have added these code in app.xaml.cs OnLaunched():

//draw into the title bar
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

//remove the solid-colored backgrounds behind the caption controls and system back button
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
titleBar.ButtonForegroundColor = Colors.Black;

Xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <NavigationView x:Name="NavView" AlwaysShowHeader="False" SelectionChanged="NavView_SelectionChanged" DisplayModeChanged="NavView_DisplayModeChanged">

        <NavigationView.MenuItems>
            <NavigationViewItem Content="Home" Tag="home">
                <NavigationViewItem.Icon>
                    <FontIcon Glyph="&#xE10F;"/>
                </NavigationViewItem.Icon>
            </NavigationViewItem>
        </NavigationView.MenuItems>

        <NavigationView.AutoSuggestBox>
            <AutoSuggestBox x:Name="ASB" QueryIcon="Find"/>
        </NavigationView.AutoSuggestBox>

        <Frame x:Name="ContentFrame" Margin="24">
            <Frame.ContentTransitions>
                <TransitionCollection>
                    <NavigationThemeTransition/>
                </TransitionCollection>
            </Frame.ContentTransitions>
        </Frame>
    </NavigationView>
    <TextBlock x:Name="AppTitle" Style="{StaticResource CaptionTextBlockStyle}" Text="Test"/>
</Grid>

Answer 1

Well, the issue is quite trivial.

Issue:

The reason why you can't interact with your NavigationView when the Textblock is present is because the Textbox is visually on top of the NavigationView. So when you click anywhere on the app, the click is registered on to the Textblock and not the NavigationView.

Consider it like this, the Textbock has a transparent background hence you can't see it being visually covering the whole app area but in your visual studio designer you can see that when you click on the Textblock the selection goes to the whole app area instead of the small section on the text.

Solution:

Well it's quite simple, give your Textbox a Height or Width or some kind of an Alignment (horizontal or vertical), like below:

<TextBlock x:Name="AppTitle" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Top" HorizontalAlignment="Center" Text="Test"/>

Please note: I would highly recommend you use Grid.RowDefinitions and Grid.ColumnDefinitions of the parent grid and Grid.Row and Grid.Column with VerticalAlignment and HorizontalAlignment of your Textblock to align your textbox to keep it more adaptive. Refer to my answer here to have a deeper understanding on keeping your UI adaptive

I hope this helps, please do let me know in case of any queries