你如何在xaml中的listview中拉伸图像？

Question

我正在创建一个类别，它显示不同类型的菜肴，但我有点困惑如何使用xaml我尽我所能复制我的设计这里的图片 链接： https ： //i.stack.imgur.com/3dET3.jpg

这就是我现在拥有的。 链接： https ： //i.stack.imgur.com/f8VSu.jpg

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在您的布局中包含多个不必要的视图。 您所要做的就是在ListView上设置RowHeight并使用带有Aspect="AspectFill"的Image的Grid 。 请记住，根据图像宽高比，它可能会裁剪一些图像以使其填满整个网格。

<ListView RowHeight="200">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Image Source="" Aspect="AspectFill"/>
                    <Label VerticalOptions="Center" HorizontalOptions="Center"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>