Extra space under bottom positioned TextBlock (Windows Phone 8)

Question

I have a problem with positioning the TextBlock element on the bottom of the newsfeed rectangle. I attached the image of the problem (red arrow is pointing at it). There is too much extra space at the bottom of the "timeago" TextBlock.

You can see that the problem only occurs when the movie title is short enough to fit into first line. I would guess that this makes the StackPanel to shrink and therefore move the TextBlock with time elapsed a bit higher.

I tried changing the MinHeight of parent StackPanel to lower values or even removing the property, but it doesn't seem to work. I am guessing that the problem is with the "inner" StackPanel containing the content, stars (not visible) and "timeago"

This is the DataTemplate of my LongListSelector

<DataTemplate>
    <Grid Margin="12,2,5,4" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Rectangle Fill="{StaticResource PhoneAccentBrush}"
                           Opacity="0.75"
                           Margin="0,0"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch"/>

        <StackPanel Grid.Row="0" Orientation="Horizontal" 
                        Background="Transparent" 
                        Height="auto"
                        MinHeight="99"
                        Width="auto">

            <Grid HorizontalAlignment="Center" 
                          Background="#FFFFC700" 
                          Height="auto" 
                          Width="99">
                <Image Source="{Binding ImageUrl}" 
                       Height="auto" 
                       Width="auto" 
                       Stretch="UniformToFill" 
                       Margin="0" 
                       HorizontalAlignment="Center" 
                       VerticalAlignment="Stretch">
                </Image>
            </Grid>


            <StackPanel Width="311" Margin="8,-7,0,0">
                    <TextBlock Margin="10,15,15,0" Text="{Binding Content}" Style="{StaticResource NewsFeedHighlitedContent}" FontSize="24" />

                <Grid Margin="10,5,0,15" Visibility="{Binding StarsVisibility}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>

                    <Image Source="{Binding StarOne}" Height="30" Margin="0,0" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="0" />
                    <Image Source="{Binding StarTwo}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="1" />
                    <Image Source="{Binding StarThree}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="2" />
                    <Image Source="{Binding StarFour}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="3" />
                    <Image Source="{Binding StarFive}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="4" />

                </Grid>

                <TextBlock Text="{Binding Time}" Margin="8,14,25,7" VerticalAlignment="Bottom" Style="{StaticResource NewsTimeAgoStyle}" />
            </StackPanel>
        </StackPanel>
    </Grid>
</DataTemplate>

And the style for "NewsTimeAgoStyle"

<Style x:Key="NewsTimeAgoStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="FontFamily" Value="Segoe WP Light" />
    <Setter Property="Margin" Value="0,14,20,0" />
    <Setter Property="Opacity" Value="0.8" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="HorizontalAlignment" Value="Right" />
</Style>

Does anybody have any clue on how to solve this problem?

Answer 1

I am not sure but the problem might be because you are using StackPanel to display title and time ago text. I have changed your DataTemplate little bit to use Grid Panel. Try this and see this make any difference

<DataTemplate>
<Grid Margin="12,2,5,4" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Rectangle Fill="{StaticResource PhoneAccentBrush}"
                       Opacity="0.75"
                       Margin="0,0"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"/>

      <Grid Grid.Row="0" 
            Background="Transparent" 
            Height="auto"
            MinHeight="99">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="99"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid HorizontalAlignment="Center" 
                      Background="#FFFFC700">
            <Image Source="{Binding ImageUrl}" 
                   Height="auto" 
                   Width="auto" 
                   Stretch="UniformToFill" 
                   Margin="0" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Stretch">
            </Image>
        </Grid>


        <Grid Width="311" Margin="8,-7,0,0" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Margin="10,15,15,0" Text="{Binding Content}" Style="{StaticResource NewsFeedHighlitedContent}" FontSize="24" />

            <Grid Margin="10,5,0,15" Visibility="{Binding StarsVisibility}" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="30" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <Image Source="{Binding StarOne}" Height="30" Margin="0,0" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="0" />
                <Image Source="{Binding StarTwo}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="1" />
                <Image Source="{Binding StarThree}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="2" />
                <Image Source="{Binding StarFour}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="3" />
                <Image Source="{Binding StarFive}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="4" />

            </Grid>

            <TextBlock Text="{Binding Time}" Margin="8,14,25,7" Grid.Row="2" VerticalAlignment="Bottom" Style="{StaticResource NewsTimeAgoStyle}" />
        </Grid>
    </Grid>
</Grid>
</DataTemplate>