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

Question

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

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

I've discovered the following documentation:

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:

I've tried:

<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.

I've also tried:

<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.

Answer 1

Few things:-

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

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> 

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.

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

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:-