UWP GridView ItemHeight 基于连续最大的项目

Question

正如here 已经讨论过的，我在GridView 中显示内容时遇到了问题。基于此article，我发现GridView 将项目的Height 属性设置为第一项的高度。对我来说，问题是我想让Height 根据内容的高度进行自适应调整。 因此，如果一行中的第二项最大，则该行中的所有项都应获得第二项的大小。

我已使用此代码显示 GridView：

<GridView ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Width="1080">
<GridView.ItemTemplate>
    <DataTemplate>
        <ItemsControl ItemsSource="{Binding ListData, Converter={StaticResource DataBindingDebugConverter}}" x:Name="BirthdayListView" HorizontalAlignment="Center" Margin="0,20,0,0">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="&#x1f382;" 
                                    FontSize="16" 
                                    Grid.Column="0"
                                    Margin="0,0,10,10"
                                    FontFamily="Sergoe UI"
                                    Style="{StaticResource BasicTextBlock}"/>
                        <TextBlock Text="{Binding NameString, Converter={StaticResource DataBindingDebugConverter}}" 
                                    Grid.Column="2"
                                    Margin="10,0,0,0"
                                    FontSize="16"
                                    Style="{StaticResource BasicTextBlock}"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
    <Style TargetType="ContentControl">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0,20,0,0"/>
        <Setter Property="Width" Value="360" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
    </Style>
</GridView.ItemContainerStyle>
</GridView>

编辑：

如果日历条目位于第一个条目 (Sonntag) 上，则一切正常。

如果日历条目位于第二个项目 (Montag) 上，它们将被隐藏并且 ItemHeight 不会增加。

Answer 1

根据这篇文章，我发现 GridView 将项目的 Height 属性设置为第一个项目的高度。

如您所知，GridView 的行高取决于第一项而不是最高项。所以我们可能需要custom a panel 为GridView 的ItemPanel。比如你的GridView的Width是固定值，我们可以创建一个CustomPanel如下：

public class CustomPanel : Panel
{
    private double _maxWidth;
    private double _maxHeight;

    protected override Size ArrangeOverride(Size finalSize)
    {
        var x = 0.0;
        var y = 0.0;
        foreach (var child in Children)
        { 
            if ((_maxWidth + x) > finalSize.Width)
            {
                x = 0;
                y += _maxHeight;
            }
            var newpos = new Rect(x, y, _maxWidth, _maxHeight);
            child.Arrange(newpos);
            x += _maxWidth;
        }
        return finalSize;
    }

    protected override Size MeasureOverride(Size availableSize)
    { 
        foreach (var child in Children)
        {
            child.Measure(availableSize);

            var desirtedwidth = child.DesiredSize.Width;
            if (desirtedwidth > _maxWidth)
                _maxWidth = desirtedwidth;

            var desiredheight = child.DesiredSize.Height;
            if (desiredheight > _maxHeight)
                _maxHeight = desiredheight;
        }            
        var itemperrow = Math.Floor(availableSize.Width / _maxWidth);
        var rows = Math.Ceiling(Children.Count / itemperrow);
        return new Size(itemperrow * _maxWidth,_maxHeight * rows );
    }
}

然后将GridView的ItemsPanelTemplate替换为XAML中的CustomPanel，如下所示：

<GridView ItemsSource="{Binding}"   Width="1080" >
    <GridView.ItemTemplate> 
     ...  
    </GridView.ItemTemplate>
    <GridView.ItemContainerStyle>
       ... 
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <local:CustomPanel />                  
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>