How to position two image elements inside a canvas?

Question

I'm trying to position two Image elements inside a Canvas, yet it doesn't seem to work as expected.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <Canvas>
                <Image Source="testImage.png" Height="240"/>
                <Image Source="championPortaitHolder.png" Height="240" />
            </Canvas>
            <TextBlock>This is some random text.</TextBlock>
        </StackPanel>
    </Grid>
</Window>

It seems I can't put the Top property on the Images, what can I do position the images exactly how I want it to appear.

Also, the Canvas element doesn't seem to occupy all it's space. It's as if the element was "floated" in HTML terms.

Any ideas on that as well?

Craig · Answer 1 · 2011-12-16T22:12:44.647

A canvas uses absolute positioning, so you would either need to specify the Margin property of each Image or you could use a grid instead of a Canvas, which might be more what you are looking for.

    <Grid>
    <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto"/>
         <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

            <Image Source="testImage.png" Height="240" Grid.Row="0" Grid.Column="0"/>
            <Image Source="championPortaitHolder.png" Height="240" Grid.Row="0" Grid.Column="1"/>
            <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">This is some random text.</TextBlock>
</Grid>

And with Margin:

    <Grid>
    <StackPanel>
        <Canvas Height="500" Width="500">
            <Image Source="testImage.png" Height="240" Margin="0, 0, 0, 0"/>
            <Image Source="championPortaitHolder.png" Height="240" Margin="250, 0, 0, 0"/>
        </Canvas>
        <TextBlock>This is some random text.</TextBlock>
    </StackPanel>
</Grid>

Note that a Canvas will not size to its content, so you will have to set the Height/Width of your canvas explicitly.

score 1 · Accepted Answer · answered Dec 16 '11 at 23:50

I think the simple answer you are looking for is how to set the Top and Left properties of the images. You must use Canvas.Top and Canvas.Left since these are attached properties (they have meaning to the Canvas, not to the Image which doesn't know anything about Canvases, Grids, or StackPanels).

<Window x:Class="WpfApplication1.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
        <StackPanel> 
            <Canvas Height="300" Width="500"> 
                <Image Source="testImage.png" Height="240" Canvas.Top="10" Canvas.Left="10"/> 
                <Image Source="championPortaitHolder.png" Height="240" Canvas.Top="50" Canvas.Left="50" /> 
            </Canvas> 
            <TextBlock>This is some random text.</TextBlock> 
        </StackPanel> 
    </Grid> 
</Window>

How to position two image elements inside a canvas?

2 Answers2

Linked