Xamarin Forms CarouselView高度过长问题求助

问题描述 #

我使用Xamarin原生CarouselView，数据加载正常，但每个项的高度超出内容所需，想要实现类似电商网站ASP.NET DIV Card的自适应内容高度效果。试过两个CarouselView排查Bug，两者高度都超出预期；换用StackLayout后问题依旧。求可用的简易模板或修正方案。

//James

代码示例 #

<?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:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="ApplicationName.Views.HomePage">
    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="tlbarLogin" Text="Sign Up/Login" Clicked="Launch_Login"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        
        <StackLayout BackgroundColor="#2C5C2C"  VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
            
            <SearchBar BackgroundColor="White" Placeholder="Search items..." PlaceholderColor="LightGray"
                       CancelButtonColor="black"
           
           TextColor="Black"
           FontSize="Medium"
           />
           
            
            
        </StackLayout>
        <ScrollView Grid.Row="1">
            <!--<StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10">-->

            <Grid Margin="0, 5, 0, 0">
                <Grid.RowDefinitions>
                    <!--One RowDefinition in * si useless by the way -->
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="400"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackLayout>
                    <CarouselView x:Name="TheCarousel" PeekAreaInsets="50" Loop="False" Grid.ColumnSpan="5">

                        <CarouselView.ItemTemplate>
                            <DataTemplate>
                                <Frame HasShadow="True" 
                                   BorderColor="DarkGray"
                                   CornerRadius="5"
                                   Margin="10"
                                   
                                   VerticalOptions="Start" >
                                    <StackLayout >
                                        <Image Source="{Binding strImagePath}" Aspect="AspectFill"/>
                                        <Label Text="{Binding strLocalisedString}" FontSize="20"/>
                                    </StackLayout>
                                </Frame>
                            </DataTemplate>
                        </CarouselView.ItemTemplate>
                    </CarouselView>

                    <CarouselView x:Name="TheCarousel2" PeekAreaInsets="50" Loop="False" Grid.ColumnSpan="5">

                        <CarouselView.ItemTemplate>
                            <DataTemplate>
                                <Frame HasShadow="True" 
                                   BorderColor="DarkGray"
                                   CornerRadius="5"
                                   Margin="10"
                                   HeightRequest="50"
                                   
                                   VerticalOptions="Start" >
                                    <StackLayout >
                                        <Image Source="{Binding strImagePath}" Aspect="AspectFill"/>
                                        <Label Text="{Binding strLocalisedString}" FontSize="20"/>
                                    </StackLayout>
                                </Frame>
                            </DataTemplate>
                        </CarouselView.ItemTemplate>
                    </CarouselView>
                </StackLayout>
                <!--</StackLayout>-->
            </Grid>


        </ScrollView>

        
    </Grid>
</ContentPage>

解决方案 #

1. 约束Image控件高度 #

默认Image未设置高度时，会拉伸至容器允许的最大高度，直接撑高整个CarouselView项。可以给Image设置固定高度，或绑定ViewModel中计算好的图片实际高度：

<Image Source="{Binding strImagePath}" Aspect="AspectFill" HeightRequest="200" />

2. 调整布局的垂直适配属性 #

给Frame和内部StackLayout设置VerticalOptions="Start"，确保容器仅包裹内容，不额外拉伸：

<Frame HasShadow="True" 
       BorderColor="DarkGray"
       CornerRadius="5"
       Margin="10"
       VerticalOptions="Start" >
    <StackLayout VerticalOptions="Start">
        <Image Source="{Binding strImagePath}" Aspect="AspectFill" HeightRequest="200"/>
        <Label Text="{Binding strLocalisedString}" FontSize="20"/>
    </StackLayout>
</Frame>

3. 优化Grid布局定义 #

你当前Grid中固定了第一列宽度为400，且行高默认用*（占满剩余空间），会导致布局强制拉伸。修改为自适应行高和列宽：

<Grid Margin="0, 5, 0, 0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" /> <!-- 行高自适应内容 -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/> <!-- 列宽自适应内容 -->
    </Grid.ColumnDefinitions>
    <StackLayout>
        <!-- CarouselView内容 -->
    </StackLayout>
</Grid>

4. 给CarouselView设置高度（临时方案） #

如果以上方法无效，可给CarouselView设置固定高度，适合内容高度统一的场景：

<CarouselView x:Name="TheCarousel" PeekAreaInsets="50" Loop="False" HeightRequest="250">
    <!-- ItemTemplate -->
</CarouselView>

内容的提问来源于stack exchange，提问作者james