如何在ListView中设置图像的大小? [英] How do I set the size of an image within a ListView?

问题描述

如何在ListView中设置图像的大小?

How do I set the size of an image within a ListView?

目标设备是Windows Phone 10(即Windows Universal Platform).

The targeted device is Windows Phone 10 (i.e. Windows Universal Platform).

我发现了以下文档:

请注意，在定位Windows Phone 8.1时，ImageCell不会缩放 图片默认情况下.另外，请注意，Windows Phone 8.1是唯一的 以相同的颜色和字体显示详细文本的平台 预设为主要文字. Windows Phone 8.0将ImageCell呈现为 如下所示:

Note that when targeting Windows Phone 8.1, ImageCell will not scale images by default. Also, note that Windows Phone 8.1 is the only platform on which detail text is presented in the same color and font as primary text by default. Windows Phone 8.0 renders ImageCell as seen below:

我已经尝试过:

<ListView Grid.Row="1" ItemsSource="{Binding Photos}" SelectedItem="{Binding SelectedPhoto, Mode=TwoWay}">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ImageCell ImageSource="{Binding ImageSource}" Text="{Binding Description}" TextColor="Silver" />
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

上面的图像显示了一张完整的图像，而没有限制图像的大小以适合列表视图项目.

The above image shows a full-blown image without confining the size of the image to fit as a listview item.

我也尝试过:

<ListView Grid.Row="1" ItemsSource="{Binding Photos}" SelectedItem="{Binding SelectedPhoto, Mode=TwoWay}">
  <ListView.ItemTemplate>
    <DataTemplate>
      <Image Source="{Binding ImageSource}" Aspect="AspectFit" />
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

以上代码未显示任何图像.它只是显示白色背景.

The above code doesn't show any image. It just shows a white background.

推荐答案

几件事:-

ImageCell无法指定图像的宽度/高度(v2.0.x).

ImageCell has no ability to specify the image width / height (v2.0.x).

您的第二个示例更加合理，但是，在处理ListView时，您需要将其包装在ViewCell中，如下所示:-

Your second example is more on track, however, you need to wrap it in a ViewCell as you are dealing with a ListView like so:-

<ListView ItemsSource="{Binding Photos}" HasUnevenRows="True">
  <ListView.ItemTemplate>
    <DataTemplate>            
      <ViewCell>
        <Image Source="{Binding MyImage}" Aspect="AspectFit" WidthRequest="{Binding MyWidth}" HeightRequest="{Binding MyHeight}" />
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView> 

此外，请注意，ListView的默认设置为具有等于的行高.

Also, note that the default for a ListView is set to have equal row heights.

因此，如果您使用不同的图像尺寸，则可能无法产生所需的输出.

Therefore if you have different image sizes, chances are this may not produce the output you want.

要解决此问题，请指定HasUnevenRows='True'.

To get around this, specify HasUnevenRows='True'.

如果您要对ViewModel中的ImageWidth和ImageHeight做进一步的BindableProperties的操作，并按照上面的示例使用WidthRequest和HeightRequest表示Image来指定它们，则将指定不同的值时，输出结果如下所示:-

If you further do BindableProperties for what you want the ImageWidth and ImageHeight in your ViewModel, and specify them as in the example above using WidthRequest and HeightRequest for Image you will get something like this for the output when specifying different values:-

这篇关于如何在ListView中设置图像的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！