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

Question

正如已經討論的here我在GridView中顯示內容時遇到問題。基於這個article我發現GridView設置項目的Height屬性爲第一項的高度。對我來說，問題是我想根據內容的高度對Height進行調整apdaptive。 所以如果一行中的第二項是最大的，那麼這一行中的所有項目都應該得到第二項的大小。

我用這個代碼顯示在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> 

編輯：

如果日曆條目上的第一個條目（桑塔格）一切都很好。

如果日曆條目位於第二個項目（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); 
    } 
} 

然後與CustomPanel取代GridView的ItemsPanelTemplate在XAML如下：

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