位于底部的 TextBlock 下的额外 space (Windows Phone 8)

Question

我在将 TextBlock 元素定位在新闻源矩形底部时遇到问题。我附上了问题的图片（红色箭头指向它）。 "timeago" TextBlock 的底部有太多多余的 space。

您可以看到只有当电影标题足够短以适合第一行时才会出现问题。我猜想这会使 StackPanel 缩小，因此随着时间的流逝将 TextBlock 移动得更高一些。

我尝试将 parent StackPanel 的 MinHeight 更改为较低的值，甚至删除属性，但它似乎不起作用。我猜问题是 "inner" StackPanel 包含 content、stars（不可见） 和“timeago"

这是我的 LongListSelector 的 DataTemplate

<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>

以及 "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>

有人知道如何解决这个问题吗？

Answer 1

我不确定，但问题可能是因为您正在使用 StackPanel 来显示标题和时间之前的文本。我已经稍微更改了您的 DataTemplate 以使用 Grid 面板。试试这个，看看这有什么不同

<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>

位于底部的 TextBlock 下的额外 space (Windows Phone 8)

Extra space under bottom positioned TextBlock (Windows Phone 8)

silverlight

xaml

windows-phone

windows-phone-8