CODEWITHSUNDEEP
wpfbackgroundshapeslinear-gradients
stoic
stoic

Reputation: 4830

How to create a shape with a gradient fill, and add it to a border background in WPF

I am trying to create the following shape as a background to a border. You will notice that the bottom section on the shape has a linear gradient to it.

I have played around with lines and shapes and gradients, but i have not been able to apply the below to a border. nor can i get a shape that looks like that.

Is this even possible? if so, can anyone help

enter image description here

Upvotes: 1

Views: 3569

Answers (1)

Mario Vernari
Mario Vernari

Reputation: 7304

The below XAML produces a brush that looks similar to your picture. You should play around the colors, offsets, and the rest for the best appearance.

<DrawingBrush x:Key="br1" Viewbox="0,0,100,100" ViewboxUnits="Absolute" >
  <DrawingBrush.Drawing>
    <DrawingGroup>
        <GeometryDrawing Brush="Lavender">
          <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100" />
          </GeometryDrawing.Geometry>
        </GeometryDrawing>
        <GeometryDrawing>
            <GeometryDrawing.Brush>
                <RadialGradientBrush GradientOrigin="0.5,0.01" Center="0.5,-0.2" RadiusX="100">
                    <GradientStop Color="MidnightBlue" Offset="1.0" />
                    <GradientStop Color="LightSteelBlue" Offset="0.0" />
                </RadialGradientBrush>
            </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
              <EllipseGeometry Center="60,310" RadiusX="160" RadiusY="300" />
          </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </DrawingGroup>
  </DrawingBrush.Drawing>
</DrawingBrush>

Have fun!

Upvotes: 4

Related Questions