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

Question

目标设备是 Windows Phone 10（即 Windows 通用平台）。

我发现了以下 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:

我试过了：

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

上图显示了完整的图像，没有限制图像的大小以适应列表视图项目。

我也试过了：

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

以上代码没有显示任何图像。它只显示白色背景。

Answer 1

几件事：-

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

你的第二个例子更接近正轨，但是，你需要将它包装在 ViewCell 中，因为你正在处理 ListView 像这样：-

<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 的默认设置为等于行高。

因此，如果您有不同的图像尺寸，这可能不会产生您想要的输出。

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

如果您进一步对 ViewModel 中的 ImageWidth 和 ImageHeight 执行 BindableProperties，并使用 [=20] 按照上面的示例指定它们=] 和 HeightRequest 对于 Image 当指定不同的值时，您将得到类似这样的输出：-

Answer 2

只是在熟食中加盐，你也可以动态地做：

 <Slider x:Name="slider" Maximum="600"  Minimum="30"  />

    <ListView RowHeight="55" x:Name="lv_prayers_categories_page" 
              ItemsSource="{Binding SimpleList}"  
              HasUnevenRows="true" 
              BackgroundColor="Transparent" 
              SeparatorVisibility="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
        <StackLayout BackgroundColor="#eee" HeightRequest="50"   >
                            <StackLayout Orientation="Horizontal">
                                <Image Aspect="AspectFill" Source="{Binding Image}" HeightRequest="{Binding Source={x:Reference slider}, Path=Value}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                                <Label Text="{Binding Name}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding ID}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

查看模式：

private ObservableCollection<SimpleImage> _impleList;
public ObservableCollection<SimpleImage> SimpleList
{
    get => _impleList;
    set => SetProperty(ref _impleList, value);
}

    SimpleList = new ObservableCollection<SimpleImage>()
    {
        new SimpleImage(){
            ID = 0,
            Name = "Female",
            Image = "https://griffonagedotcom.files.wordpress.com/2016/07/profile-modern-2e.jpg"

        },
        new SimpleImage(){
            ID = 1,
            Name = "Male",
            Image = "https://media.istockphoto.com/photos/profile-view-of-confident-sportsman-picture-id488758510?k=6&m=488758510&s=612x612&w=0&h=yIwLu2wdd2vo317STdyNlKYIVIEJEFfDKfkY8pBIfaA="

        },
        new SimpleImage(){
            ID = 2,
            Name = "Android",
            Image = "https://www.cnn.co.jp/storage/2015/11/06/17626d508c2c2a8c8c322d353631a431/zuckerberg-getty.jpg"

        },
    };

模态：

public class SimpleImage : BindableBase
{
    private int _id;
    public int ID
    {
        get { return _id; }
        set { SetProperty(ref _id, value); }
    }

    private string _name;
    public string Name
    {
        get { return _name; }
        set { SetProperty(ref _name, value); }
    }

    private ImageSource _image;
    public ImageSource Image
    {
        get { return _image; }
        set { SetProperty(ref _image, value); }
    }

}

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

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

xamarin.forms