WPF Binding Image Width and Height with Dependency Properties

Question

I have a WPF .xaml file which contains an image framework element which is bound to a BitmapSource in my C# code. At the moment, I'm hard coding the image width and height of my bitmap (ie. 512px) and I've specified the framework element not to stretch the image. So, if my window is bigger than the bitmap, the image seems to float inside the bounds of the window. However, what I'd like is that the bitmap width and height is automatically bound to the width and height of the .xaml window. So, when I resize the window, the bitmap gets resized along with it. I don't simply want the image to be 'stretched'... rather, I want the bitmap width and height to match the window that contains it. I'm not entirely sure how to do this, but I'll post the setup that I have so far.

In my .xaml file, I have my Image framework element (Note: the render transform merely flips the image along the horizontal axis):

<Image Source="{Binding WpfPreview}" Name="VectorPreview" Stretch="None" Width="{Binding Xres}" Height="{Binding Yres}" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <ScaleTransform ScaleY="-1"/>
    </Image.RenderTransform>
</Image>

My C# code then has the following code in it:

protected BitmapSource wpfPreview;
public BitmapSource WpfPreview
{
    get { return wpfPreview; }
    set
    {
        wpfPreview = value;
        NotifyPropertyChanged("WpfPreview");
    }
}

protected static int xres = 512;
public int Xres
{
    get { return xres; }
    set
    {
        xres = value;
        NotifyPropertyChanged("Xres");
        UpdateBitmapPreview();
    }
}

protected static int yres = 512;
public int Yres
{
    get { return yres; }
    set
    {
       yres = value;
       NotifyPropertyChanged("Yres");
       UpdateBitmapPreview();
    }
}

protected GDI.Bitmap gdiPreviewImage = new GDI.Bitmap(xres, yres);

public void UpdateBitmapPreview()
{
    if(gdiPreviewImage.Width != xres || gdiPreviewImage.Height != yres) gdiPreviewSurface = new GDI.Bitmap(xres, yres);
    using (var graphics = GDI.Graphics.FromImage(gdiPreviewImage))
    {
        graphics.Clear(Color.White);
        graphics.ResetTransform();

        currentSlicer.DrawBitmapPreview(graphics, PreviewOptions);
     }

     WpfPreview = Imaging.CreateBitmapSourceFromHBitmap(
            gdiPreviewImage.GetHbitmap(), 
            IntPtr.Zero, 
            Int32Rect.Empty,
            BitmapSizeOptions.FromEmptyOptions()
            );
}

Answer 1

You basically want to keep aspect ratio while resizing? I think these properties can fix this up. set ClipToBounds to true and Stretch to Uniform .

<Image Stretch="Uniform" ...

Answer 2

However, what I'd like is that the bitmap width and height is automatically bound to the width and height of the .xaml window.

And so, wouldn't be simpler to bind the Width and the Height directly to the Width and the Height of Window, at this point?

<Image Source="{Binding WpfPreview}"
       Stretch="None" 
       Width="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
       Height="{Binding Height, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />