How to make image header on the top of NavigationView?

Question

How could I make a header on the top of NavigationView in Microsoft.UI.Xaml.Controls (UWP app) ?

I managed to make header using PaneHeader property, but I would like to have the graphic above the menu button.

<muxc:NavigationView.PaneHeader>
    <Image Source="Resources/header.png" HorizontalAlignment="Center" Height="45"/>
</muxc:NavigationView.PaneHeader>   
    

This is the result I have:

And this is what I expect:

Answer 1

It is recommended to use Title bar customization to get the effect you want. Add the image in the custom title bar.

MainPage.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid x:Name="AppTitleBar" Background="Transparent">
        <Image Source="Assets/header.png" 
       Grid.Column="1"
       HorizontalAlignment="Left"
       Width="200" Height="50"
       Margin="8,0,0,0"/>
    </Grid>

    <muxc:NavigationView Grid.Row="1"  IsBackButtonVisible="Collapsed">
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem Content="A"/>
            <muxc:NavigationViewItem Content="B"/>
            <muxc:NavigationViewItem Content="C"/>
        </muxc:NavigationView.MenuItems>
        <Frame x:Name="ContentFrame"/>
    </muxc:NavigationView>

</Grid>

---

MainPage.xaml.cs

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    // Set XAML element as a drag region.
    Window.Current.SetTitleBar(AppTitleBar);
}

UPDATE

private void NavigationView_PaneClosed(Microsoft.UI.Xaml.Controls.NavigationView sender, object args)
{
    imgTest.Visibility = Visibility.Collapsed;
}

private void NavigationView_PaneOpened(Microsoft.UI.Xaml.Controls.NavigationView sender, object args)
{
    imgTest.Visibility = Visibility.Visible;
}