How do I automatically resize an image to fit a resized canvas in a silverlight grid cell

Question

For example, I have a grid and one of the cells contains an image. Because I've set the cells background to a colour I can see that the grid is resizing when the user resizes the browser but how do I get the image to resize as well?

I forgot to say that my image is inside a canvas and while the canvas automatically sizes to the grid cell my image does not automatically size to the canvas.

Answer 1

If your Image is placed directly into a grid, its default Stretch behaviour, with is Stretch="Uniform" will ensure that is resizes along with the grid. Try the following XAML to verify:

  <Grid x:Name="LayoutRoot" ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Image Source="MyImage.png"
           Grid.Row="0"/>
  </Grid>

However, based on your updated question ... your image is within a canvas. A Canvas panel is intended to provide absolute positioning of its children. You cannot stretch or align elements within a canvas.

Bottom line - use a different panel as a container!

Answer 2

I have found an answer to this:

<Canvas Name="canvas" >
    <Canvas.Background>
        <ImageBrush ImageSource="/hsl;component/face-recognition.jpg" />
    </Canvas.Background>      
</Canvas>