UWP Custom TitleBar button could not be clicked

Question

I have a custom TitleBar whose view has been extended into titlebar, meaning that I have done this:

Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

You can see from the image below, it is simply a back button (which is visible when you navigate to other pages) and a TextBlock. However, I cannot click on that button. Why is that? I have put the title bar above the NavigationView. And I also cannot find the Background of that button. I have set it to transparent, it should display the color beneath it but it doesn't. I also have tried changing the background of the elements around it but my efforts don't work out.

The image I posted is just an example when the window is narrow, it is still the same case when the window is expanded.

This is the structure of the XAML of that main page, source code here:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <NavigationView
        x:Name="MainNavigationView"
        Grid.Row="1"
        IsBackButtonVisible="Collapsed"
        IsBackEnabled="True"
        Style="{StaticResource MainNavigationViewStyle}"
        TabNavigation="Cycle">
        <Frame
            x:Name="NaviFrame"
            IsNavigationStackEnabled="True"
            Navigated="NaviFrame_Navigated" />
    </NavigationView>
    <Grid
        x:Name="AppTitleBar"
        Height="32"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Background="Transparent">
        <Border
            x:Name="AppTitleBorder"
            Width="{x:Bind MainNavigationView.OpenPaneLength}"
            HorizontalAlignment="Left"
            VerticalAlignment="Stretch"
            Background="Transparent" />
        <StackPanel Orientation="Horizontal">
            <Button
                x:Name="BackButton"
                Background="Transparent"
                Click="BackButton_Click"
                Style="{StaticResource BackButtonStyle}"
                Visibility="Collapsed" />
            <TextBlock
                x:Name="AppTitle"
                Height="{x:Bind AppTitleBar.Height, Mode=OneWay}"
                Padding="10,8"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Style="{StaticResource CaptionTextBlockStyle}"
                Text="{x:Bind appmodel:Package.Current.DisplayName}"
                Visibility="Collapsed" />
        </StackPanel>
    </Grid>
    <Button
        x:Name="FakeTogglePaneButton"
        Grid.Row="1"
        Background="{StaticResource MinimalTitleBarColor}"
        Click="FakeTogglePaneButton_Click"
        Style="{ThemeResource PaneToggleButtonStyle}"
        Visibility="Collapsed" />
    <local:MediaControl
        x:Name="MainMediaControl"
        Grid.Row="2"
        Mode="Main" />
</Grid>

Answer 1

In the Page_Loaded method, you have set the AppTitleBar Grid as the title bar of your app. That's the problem. The FrameworkElement you set as the titlebar of your app, is supposed to be non-responsive, because normally you move the app window by dragging the titlebar.

Place a Rectangle or Border underneath the responsive part, and set that Rectangle or Border as the titlebar.

You can take a look at this blog for more details.