[WPF][UWP]LinearGradientBrush Query/Problem

RobDev 401 Reputation points
2024-06-14T14:16:46.0933333+00:00

Greetings All,

It's possible that I have misunderstood the LinearGradientBrush documentation and, if I have, then I would appreciate someone correcting me. However, there appears to be an anomaly regarding the LinearGradientBrush class and it applies to WPF as well as UWP. All code and screenshots below are taken from my WPF example but UWP produces exactly the same results.

The Xaml , below, shows the Xaml code from the WPF example I wrote producing the other illustrations in this text.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="405*"/>
            <RowDefinition Height="29*"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" x:Name="Bdr1" BorderBrush="Black" BorderThickness="2" Margin="20,20,20,20">
            <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="blue" Offset="0.0"/>
                        <GradientStop Color="Red" Offset="0.5"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Border>
        <TextBlock Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="WPF" FontSize="20" FontWeight="Bold" />
    </Grid>

When a diagonal linear gradient is specified using a start point of 0,0 and an end point of 1,1 as shown in Figure 1 below and indicated by the dotted line I added to the screenshot. It can be seen that there appears to be a border between the two color blocks where the two colors meet.

Figure 1LGBrush1

I would have thought that this border would slant at an angle defined by the line 0,1 to 1,0 as shown in Figure 2 below, also indicated by the dotted line I added

Figure 2

LGBrush2

but, as can be seen in the picture, they don't. Rather, the border between the two color blocks appears as I've indicated in Figure 3, below.

Figure 3

LGBrush3

Furthermore if the display using the LinearGradientBrush class is resized the angle of the color block border appears to change and, depending on the resulting resized dimensions, appears to be vertical even though the diagonal gradient defined by the start and end point hasn't changed. As shown below in Figure 4

Figure 4

LGBrush4

So, my question is why are the color blocks aligned the way they are?

Am I missing something obvious here or is this a bug (or 'feature')?

Windows
Windows
A family of Microsoft operating systems that run across personal computers, tablets, laptops, phones, internet of things devices, self-contained mixed reality headsets, large collaboration screens, and other devices.
5,060 questions
{count} votes