Image not always showing from ImageBrush; resetting screen scale makes it appear

[JonPerkinsOldGit]

Describe the bug

A simple ImageBrush control that is within a Rectangle.Fill, inside a GridView.Header doesn't always display the image.

I created my app using the latest template studio framework, and lifted the home page code from the latest WinUI 3 Gallery app. For reference to that app I am specifically talking about the top image which contains the orange ribbons, the "WinUI 3 Gallery" title text, and the "WinAppSDK 1.1" sub-header.

The crucial fragment of xaml is shown below, relevant code is at line 5:

        <GridView.Header>
            <Grid x:Name="HeaderGrid" Margin="12,39,43,50">
                <Rectangle Height="256" RadiusX="20" RadiusY="20" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="/Assets/OneDesktopSplash.jpg" Stretch="UniformToFill"/>
                    </Rectangle.Fill>
                </Rectangle>

                <TextBlock AutomationProperties.AutomationId="__ClickableAreaTextBlock" />
                <StackPanel Orientation="Vertical" Margin="50,80,0,20">
                    <TextBlock x:Name="smallHeaderText"
            Foreground="Black"
            Visibility="Visible"
            Style="{StaticResource TitleTextBlockStyle}"
            Text="xApp name goes here"/>
                    <TextBlock x:Name="smallHeaderSubtitleText"
            Foreground="Black"
            Visibility="Visible"
            Style="{StaticResource SubtitleTextBlockStyle}"
            Text="xVersion info goes here"/>

On about 70% of client computers they are seeing my version of the image that goes here - in my case "OneDesktopSplash.jpg". However, some clients do not have an image here at all so they just see the text. Needless to say this doesn't happen on any of my test computers but I did make a discovery today which has prompted me to raise this report in case somebody has enough information to make an educated guess. The client in question just purchased a new Win 11 computer so, via a remote desktop, I was also helping her with some of the general Settings parameters - fortunately I was doing this while my app was still open. She has a good resolution on her display - 3000 x 1920(?), with a Scale setting of 200%. There is quite a bit of content on my home page so I tried reducing the scale down to 175% - and the missing image appeared! When I set it back to 200% it was still there.

Is there a known issue of this type? I hate to waste your time but I couldn't see any references to this behaviour anywhere else.

Thank you.

Steps to reproduce the bug

As demonstrated by the code fragment. I cannot see any distinguishing factor as to when the image is shown and when it is not.

Expected behavior

Image should always be shown, there is no code in xaml or C# to make it invisible etc.

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.1.5

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 11 (21H2): Build 22000

Additional context

No response

[michael-hawker]

We discovered this issue when porting a sample over for a new component we're working on in the Windows Community Toolkit, see CommunityToolkit/Labs-Windows#354

I was able to create a detailed reproduction of the issue (think there's a couple) related to how ImageBrush is being loaded for different scenarios related to parent's visibility and things like CornerRadius, on the latest WinAppSDK version as well.

There is definitely some aspect that is DPI/Scale dependent as mentioned in this issue (compared to earlier #7718 issue).

In my testing CornerRadius appears to be a big suspect in when the issue reproduces, but using resources over hard-coded urls matters to in certain scenarios:

However, if I move window to a monitor with a different DPI (either before or after clicking button to load parent element):

One of the two failure cases will now appear!

I didn't have a case for non-shared resource and no corner radius; but that works fine, just like the other non-cornerradius scenario.

In contrast, everything works fine in UWP:

Attached here is a full repro project for the above showing the minimal test cases with heads to run the exact same code on both UWP and the Windows App SDK:

BlankImageBrush.zip

Repros on both Windows 10 and Windows 11.

[michael-hawker]

Bumping, based on #8638