Question

我正在创建一个类别，其中显示了不同种类的菜肴，但是我对如何使用xaml感到困惑，我尽力复制我的设计，这里是图片的链接：{{3} }

这就是我现在所拥有的。 https://i.stack.imgur.com/3dET3.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在布局中将包含一些不必要的视图。您所需要做的就是在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>

如何在XAML中的ListView中拉伸图像？

1 个答案: