Xamarin.FormsのGridでRowDefinition全てのHeightをAutoにしているのにGridに余白ができてしまう

###前提・実現したいこと
この画像のように、Xamarin.FormsでGridを使用してImageともう一つ何かのViewを縦に並べて余白なく表示したい

###発生している問題・エラーメッセージ
画像の通り、RowDefinitionのHeightをAutoに設定しても、Grid部分になぜか余白ができてしまいます。
何かプロパティの設定を間違えていますでしょうか。
![

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="GridImageTest.Views.MainPage"
             Title="MainPage">
    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start" BackgroundColor="Red" RowSpacing="0" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Image Source="sample_image.png" Grid.Row="0" />
        <Label Grid.Row="1" Text="test message" BackgroundColor="Blue" />
    </Grid>
</ContentPage>

###試したこと
ちなみに、Gridの部分をStackLayoutに変更するとこの現象は発生しませんでした。
暫定的にStackLayoutで対応していますが気になったので質問を上げさせていただきました。

###補足情報(言語/FW/ツール等のバージョンなど)
ビルド環境:Visual Studio 2015
OS:Windows 10
実行環境:Android 7.1.1

行動規範の内容に同意します

回答3件

Gridが自分のサイズを計算する際に、サイズが*(Star)のRow/ColumnDefinitionに配置されているImageをソース画像のピクセル等倍のサイズで認識するようです(今回の例ではColumnDefinitionが省略されて*になっている)。
その結果、Gridのサイズは以下のように決定します。

縦: sample_image.pngの高さ + Labelの高さ
横: ContentPageの幅

このGridサイズを元にImageとLabelのサイズが再計算されます。この時にImageの高さがGridの幅に収まるサイズにスケーリング(縮小)されたものとなるため、ソース画像の高さとの差分だけ余白が残ります。

一応、ColumnDefinitionの幅を明示的にセットすることで回避できますが、他のLayoutを使う方が無難でしょう。

投稿2017/04/17 17:09

編集2017/04/19 01:57

P3PPP

総合スコア359

試してないし記憶頼りなので適当なのですが、
ContentPage直下にGrid置いた場合、そのGridのオプション、Startとしても高さ適当になりましたっけ?
自分はそういう時間にGridもう一つ挟んでました。
この辺のなんでそういうサイズになるんだよ！的なのは追っかけるのもやりにくかったりで困りますよね。
あと最近はどうかわかりませんが、前は特にStackLayoutのFillAndExpand、なんか計算おかしくねーかというのがあったので横なので関係なさそうですが、それがimageのサイズ調整に伴い変な計算してる…とか。

投稿2017/06/02 01:43