How do I make an image stretch to fill in this WPF / XAML application?

Question

When my program displays an image which is smaller than the Image GUI object defined in XAML, it does not get stretched to fit as I would like it to. For example a 256x256

Answer 1

Instead of Image use Image Brush that will do the work for you

 <Border.Background>
            <ImageBrush x:Name="image" Stretch="UniformToFill"/>
 </Border.Background>

And in the Code Behind you can Set

   image.ImageSource = bmpsrc; // if you can give the URL of the File Located on the Disk

Answer 2

As many people said above here is the code for using ImageBrush. Which also sets the image while MouseOver. Thought it might helps new users.

<Grid.Resources>
    <ImageBrush x:Key="AddButtonImageBrush" ImageSource="/DemoApp;component/Resources/AddButton.png" Stretch="Uniform"/>

    <Style x:Key="AddButtonImageStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource AddButtonImageBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background"  Value="{StaticResource AddButtonImageBrush}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Grid.Resources>

<Button Content="If Text is also Required" Style="{StaticResource AddButtonImageStyle}"/>

Answer 3

I have a few comments on your code:

And in your XAML you name your image:

imagePanel1

and in codebehind you used:

image

---

In the image tag in the XAML you said:

Canvas.Left="-135" Canvas.Top="-32"

This image tag is not in a canvas,, it is in a grid.

---

In the code behind you use the dispatcher to make things use multiple cores?

The dispatcher is used to execute thing from other threads into the UI thread. And if image (from which you use the dispatcher) is also in the UI thread (what I guess it is since it is a UI object) then this wont make your application use multiple cores.

---

If you set the image margin to 0 and remove the horizontal and vertical alignment. Also remove the width and height. Then your image should completely fill your window.

Can you test this for me.

---

And you can always use and Uri to set the bitmapsource to the file on your system.

BitmapImage bi3 = new BitmapImage();
bi3.BeginInit();
bi3.UriSource = new Uri("smiley_stackpanel.PNG", UriKind.Relative); //instead you can also use Urikind.Absolute
bi3.EndInit();
imagePanel1.Stretch = Stretch.Fill;
imagePanel1.Source = bi3;

Answer 4

If you known the URI of the image on the disk you should use the ImageBrush control.