带刀片的多个视图

Question

我正在尝试创建一个允许用户打开新 windows 的 UWP 应用程序。我基于 Microsoft's Multiple Views Sample

创建了新的 windows

当新视图包含 blade（来自 Microsoft.Toolkit.Uwp.UI.Controls）时，我遇到了一个奇怪的错误。错误是：

System.Runtime.InteropServices.COMException: Error HRESULT E_FAIL has been returned from a call to a COM component. at Windows.UI.Xaml.FrameworkElement.MeasureOverride(Size availableSize)

要复制错误，请将以下代码添加到 SecondaryViewPage.xaml 中第 49 行的链接示例中：

<controls:BladeView x:Name="BladeView" Grid.Column="0"
            Padding="0"
            BladeMode="{Binding BladeMode.Value}">
    <controls:BladeItem
                TitleBarVisibility="Collapsed"
                IsOpen="True" Width="300" />
</controls:BladeView>

然后执行以下步骤：

创建新视图
显示视图
关闭视图
创建新视图

任何人都可以确定导致错误的原因，或者告诉我独立视图中的 blades 是否不起作用？

Answer 1

有意思。该问题实际上是由 BladeItem 的默认样式由于某种原因引起的。

由于您已经将 TitleBarVisibility 设置为 Collapsed，因此解决此问题非常简单。您只需要将以下样式应用到您的 BladeItem。这与默认值之间的唯一区别是内部 Grid 已被注释掉。是的，这就是问题所在。

<Style x:Key="MyBladeStyle" TargetType="controls:BladeItem">
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
    <Setter Property="TabNavigation" Value="Local" />
    <Setter Property="IsHoldingEnabled" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}" />
    <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:BladeItem">
                <Grid BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!--<Grid Background="{TemplateBinding TitleBarBackground}"
                          Visibility="{TemplateBinding TitleBarVisibility}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Margin="4,0,0,0"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Foreground="{TemplateBinding TitleBarForeground}"
                                   Text="{TemplateBinding Title}" />
                        <Button Name="CloseButton"
                                Grid.Column="1"
                                TabIndex="0"
                                HorizontalAlignment="Right"
                                AutomationProperties.Name="Cancel"
                                Background="{TemplateBinding CloseButtonBackground}"
                                Content="&#xE711;"
                                FontFamily="Segoe MDL2 Assets"
                                Foreground="{TemplateBinding CloseButtonForeground}" />
                    </Grid>-->

                    <ContentPresenter Grid.Row="1"
                                      VerticalAlignment="Stretch"
                                      Background="{TemplateBinding Background}"
                                      Visibility="{TemplateBinding IsOpen}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

更新

好的，经过一些挖掘，我发现真正的问题实际上在于 BladeItem 的两个属性 - TitleBarForeground 和 CloseButtonForeground。这可能是一个 UWP 错误，因为解决方法就像为它们提供一些默认值（参见下面的 xaml 代码）一样简单，尽管相同的默认值已经在它们的依赖项属性声明中设置。

<!-- Add the following to the default style -->
<Setter Property="TitleBarForeground" Value="Black" />
<Setter Property="CloseButtonForeground" Value="Black" />

注意上面两行代码，你不再需要注释掉里面的Grid.

带刀片的多个视图

Multiple Views With Blades

uwp

uwp-xaml

windows-community-toolkit

更新