UWP - 防止NavigationViewItemHeader被剪裁

Question

我正在写一个UWP应用程序，其中包含NavigationView，其中包含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>

（等等）

但是，当我折叠视图时，标题会被剪切：

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

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

正如AndréB所建议的那样，将项目标题的Visibility属性绑定到IsPaneOpen的NavigationView属性，只使用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>

Answer 2

定义NavigationView对象的名称属性x:Name，以便可以访问其IsPaneOpen属性。使用Binding属性ElementName，获取要用作绑定Source的元素，以及使用该属性定义的唯一标识符。

名称建议的IsPaneOpen属性标识窗格是否打开它的全宽，可用于切换NavigationViewItemHeader.Visibility属性的可见性！

<NavigationView x:Name="NavView" ... >

    <NavigationViewItemHeader x:Name="ThemesHeading" Content="Themes" 
            Visibility="{Binding IsPaneOpen, 
                        ElementName=NavView, 
                        Converter={StaticResource BoolToVis}}"/>

</NavigationView>

由于IsPaneOpen属性返回Boolean值，而Visibility的类型为Enum，因此需要创建一个Converter，因此可以将布尔状态分配给对Visibility属性有意义的值。对于我们的情况，我们希望：

NavigationView.IsPaneOpen = True - > NavigationViewItemHeader.Visibility = Visibility.Visible;

NavigationView.IsPaneOpen = False - > NavigationViewItemHeader.Visibility = Visibility.Collapsed;

默认情况下，Binding的模式设置为OneWay，这正是您想要的，因为您的NavigationView将指定NavigationViewItemHeader的可视状态，而您不需要相反的方式。

创建一个类，它将成为您的转换器！你的类必须继承IValueConverter接口。在我的例子中，我创建了一个名为“Converter”的文件夹，并在那里定义了BooleanToVisibilityConverter。

namespace MyUWPApplication.Converter
{
    class BooleanToVisibilityConverter : IValueConverter
    {
        public BooleanToVisibilityConverter()
        {
        }

        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (value is bool && (bool)value)
            {
                return Visibility.Visible;
            }
            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

在你的XAML页面中包含上面的Namespace（你的将会有所不同），如下所示：

xmlns:common="using:MyUWPApplication.Converter"

Bellow，定义您的Converter资源并为其提供密钥，以便您可以在Binding定义中引用它。

            <Page.Resources>
                <common:BooleanToVisibilityConverter x:Key="BoolToVis" />
            </Page.Resources>

转换器资源BoolToVis在Binding定义中被引用，并且每当IsPaneOpen属性发生更改时，将调用Convert函数将我们的布尔值转换为Visibility。

结果：