Question

I have the following XAML in my Windows Phone app:

<StackPanel Orientation="Horizontal">
  <Grid x:Name="LayoutRoot">
    <Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
    <TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" Margin="150,20,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
    <TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" Margin="150,150,0,0" TextWrapping="Wrap" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="300" />
  </Grid>
</StackPanel>

Currently, I have the margin of the second TextBlock (DescriptionBlock) set to a static value. Now because I have the work wrapping of the first TextBlock (NameBlock) set to "Wrap", the height of the TextBlock is variable.

Does anyone know how to make the top-margin of DescriptionBlock equal to the automatic height of NameBlock? This would ensure that the second DescriptionBlock appears directly below the NameBlock, regardless of the length of the text of NameBlock.

Many thanks!
Brett

Answer 1

This is what panels are for. Wrap the two text blocks in stack panel and it will stack the text blocks one above the other.

    <Grid x:Name="LayoutRoot">
        <Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
        <StackPanel Margin="150,20,0,0" Width="300">
            <TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30"  TextWrapping="Wrap" HorizontalAlignment="Left" />
            <TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" TextWrapping="Wrap" HorizontalAlignment="Left" />
        </StackPanel>
    </Grid>

A panel that holds a single child is usually useless, so I removed the stack panel around the grid.

If you’d like to continue using Grid you can define rows for it to size automatically.