你如何在 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">&nbsp; &nbsp; <ListView.ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ViewCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image Source="" Aspect="AspectFill"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label VerticalOptions="Center" HorizontalOptions="Center"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ViewCell>&nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; </ListView.ItemTemplate></ListView>