你如何在 xaml 的列表视图中拉伸图像？

Question

我正在创建一个类别，它显示不同种类的菜肴，但我对如何使用 xaml 有点困惑我尽力复制我的设计这里是图片这就是我现在所拥有的。 MenuCategories.xaml  <ListView x:Name="MyCategory" ItemSelected="MyCategory_ItemSelected" >        <ListView.ItemTemplate>      <DataTemplate>                <ViewCell >                    <Grid x:Name="Categ" ColumnSpacing="0" RowSpacing="0">                        <Grid.RowDefinitions>                            <RowDefinition Height="*" />                        </Grid.RowDefinitions>                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="*" />                            <ColumnDefinition Width="*" />                        </Grid.ColumnDefinitions>                        <StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="Fill" >                            <Image Source="{Binding cat_image ,StringFormat='https://i.imgur.com/{0:F0}.png'}" Scale="1" />                        </StackLayout>                        <StackLayout  Grid.Row="0" Grid.Column="0"  Orientation="Vertical" Grid.ColumnSpan="2" VerticalOptions="Center">                            <Label Font="30" HorizontalTextAlignment="Center" x:Name="categoryname" Text="{Binding cat_code}"                    Style="{DynamicResource ListItemTextStyle}" />                        </StackLayout>                    </Grid>                </ViewCell>      </DataTemplate>    </ListView.ItemTemplate>  </ListView>我的问题是如何像第一张图片一样在 Listview 中扩展列表的宽度，请提前谢谢您。

Answer 1

除非您计划将其他视图添加到这些行/列中，否则您ListView的布局中会包含几个不必要的视图。所有你应该做的是设置RowHeight你的ListView，有一个Grid用Image用Aspect="AspectFill"。请记住，根据图像的纵横比，它可能会裁剪一些图像以使其填充整个网格。

<ListView RowHeight="200">

    <ListView.ItemTemplate>

        <DataTemplate>

            <ViewCell>

                <Grid>

                    <Image Source="" Aspect="AspectFill"/>

                    <Label VerticalOptions="Center" HorizontalOptions="Center"/>

                </Grid>

            </ViewCell>

        </DataTemplate>

    </ListView.ItemTemplate>

</ListView>