Silverlight: How can I set the height correctly in XAML?

Question

I am trying to make a control that displays a news item. There is an image that will be given in any size, but the control can crop to a square. There is also a headline and teaser.

The headline and image will be on the same vertical level. The teaser will be beneath them:

I want the control to stretch vertically to accommodate any teaser and headline text.

Also, if there is no image present, I would like the text to slide over to the right.

Here is the XAML I am currently using:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image x:Name="Thumbnail" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <TextBlock x:Name="Headline" Margin="93,0,0,0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="299" FontSize="23.333" VerticalAlignment="Top" />
    <TextBlock x:Name="Teaser" HorizontalAlignment="Left" Margin="4,100,0,0" Style="{StaticResource PhoneTextSubtleStyle}"  TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/>
</Grid>

Do I want to be controlling the layout with Grid rows and columns? Or do I want to be using margins? If the headline is short, and there is no image, how can I be sure that the teaser text will slide up to fill up the empty space?

Answer 1

Using margins for layout is not recommended. You can just use a Grid with 2 columns and rows:

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

    <Image ... />
    <TextBlock Grid.Column="1" ... />
    <TextBlock Grid.Row="1" Grid.ColumnSpan="2" .../>
</Grid>

HTH,
Kent