placing widgets in xaml Grid column

Question

Hi I divided the mobile screen into three rows and second row into two columns. I am trying to add Images to second column of the second row. Though I specify Grid.Row and Grid.Column to the image properties it does not work. Could you please guide me on how to add widgets to different rows and columns.

Your help much apprecated.

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>                
        </Grid.ColumnDefinitions>
    </Grid>

    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="0"
        Source="Assets/b_placeholder.jpg"/>
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="2"
        Source="Assets/b_placeholder.jpg"/>

    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="1"
        Grid.Column="1"
        Source="Assets/b_placeholder.jpg"/>

</Grid>

Answer 1

You cannot define columns only within one row.

Either you create a new grid within that row with only columns:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>   

    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="0"
        Source="Assets/b_placeholder.jpg"/>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>                
        </Grid.ColumnDefinitions>
        <Image
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Width="100"
            Height="100"            
            Grid.Column="1"
            Source="Assets/b_placeholder.jpg"/>
    </Grid>

    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="2"
        Source="Assets/b_placeholder.jpg"/>
</Grid>

or you deal with columnspan on the 1st and 3rd images:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>  
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>                
    </Grid.ColumnDefinitions> 

    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="0"
        Grid.ColumnSpan="2"
        Source="Assets/b_placeholder.jpg"/>

    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"  
        Grid.Row="1"          
        Grid.Column="1"
        Source="Assets/b_placeholder.jpg"/>

    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="2"
        Grid.ColumnSpan="2"
        Source="Assets/b_placeholder.jpg"/>
</Grid>