UWP-防止裁剪NavigationViewItemHeader [英] UWP - Prevent NavigationViewItemHeader from being clipped

问题描述

我正在编写一个UWP应用，它的 NavigationView 包含 NavigationViewItemHeader s:

I am writing a UWP app that has a NavigationView containing NavigationViewItemHeaders:

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

(依此类推)

但是，当我折叠视图时，标题会被裁剪:

However when I collapse the view, the headers get clipped:

我应该怎么做才能防止这种情况?

What should I do to prevent this?

推荐答案

解决方案1 ​​

增加项目标题的左边距:

Increase the left margin of item headers:

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

解决方案2

通过将 CompactModeThresholdWidth 和 ExpandedModeThresholdWidth 设置为较大的数字来禁用 NavigationView 的紧凑和扩展显示模式:

Disable compact and expanded display mode of the NavigationView by setting the CompactModeThresholdWidth and ExpandedModeThresholdWidth to some big number:

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

解决方案3

按照AndréB建议，将项目标题的 Visibility 属性绑定到 NavigationView 的 IsPaneOpen 属性中，仅使用 x:绑定而不是 Binding ，因为它不需要转换器:

Bind the Visibility property of item headers to the IsPaneOpen property of the NavigationView as André B suggested, only use x:Bind instead of Binding since it doesn't need a converter:

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

这篇关于UWP-防止裁剪NavigationViewItemHeader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！