How can square gradient color be achieved in WPF?

1 year ago
Ava Mitchell
1 minute

One way to achieve square gradient color in WPF is by using LinearGradientBrush.

  1. Create a Rectangle control in XAML and set its properties such as width, height, and fill color.
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Yellow" Offset="0.3"/>
            <GradientStop Color="Green" Offset="0.7"/>
            <GradientStop Color="Blue" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>
  1. In the above code, the StartPoint and EndPoint of the LinearGradientBrush specify the starting and ending points of the gradient respectively. The Offset property indicates the offset of each gradient color, ranging from 0 to 1.

By adjusting the number and values of the GradientStop, different gradient effects can be achieved. In the above code, we defined four GradientStops transitioning from red to yellow, then to green, and finally to blue.

When you run the program, you will see a square with a width and height of 200, displaying a gradient from red to yellow, then to green, and finally to blue.

bannerAds