Search code examples
c#wpfxamlborder

Fit image to border background

may i know how can fit the image into the designed border?

below are the code that i've done.

 <Border Grid.Row="1" BorderThickness="1" BorderBrush="LightGreen" Margin="20" CornerRadius="30">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
                    <GradientStop Color="#F9FFF0" Offset="0"/>
                    <GradientStop Color="#F3FFE2" Offset="0.567"/>
                </LinearGradientBrush>
            </Border.Background>
            <Image Source="/LBKIOSK;component/Resources/Images/Background/klhoho.jpg"  Opacity="0.3" Stretch="UniformToFill"/>

            <Border.Effect>
                <DropShadowEffect ShadowDepth="5" Color="#599204"></DropShadowEffect>
            </Border.Effect>
        </Border>

but output show as below , the image didn't fit inside the border

enter image description here

Solution

  • It is possible to set the <Border.Background/> property to an <ImageBrush/> like: 

    <Border Grid.Row="1" BorderThickness="1" BorderBrush="LightGreen" Margin="20" CornerRadius="30">
     <Border.Background>
          <ImageBrush Stretch="UniformToFill" ImageSource="/LBKIOSK;component/Resources/Images/Background/klhoho.jpg"/>
     </Border.Background>
     <Border.Effect>
          <DropShadowEffect ShadowDepth="5" Color="#599204"></DropShadowEffect>
     </Border.Effect>
</Border>