GridView 项目高度是固定的

Question

I am working on a project where I have a GridView and I need to show an image and 3 TextBlock s. The image has a fixed Height and Width properties and the first TextBlock have either 1 line of text or 2. The other TextBlock s have only 1 line of text.

The problem is that if the first TextBlock has 1 line of text everything is shown perfectly but if the text is longer than one line the last TextBlock is not shown in the GridViewItem and it is pushed down where it gets hidden.

<GridView ItemsSource="{Binding HomeList, Mode=OneWay}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:ItemHelper">
            <UserControl>
                <StackPanel>
                    <Image Name="image" Source="{x:Bind ItemImage}"
                           Height="144" Width="256" HorizontalAlignment="Center"/>
                    <TextBlock Name="title" Text="{x:Bind ItemTitle}" Style="{StaticResource OneLinedItemTitle}"/>
                    <TextBlock Name="section" Text="{x:Bind ItemSection}"/>
                    <TextBlock Name="pubUpdate" Text="{x:Bind ItemPublishTime}"/>
                </StackPanel>
            </UserControl>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

I have also tried the above XAML with RelativePanel and the same thing happens. I want the height to be fixed at max height with 2 lines of text for title or adjustable for each item in the GridView .

As you can see that the first item shows 3 TextBlock s but the 2nd item shows only 2 where the first one has 2 lines of text.

I only see the following possible options:

1. Set the height of the StackPanel to be fixed for the max height of the items
2. Set the height of the title to be fixed with 2 lines of text
3. Maybe editing the default Style for GridViewItem would help

Or maybe there is any other possible option which doesn't involve setting the fixed height for any element.

Any suggestions? Thanks.

Answer 1

Why don't you use a Grid inside your UserControl instead of the StackPanel . The StackPanel sizes to content Heights only. I would use a Grid , set the RowDefinition at third Row to Height="*" and the other ones to Height="Auto" . I tested this with an ItemsControl (that worked...)

<GridView ItemsSource="{Binding HomeList, Mode=OneWay}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:ItemHelper">
            <UserControl>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" Name="image" Source="{x:Bind ItemImage}"                          Height="144" Width="256" HorizontalAlignment="Center"/>
                    <TextBlock Grid.Row="1" Name="title" Text="{x:Bind ItemTitle}" Style="{StaticResource OneLinedItemTitle}"/>
                    <TextBlock Grid.Row="2" Name="section" Text="{x:Bind ItemSection}" TextWrapping="Wrap"/>
                    <TextBlock Grid.Row="3" Name="pubUpdate" Text="{x:Bind ItemPublishTime}"/>
                </Grid>
            </UserControl>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Answer 2

It seems the first item is not rendering correctly (at least this is what happened to me). Check Justin XL answer , maybe it can help. Apparently the problem (from poor rendering) is solved by setting the ItemHeight property

<GridView.ItemsPanel>
     <ItemsPanelTemplate>
          <ItemsWrapGrid  ItemHeight="DesiredHeight"/>
     </ItemsPanelTemplate>
</GridView.ItemsPanel>