wpf resize image automatically

Question

I've been banging my head for a few days trying to figure out why my controls don't want to resize.

For instance below, I have background.png as the window background in a re-sizable window. The window successfully re-sizes and the background fills the entire window as required. But the image will not! Both images are both .png, they are both the same dpi, and both have the same resolution.

The image in the ActuatorUC should line up directly with the background considering that it has transparent parts.

MainWindow.xaml ->

<Window.Background>
    <ImageBrush ImageSource="Resources/background.png"></ImageBrush>
</Window.Background>

<Grid Name="mainGrid">
    <tc:ActuatorUC x:Name="act1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  />
</Grid>

ActuatorUC.xaml ->

<Canvas Name="canvas" >
</Canvas>

ActuatorUC.xaml.cs ->

private void LoadImage(string imageName )
{

this.canvas.Children.Clear();

Image image = new Image();

string newImageName = "pack://application:,,,/Resources/" + imageName + ".png";

image.Source = (new ImageSourceConverter()).ConvertFromString(newImageName) as ImageSource;
image.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
image.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;

this.canvas.Children.Add(image);

}

The dynamically added picture works, it shows up but will not resize with the parent canvas.

I've done tons of searches but I just can't figure this out. I'm pretty sure it's something simple or some misunderstanding I have about wpf. Unfortunately, the images are proprietary so I cannot add them to this posting.

Thanks in advance.

A Canvas never resizes its children and simply ignores any HorizontalAlignment or VerticalAlignment. Use a Grid instead. The ImageBrush should have its Stretch property set to Fill (which is the default however). — Clemens, Dec 10 '14 at 14:00

score 0 · Answer 1 · answered Dec 10 '14 at 17:17

Thanks to Clemens comment I fixed it as below is the answer.

Window.Xaml ->

<Window.Background>
    <ImageBrush ImageSource="Resources/background.png"></ImageBrush>
</Window.Background>

<Grid Name="mainGrid">
    <tc:ActuatorUC x:Name="act1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  />
</Grid>

ActuatorUC.Xaml ->

<Grid Name="grid" >

</Grid>

ActuatorUc.Xaml.cs ->

private void LoadImage(string imageName )
{

this.canvas.Children.Clear();

Image image = new Image();

string newImageName = "pack://application:,,,/Resources/" + imageName + ".png";

image.Stretch = Stretch.Fill;
image.Source = (new ImageSourceConverter()).ConvertFromString(newImageName) as ImageSource;

this.canvas.Children.Add(image);

}

wpf resize image automatically

1 Answers1