UWP GridView ItemHeight 基於連續最大的項目

Question

正如這里已經討論過的，我在GridView中顯示內容時遇到了問題。 基於這篇文章，我發現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的行高取決於第一項而不是最高項。 所以我們可能需要為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 );
    }
}

然后用XAML中的CustomPanel替換GridView的ItemsPanelTemplate如下：

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