Xamarin.FormsでGridのRowの高さが動的に変動する場合、全ての行をはみ出ないように表示したい

Question

前提・実現したいこと

Xamarin.FormsでGridのセル内にボタンを複数設置して、セルの横幅が不足した場合に
複数行に回り込んで描画するGridの行を複数設置したい。

発生している問題・エラーメッセージ

本家のサンプル を参考に、ボタンの回り込みはカスタムレイアウトの作成で対応できそうなのですが、
ボタンが複数行になった場合、Gridの高さが変わってしまい、Gridのセルが縦方向にはみ出てしまいます。
※下図参照

Gridの高さが、ボタンの表示内容に応じて動的に設定されるようにしたいです。

該当のソースコード

Githubにリポジトリを作成してありますので、こちらを参照いただきたいのですが
主だった修正は下記2ファイルです。

WrapLayout.cs

using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace ImageWrapLayout
{
	public class WrapLayout : Layout<View>
	{
		public static readonly BindableProperty ColumnSpacingProperty = BindableProperty.Create(
			"ColumnSpacing",
			typeof(double),
			typeof(WrapLayout),
			2.0,
			propertyChanged: (bindable, oldvalue, newvalue) =>
			{
				((WrapLayout)bindable).InvalidateLayout();
			});

		public static readonly BindableProperty RowSpacingProperty = BindableProperty.Create(
			"RowSpacing",
			typeof(double),
			typeof(WrapLayout),
			2.0,
			propertyChanged: (bindable, oldvalue, newvalue) =>
			{
				((WrapLayout)bindable).InvalidateLayout();
			});

		public double ColumnSpacing
		{
			set { SetValue(ColumnSpacingProperty, value); }
			get { return (double)GetValue(ColumnSpacingProperty); }
		}

		public double RowSpacing
		{
			set { SetValue(RowSpacingProperty, value); }
			get { return (double)GetValue(RowSpacingProperty); }
		}

		protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
		{
            // 対象要素のheightの設定
            // widthはwidthConstraintの値
            // ※実質1行の高さは同じなので、高さは(1行の高さ*行数)+((行数-1)*スペース) となる
            double width  = widthConstraint;

            int countChildren = Children.Count;
            int countRows = 1;
            double tmpWidthPerRow = 0;
            double? heightPerRow = null;
            foreach (View child in Children)
            {
                // 子要素のサイズを取得
                SizeRequest childSizeRequest = child.Measure(Double.PositiveInfinity, Double.PositiveInfinity);

                // 1行の幅が全体幅を上回れば行を追加
                tmpWidthPerRow += childSizeRequest.Request.Width;
                if (tmpWidthPerRow >= width)
                {
                    // 1行幅のリセット
                    tmpWidthPerRow = childSizeRequest.Request.Width;

                    // 行を1行追加
                    countRows++;
                }

                // 1行の高さを保存
                if (!heightPerRow.HasValue)
                {
                    heightPerRow = childSizeRequest.Request.Height;
                }
            }

            // 高さの設定
            double height = (double)heightPerRow * countRows + RowSpacing * (countRows - 1);

            return new SizeRequest(new Size(width, height));
		}

		protected override void LayoutChildren(double x, double y, double width, double height)
		{
            double xChild = x;
            double yChild = y;
            double tmpWidthPerRow = 0;
            foreach (View child in Children)
            {
                // 子要素のサイズを取得
                SizeRequest childSizeRequest = child.Measure(Double.PositiveInfinity, Double.PositiveInfinity);

                // 1行の幅が全体幅を上回れば次の行で表示
                tmpWidthPerRow += childSizeRequest.Request.Width;
                if (tmpWidthPerRow >= width)
                {
                    tmpWidthPerRow = childSizeRequest.Request.Width;
                    xChild = x;
                    yChild += RowSpacing + childSizeRequest.Request.Height;
                }

                // カラムの表示位置の設定
                LayoutChildIntoBoundingRegion(child, new Rectangle(new Point(xChild, yChild), new Size(childSizeRequest.Request.Width,childSizeRequest.Request.Height)));

                // カラムのx座標を追加
                xChild += childSizeRequest.Request.Width + ColumnSpacing;
            }
		}
	}
}

　
ImageWrapLayoutPage.xaml ※コードビハインドはInitializeComponent()のみ

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ImageWrapLayout"
             x:Class="ImageWrapLayout.ImageWrapLayoutPage"
             BackgroundColor="#FFF">
   <ScrollView>
        <StackLayout Margin="20,20,20,20">
            <Grid BackgroundColor="#6d6d6d" ColumnSpacing="1" RowSpacing="1"
                  Padding="1" x:Name="DynamicGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*"/>
                    <ColumnDefinition Width="0.8*"/>
                </Grid.ColumnDefinitions>

                <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Gray"/>
                <Label Grid.Row="0" Grid.Column="0" Text="項目A" TextColor="#FFF"
                       HorizontalOptions="Center" VerticalOptions="Center"/>
                <local:WrapLayout Grid.Row="0" Grid.Column="1"
                                  BackgroundColor="#FFF"
                                  Padding="5">
                    <Button Text="111111"/>
                    <Button Text="222222"/>
                    <Button Text="333333"/>
                    <Button Text="444444"/>
                    <Button Text="555555"/>
                    <Button Text="666666"/>
                    <Button Text="777777"/>
                    <Button Text="888888"/>
                    <Button Text="999999"/>
                </local:WrapLayout>

                <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="Gray"/>
                <Label Grid.Row="1" Grid.Column="0" Text="項目B" TextColor="#FFF"
                       HorizontalOptions="Center" VerticalOptions="Center"/>
                <local:WrapLayout Grid.Row="1" Grid.Column="1"
                                  BackgroundColor="#FFF"
                                  Padding="5">
                    <Button Text="111111"/>
                    <Button Text="222222"/>
                    <Button Text="333333"/>
                    <Button Text="444444"/>
                    <Button Text="555555"/>
                    <Button Text="666666"/>
                    <Button Text="777777"/>
                    <Button Text="888888"/>
                    <Button Text="999999"/>
                </local:WrapLayout>

                <BoxView Grid.Row="2" Grid.Column="0" BackgroundColor="Gray"/>
                <Label Grid.Row="2" Grid.Column="0" Text="項目C" TextColor="#FFF"
                       HorizontalOptions="Center" VerticalOptions="Center"/>
                <local:WrapLayout Grid.Row="2" Grid.Column="1"
                                  BackgroundColor="#FFF"
                                  Padding="5">
                    <Button Text="111111"/>
                    <Button Text="222222"/>
                    <Button Text="333333"/>
                    <Button Text="444444"/>
                    <Button Text="555555"/>
                    <Button Text="666666"/>
                    <Button Text="777777"/>
                    <Button Text="888888"/>
                    <Button Text="999999"/>
                </local:WrapLayout>
            </Grid>
            <Label Text="テーブル下部のラベル1"/>
            <Label Text="テーブル下部のラベル2"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

補足情報

• Visual Studio for Mac 7.4.2
• Xamarin.Forms 2.5.0.280555
• 検証端末： Nexus7（Android6.0.1）

Answer 1

WrapLayout クラスは問題無いように見えます。

これは回答にならないかもしれませんが、Grid の列の幅を固定すると、とりあえずうまくいくようです。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="120"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Comments

[takuo-nkmr]

ご回答ありがとうございます。
記載いただきました通り、こちらでもGridの列幅を固定値とすることで
修正されることを確認致しました。
とはいえ、原因は不明のままですので本質問は解決済みとせずに、
受付中のままとさせてください。