Question

我正在编写一个包含NavigationView的{{1}}的UWP应用：

NavigationViewItemHeader

（依此类推）

然而，当我折叠视图时，标题会被剪裁：

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

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的{{1}}属性，正如AndréB建议的那样，仅使用NavigationView代替x:Bind，因为它不需要转换器：

Binding

Answer 2

定义NavigationView对象的名称属性x:Name，以便您可以访问其IsPaneOpen属性。使用绑定属性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，因此您需要创建转换器，因此您的布尔状态可以分配给一个对Visibility属性有意义的值。对于我们的情况，我们想要：

NavigationView.IsPaneOpen = True - ＆gt; NavigationViewItemHeader.Visibility = Visibility.Visible;

NavigationView.IsPaneOpen = False - ＆gt; 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。

结果：

UWP - 防止NavigationViewItemHeader被剪裁

2 个答案: