UWP - 防止 NavigationViewItemHeader 被剪裁

Posted 2023-02-25

【中文标题】UWP - 防止 NavigationViewItemHeader 被剪裁

【英文标题】：UWP - Prevent NavigationViewItemHeader from being clipped

【发布时间】：2017-12-23 20:33:27

【问题描述】：

我正在编写一个包含NavigationViewItemHeaders 的NavigationView 的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>

（等等）

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

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

【参考方案1】：

解决方案 1

增加项目标题的左边距：

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

解决方案 2

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

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

解决方案 3

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

【讨论】：

还可以防止在窗口宽度最小时显示错误的标题。 CompactModeThresholdWidth="1" AlwaysShowHeader="False"

【参考方案2】：

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

顾名思义，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 类型，您需要创建一个转换器，因此您的布尔状态可以分配给一个对可见性属性有意义的值。 对于我们的情况，我们希望：

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

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

默认情况下，Binding 的 Mode 设置为 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"

下面，定义您的转换器的资源并给它一个键，以便您可以在Binding 定义中引用它。

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

在绑定定义中引用了转换器资源BoolToVis，每当IsPaneOpen 属性发生更改时，都会调用Convert 函数将我们的布尔值转换为可见性。

结果：