Home/ Questions/Q 8924165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:20:10+00:00

I can create the rectangle with the gradient background. How to insert a picture

  • 0

I can create the rectangle with the gradient background. How to insert a picture above it by giving its path?

<Rectangle StrokeThickness="2" Height="77" Canvas.Left="184" Canvas.Top="477" Width="119">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="White" Offset="0.5" />
            <GradientStop Color="Black" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

What I want:

Image above background

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Border will hold one piece of content, so if that is all you have, the following will work just fine:

    <Border>
  <Border.Background>
    <LinearGradientBrush StartPoint="0,0.5"
                         EndPoint="1,0.5">
      <GradientStop Color="Black"
                    Offset="0" />
      <GradientStop Color="White"
                    Offset="0.5" />
      <GradientStop Color="Black"
                    Offset="1" />
    </LinearGradientBrush>
  </Border.Background>
  <Image HorizontalAlignment="Center"
         VerticalAlignment="Center" />
</Border>

    If you need to layer more shapes/paths/images then you can use a Grid object which supports multiple children :

    <Grid>
  <!--Object 1-->
  <Ellipse StrokeThickness="2"
           Height="77"
           Width="119"
           HorizontalAlignment="Center"
           VerticalAlignment="Center">
    <Ellipse.Fill>
      <LinearGradientBrush StartPoint="0,0.5"
                           EndPoint="1,0.5">
        <GradientStop Color="Black"
                      Offset="0" />
        <GradientStop Color="White"
                      Offset="0.5" />
        <GradientStop Color="Black"
                      Offset="1" />
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <!--Object 2-->
  <Image HorizontalAlignment="Center"
         VerticalAlignment="Center" />
</Grid>

    Just remember that WPF starts drawing controls from the beginning of your XAML, so the last control defined in the XAML listing is the one that gets drawn on top.

    • 0