GridView 中的 GridView UWP 高度问题

Question

I am working with a Nested data set that needs to be displayed in a GridView and inside the main gridView has to be another gridView (or something that can lay the content out in two columns and n number of rows based on data).

The problem I face is that the height of the GridView Item is determined by the requestedHeight of the first item in the gridView.

Is there a way to make it to pick the largest? Below is a screenshot, I don't want the scrollbar instead the content needs to be layed out as a whole:

Is there a way I can make all the elements of the size of the element that has the maximum requestedHeight so that the second gridview doesn't have a scroll

To Reproduce the Issue Below is the code:

public sealed partial class MainPage : Page, INotifyPropertyChanged
{

    private readonly string seed = "[{\"Title\":\"Heading A\",\"Description\":\"A really short description\",\"Contents\":[{\"Title\":\"Hey!\"},{\"Title\":\"Hey You\"},{\"Title\":\"Bye!\"},{\"Title\":\"Bye You\"}]},{\"Title\":\"Heading A\",\"Description\":\"A really short description\",\"Contents\":[{\"Title\":\"Foo!\"},{\"Title\":\"Foo You\"},{\"Title\":\"Bar!\"},{\"Title\":\"Bar You\"},{\"Title\":\"Hey!\"},{\"Title\":\"Hey You\"},{\"Title\":\"Bye!\"},{\"Title\":\"Bye You\"}]}]";

    public MainPage()
    {
        this.InitializeComponent();

        IEnumerable<Section> deserialized = JsonConvert.DeserializeObject<IEnumerable<Section>>(seed);
        this.Items = new ObservableCollection<Section>(deserialized);

    }

    private ObservableCollection<Section> items;

    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string name) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    public ObservableCollection<Section> Items
    {
        get { return items; }
        set 
        { 
            items = value;
            RaisePropertyChanged(nameof(Items));
        }
    }
}

The MainPage.xaml

<Page
    x:Class="GridViewInGridView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridViewInGridView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    RequestedTheme="Dark">

    <Page.Resources>

        <DataTemplate x:Name="SecondTemplate" x:DataType="local:SubSection">
            <TextBlock Text="{x:Bind Title}"/>
        </DataTemplate>

        <DataTemplate x:Name="FirstTemplate" x:DataType="local:Section">
            <RelativePanel BorderThickness="2" BorderBrush="Cyan">
                <TextBlock x:Name="Title" Text="{x:Bind Title}" Margin="10,10,10,0"/>
                <TextBlock x:Name="Desc" Text="{x:Bind Description}" RelativePanel.Below="Title" TextWrapping="WrapWholeWords"
                           Margin="10"/>

                <GridView RelativePanel.Below="Desc"
                          Margin="20, 10"
                          RelativePanel.AlignLeftWithPanel="True"
                          RelativePanel.AlignRightWithPanel="True"
                          RelativePanel.AlignBottomWithPanel="True"
                          ItemsSource="{x:Bind Contents}" 
                          ItemTemplate="{StaticResource SecondTemplate}">
                    <GridView.ItemContainerStyle>
                        <Style TargetType="GridViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="Margin" Value="5,5"/>
                        </Style>
                    </GridView.ItemContainerStyle>

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Stretch"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>

            </RelativePanel>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <GridView ItemTemplate="{StaticResource FirstTemplate}"
                  ItemsSource="{x:Bind Items, Mode=OneWay}"
                  Margin="0,10" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="Single">

            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="20,20"/>
                </Style>
            </GridView.ItemContainerStyle>

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" 
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

        </GridView>
    </Grid>
</Page>

The Model Classes:

public class Section
{
    public string Title { get; set; }

    public string Description { get; set; }

    public IEnumerable<SubSection> Contents { get; set; }


}

public class SubSection
{
    public string Title { get; set; }

}

Answer 1

As you said, the height of the GridView Item is determined by the requestedHeight of the first item in the gridView. In that case, you could create a custom panel for the GridView's ItemPanel. For example:

public class GridViewCustomPanel : 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);
    }
}

Then you can replace the ItemsPanelTemplate of GridView with your custom panel.

.xaml:

......
<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <!--<ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" 
                           HorizontalAlignment="Center"
                           VerticalAlignment="Stretch"/>-->
        <local:GridViewCustomPanel />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>
......

About how to custom a panel, you can refer to this document .