[WPF][UWP]LinearGradientBrush Query/Problem

Question

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 1

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

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

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

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')?

Answer 1

Hi @Viorel and anyone else who's interested,

this LinearGradientBrush thing has been bothering me for a while so I thought I'd write a quick app to check it out 'once and for all'.

The screenshot above shows the 'normal' display of the LinearGradientBrush but I've added a dotted line to show the start and end points. The solid line is drawn through the midpoint of the start/end line plus I've added another gradient stop (in white) in the middle to show where the colour boundaries are. As you can see, you are absolutely right, the border is perpendicular to line that connects StartPoint and EndPoint. I would mark you comment as the answer but the Q&A interface doesn't seem to allow that.

Anyway, I thought what do I need to do to get the LinearGradientBrush to behave as I orginally (and mistakenly) thought it would behave. Hence the next screenshot:

As you can see from the screenshot, I've drawn a solid line from the top left to bottom right, then calculated its midpoint, then drawn a dotted line perpendicular to it passing through the its midpoint. The co-ordinates of this line were the converted to the StartPoint and EndPoint values of the LinearGradientBrush. This seems to work as I originally thought it was supposed to but required quite a lot of extra code, particularly to account for size changes. It would be so much easier is the was an option to interpret the StartPoint/EndPoint differently via a property setting on the LinearGradientBrush itself but I imagine that that's not going to happen anytime soon.