如何将图片标题放在NavigationView的顶部？

Question

如何在 Microsoft.UI.Xaml.Controls（UWP 应用程序）中的 NavigationView 顶部制作标题？

我设法使用 PaneHeader 属性制作标题，但我希望将图形放在菜单按钮上方。

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

这是我得到的结果：

这就是我所期望的：

Answer 1

建议使用标题栏自定义来获得您想要的效果。在自定义标题栏中添加图像。

主页.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);
}

更新

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;
}