Xamarin.Forms StackLayout内にAbsoluteLayoutを入れた際にうまく表示がされない場合がある

c#
1<StackLayout
2   Spacing="0"
3   VerticalOptions="FillAndExpand">
4        <StackLayout
5            Spacing="0"
6            VerticalOptions="FillAndExpand"
7            Orientation="Horizontal">
8            <StackLayout
9                Spacing="0"
10                VerticalOptions="FillAndExpand"
11                WidthRequest="200">
12                <AbsoluteLayout
13                    HorizontalOptions="FillAndExpand"
14                    VerticalOptions="FillAndExpand">
15                    <BoxView
16                        AbsoluteLayout.LayoutFlags="All"
17                        AbsoluteLayout.LayoutBounds="0,0,1,1"
18                        BackgroundColor="Aqua"/>
19                </AbsoluteLayout>
20            </StackLayout>
21            <StackLayout
22                Spacing="0"
23                VerticalOptions="FillAndExpand"
24                WidthRequest="200">
25                <BoxView
26                    HorizontalOptions="FillAndExpand"
27                    VerticalOptions="FillAndExpand"
28                    BackgroundColor="Red"/>
29            </StackLayout>
30            <StackLayout
31                Spacing="0"
32                VerticalOptions="FillAndExpand"
33                WidthRequest="200">
34                <BoxView
35                    HorizontalOptions="FillAndExpand"
36                    VerticalOptions="FillAndExpand"
37                    BackgroundColor="Red"/>
38            </StackLayout>
39        </StackLayout>
40    </StackLayout>

スマホ画面の幅より長くなるよう幅200のStackLayoutを横に3つ並べたViewを作成します。
このViewの子のStackLayout内にAbsoluteLayoutをセットし、そのAbsoluteLayoutにLayoutFlags="All"でviewを配置するとAbsoluteLayout内のViewが表示されません。
この現象の理由がわからないので分かる方がいましたら教えていただきたいです。

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

回答1件

ベストアンサー

結果から言うと、BoxViewのサイズがWidth=200, Height=0なので表示されません。

<StackLayout
    Spacing="0"
    VerticalOptions="FillAndExpand"
    WidthRequest="200">

Orientation="Vertical"なStackLayoutにVerticalOptions="FillAndExpand"をセットしても効果はありません。
よって、このStackLayoutのサイズはまずWidth=200, Height=0に決定します。
Spacing="0"であるため、最終的なHeightは 全ての子要素のHeightの合計 となります。

<AbsoluteLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand">

StackLayoutの子要素であるAbsoluteLayoutのサイズはWidth=200, Height=0に決定します。
HorizontalOptions="FillAndExpand" => 親と同じWidth(200)
VerticalOptions="FillAndExpand" => 親と同じHeight(0)

<BoxView
    AbsoluteLayout.LayoutFlags="All"
    AbsoluteLayout.LayoutBounds="0,0,1,1"
    BackgroundColor="Aqua"/>

LayoutFlagsとLayoutBoundsの組み合わせにより、BoxViewのサイズはWidth=200, Height=0に決定します。
Width => AbsoluteLayoutのWidth(200) * 1.0(100%)
Height => AbsoluteLayoutのHeight(0) * 1.0(100%)

投稿2018/10/05 13:28