WPF userControl containing an image image doesnt resize when usercontrol is resized

Question

I am working in wpf. I have a userControl in which sits an Image control.

I add a BitmapImage to this userControl through image.source.

This userControl is then added to a canvas, any control attached to this canvas has adorners attached so that each of the four corners can be dragged to resize the userControl.

My problem is, is that the bitmap doesnt resize with the userControl.

Is there an easy way to make the bitmap redraw when the userControl resizes?

Here is the XAML for the user control:

<UserControl x:Name="cusImageControl" x:Class="StoryboardTool.CustomImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" BorderThickness="0" MouseDown="cusImageControl_MouseDown">
    <Image x:Name="image"  >
        <Image.ContextMenu>
            <ContextMenu>
                <MenuItem x:Name="ContextMenuBringForward" Header="BringForward" Click="ContextMenuBringForward_Click"/>
                <MenuItem x:Name="ContextMenuSendBackward" Header="SendBackward" Click="ContextMenuSendBackward_Click"/>
            </ContextMenu>
        </Image.ContextMenu>
    </Image>
</UserControl>

public void chooseImage()
        {
            OpenFileDialog ofd = new OpenFileDialog();
            ofd.Title = "Choose Image to Add";

            if (ofd.ShowDialog() == true)
            {
                BitmapImage bImage = new BitmapImage();
                bImage.BeginInit();
                bImage.UriSource = new Uri(ofd.FileName);
                bImage.EndInit();

                image.Width = bImage.Width;
                image.Height = bImage.Height;
                image.Source = bImage;
                //image.Stretch = Stretch.Fill;
            }
        }

Answer 1

You seem to be setting a width and height in your code behind... this is the size that the Image will be. Instead of this, try setting the Image.Source property in xaml:

<UserControl x:Class="WpfApplication1.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Image Source="/WpfApplication1;component/Images/ImageName.png" />
    </Grid>
</UserControl>

If I put this into MainWindow.xaml, the Image resizes when resizing the Window.

If you need to set the URL of the Image in code, then you can add a property in your view model, bind it to the Source property and change that to the new path in code instead:

<Image Source="{Binding ViewModelSourceProperty}" /> // don't set size here

I hope that helps.