Xamarin 表单列表视图 - 显示图像全宽，自动高度

Posted 2023-02-23

【中文标题】Xamarin 表单列表视图 - 显示图像全宽，自动高度

【英文标题】：Xamarin forms listview - show images full widh, auto height

【发布时间】：2019-10-18 15:42:17

【问题描述】：

我在 Xamarin Forms 中有一个列表视图，我需要保持纵横比，但也需要：

当图像的高度大于宽度时，图像向左和向右齐平显示，没有边距，高度为 auto

当图像宽于高时，要求是相同的，但这是可行的。在屏幕截图中，它显示了当图像高于宽时图像当前的渲染方式。当宽比高时，更改 aspect 属性会破坏条件。当我将此模板复制到空白页面时，图像显示正常。我认为问题在于能够将列表视图中每一行的高度设置为自动。但这可能不是问题。我正在为 Xamarin 使用 SyncFusion 列表视图

这里是listview的item模板的代码：

<DataTemplate>
  <ViewCell>
     <StackLayout Margin="0,10,0,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
          <!-- Card Header -->
                <!-- Truncated for brevity -->
                </Grid>
                 <StackLayout Grid.Row="1">
                         <!-- Card title -->
                         <!-- Truncated for brevity -->
                  </StackLayout>
                  <!-- Card Body -->
                  <StackLayout  BindingContextChanged="PostImageStackLayout_BindingContextChanged">
                  <Grid Grid.Row="2" x:Name="postImageStackLayout" Margin="0,15,0,10">
                        <!-- Card article image -->
                        <ffimageloading:CachedImage Grid.Row="0" x:Name="postImage" CacheDuration="1" HeightRequest="300"
                            Source="Binding MainIMageURL" BindingContextChanged="PostImage_BindingContextChanged"
                            VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                            Margin="0,10,0,10" FadeAnimationEnabled="True" Aspect="AspectFit" >
                         <ffimageloading:CachedImage.GestureRecognizers>
                              <TapGestureRecognizer Tapped="PostImageTapped" CommandParameter="Binding "/>
                          </ffimageloading:CachedImage.GestureRecognizers>
                        </ffimageloading:CachedImage>                                           
                 </Grid>
     </StackLayout>
     <!--Likes and comment count-->
     <!-- Truncated for brevity -->

【参考方案1】：

不要在具有图像元素的网格行上放置固定高度。您可以使用“自动”值。

<RowDefinition Height="auto"/>

并将 Aspect 更改为

AspectFill

我使用来自最新 Xamarin.Forms 4.3 的集合视图。这是我的示例代码

xaml

<ContentView.Content>
        <StackLayout>
            <CollectionView x:Name="ImagesCollectionView">
                <CollectionView.ItemsLayout>
                    <ListItemsLayout ItemSpacing="20">
                        <x:Arguments>
                            <ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>    
                        </x:Arguments>
                    </ListItemsLayout>
                </CollectionView.ItemsLayout>             

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <ffimageloading:CachedImage
                                HorizontalOptions="FillAndExpand" 
                                Source="Binding ."
                                Aspect="AspectFill"
                                LoadingPlaceholder="noimg.png"/>

                            <Label Text="label" 
                                   TextColor="Gray" 
                                   Opacity="0.8" 
                                   Margin="12,0,0,0"
                                   HorizontalOptions="Start" 
                                   FontSize="Small"/>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
</ContentView.Content>

c#

    public MySecondView()
    
        InitializeComponent();

        ImagesCollectionView.ItemsSource = new List<string>()
        
        "http://insidetema.com/wp-content/uploads/2018/05/170717100550_1_900x600.jpg"
        ,"https://informationng.com/wp-content/uploads/2014/03/bigstock_Happy_Business_People_With_Han_4049346.jpg"
        ,"http://www.blt.co.uk/wp-content/uploads/2018/03/Happy-Places.jpg"
        ;
    

输出

【讨论】：

图像在堆栈布局中，而不是网格中。更改为 aspectfill 会剪辑图像。当我尝试将所有元素放入高度为 auto 的网格中时，上面 xaml 中的“网格”引用是遗留下来的。也没有用

这个代码是什么样的？我想试试

谢谢，虽然图片占据了整个宽度，但它并没有达到需要的高度，而且还被剪裁了。 （部分图片丢失）

如果此示例不适用于您的范围，请使用工作图像和您想要的最终 ui 结果更新您的问题。

已经发布了。问题如上所述，建议的所有解决方案都不起作用

【参考方案2】：

您可以将图像的 HeightRequest 和 WidthRequest 设置为 -1（然后它将适合所有可用空间）

【讨论】：

谢谢，但图片变小了