Multiple Views With Blades

Question

I am attempting to create an UWP application that will allow users to open new windows. I've based the creation of the new windows on Microsoft's Multiple Views Sample

I'm experiencing an odd error when the new view contains a blade (from Microsoft.Toolkit.Uwp.UI.Controls). The error is:

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)

To replicate the error add the following code to the linked sample on line 49 in SecondaryViewPage.xaml:

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

Then perform the following steps:

1. Create a new view
2. Show the view
3. Close the view
4. Create a new view

Can anyone identify what is causing the error, or tell me if blades inside a standalone view just don't work?

Answer 1

Interesting. The issue is actually caused by the default style of the BladeItem for some reason.

Since you are already setting TitleBarVisibility to Collapsed, it's quite simple to fix this. All you need is to apply the below style to your BladeItem. The only difference between this and the default one is the inner Grid has been commented out. Yes, that's where the issue is.

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

Update

OK, after some digging, I have found that the real issue actually lies in two properties of the BladeItem - TitleBarForeground and CloseButtonForeground. This could be a UWP bug since the workaround is as simple as providing some default values (see the xaml code below) for them, although the same default values are already set in their dependency property declarations.

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

Note now with the two lines of code above, you no longer need to comment out the inner Grid.