UWP - 防止NavigationViewItemHeader被剪裁

Question

我正在编写一个NavigationView包含NavigationViewItemHeaders 的UWP应用程序:

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

        <NavigationViewItemSeparator/>
        <NavigationViewItemHeader x:Name="ThemesHeading" Content="Themes"/>

        <NavigationViewItem Content="Themes" Tag="themes">
            <NavigationViewItem.Icon>
                <FontIcon Glyph="&#xE771;"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>

(等等)

但是,当我折叠视图时,标题会被剪切:

我该怎么做才能防止这种情况发生？

Answer 1

解决方案1

增加项目标题的左边距:

<NavigationViewItemHeader Content="Themes" Margin="33,0,0,0"/>
...
<NavigationViewItemHeader Content="Builds" Margin="33,0,0,0"/>

解决方案2

NavigationView通过设置CompactModeThresholdWidth和ExpandedModeThresholdWidth一些大数字来禁用紧凑和扩展显示模式:

<NavigationView CompactModeThresholdWidth="100000" ExpandedModeThresholdWidth="100000">

解决方案3

将Visibility项目标题的IsPaneOpen属性绑定到NavigationViewasAndréB建议的属性,仅使用x:Bind而不是Binding因为它不需要转换器:

<NavigationView Name="MyNavigationView">
    ...
            <NavigationViewItemHeader Content="Themes" Visibility="{x:Bind MyNavigationView.IsPaneOpen, Mode=OneWay}"/>
    ...
            <NavigationViewItemHeader Content="Builds" Visibility="{x:Bind MyNavigationView.IsPaneOpen, Mode=OneWay}"/>
    ...
</NavigationView>