Placing multiple canvases in a Grid - wpf

Question

I want to place several canvases into a grid, each containing an image (and some drawing on top). When I do so, all canvases occupy the same space (almost). Can anyone explain?
This is the XAML:
<Window x:Class="WpfApp4__Various_Tests_.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp4__Various_Tests_"
Title="MainWindow" Height="300" Width="300"
x:Name="root">
<Grid Background="Beige" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Canvas Grid.Column="0">
<Image Source="nav_plain_blue.ico" />
</Canvas>
<Canvas Grid.Column="1">
<Image Source="nav_plain_blue.ico" />
</Canvas>
</Grid>
And this is the result:
EDIT: I noticed, when I use Width="*" in the grid both canvases are shown. I still don't understand why it doesn't work with Auto-size.

Answer 1

The Canvas is not resized automatically so you'll have to set its Width property explicitly if you want the column to auto grow:
<Canvas Grid.Column="0" Width="{Binding ActualWidth, ElementName=img}">
<Image x:Name="img" Source="nav_plain_blue.ico" />
</Canvas>
<Canvas Grid.Column="1" Width="{Binding ActualWidth, ElementName=img2}">
<Image x:Name="img2" Source="nav_plain_blue.ico" />
</Canvas>