Xamarin iOS图像在网格内重叠

时间:2018-08-28 17:03:26

标签: xamarin xamarin.forms xamarin.ios xamarin.android

Heyo,

因此在Xamarin中,我有一个<Grid>,里面有一个<Image>和几个<Label>,它们都包裹在<ViewCell>中。这在Xamarin.Android中看起来完全正常,但是在Xamarin.iOS中,图像与标签重叠。我不确定会有什么区别-为什么在Xamarin.Android上看起来不错,但在iOS上却很烂?

下面是我的XAML和几个样机,以显示我的意思。

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <ViewCell.View>
            <Grid>
                <Grid.ColumnDefinitions>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Image Grid.Column="0" Grid.Row="0" Aspect="AspectFill" Source="{Binding ImageOverlayEN}" />
                <Label Grid.Column="0" Grid.Row="1" VerticalTextAlignment="Start" LineBreakMode="WordWrap" Text="{Binding DynamicOfferText}" FontSize="18">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                        <OnPlatform.iOS>RobotoCondensed-Regular</OnPlatform.iOS>
                        <OnPlatform.Android>RobotoCondensed-Regular.ttf#RobotoCondensed-Regular</OnPlatform.Android>
                        <OnPlatform.WinPhone>RobotoCondensed-Regular.ttf#RobotoCondensed</OnPlatform.WinPhone>
                    </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label Grid.Column="0" Grid.Row="2" VerticalTextAlignment="Start" LineBreakMode="WordWrap" Text="{Binding DynamicOfferDetail}" FontSize="16">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                        <OnPlatform.iOS>RobotoCondensed-Regular</OnPlatform.iOS>
                        <OnPlatform.Android>RobotoCondensed-Regular.ttf#RobotoCondensed-Regular</OnPlatform.Android>
                        <OnPlatform.WinPhone>RobotoCondensed-Regular.ttf#RobotoCondensed</OnPlatform.WinPhone>
                    </OnPlatform>
                    </Label.FontFamily>
                </Label>
                </Grid>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

我尝试设置HeightRequest,但这似乎没有什么不同:

#if __IOS__
    if (viewModel.Items.Count > 0)
    {
        MyListView.HeightRequest = 300 * viewModel.Items.Count;
    }
#endif

这是正在发生的事情的视觉表示:

enter image description here

1 个答案:

答案 0 :(得分:3)

弄清楚了-必须将我的RowDefinitions都设置为Auto

这看起来恰到好处:

<RowDefinition Height="1*" />
<RowDefinition Height="0.18*" />
<RowDefinition Height="0.77*" />

我认为正在发生的事情是ListView首先渲染,Auto行定义高度设置了在完成图像加载之前 的每一行的高度,然后是图像完成加载并与列表视图的其余项目(包括标签)重叠。这可能只是iOS的一个怪癖,因为Android会在图像加载完成后计算行高(解释为什么在Android中看起来不错)