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

【问题标题】：How do I set the size of an image within a ListView?如何在 ListView 中设置图像的大小？
【发布时间】：2018-08-20 16:39:24
【问题描述】：

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

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

我发现了以下documentation：

请注意，当面向 Windows Phone 8.1 时，ImageCell 不会缩放默认情况下的图像。另外，请注意 Windows Phone 8.1 是唯一的以相同颜色和字体显示详细文本的平台默认情况下作为主要文本。 Windows Phone 8.0 将 ImageCell 呈现为见下图：

我试过了：

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

上面的代码没有显示任何图像。它只是显示一个白色背景。

【问题讨论】：

你试过设置宽度请求和水平选项吗？

标签： xamarin.forms

【解决方案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'。

如果您进一步为您想要的 ImageWidth 和 ImageHeight 在您的 ViewModel 中执行 BindableProperties，并在上面的示例中使用 WidthRequest 和 HeightRequest 为 Image 指定它们，您将指定不同的值时得到类似的输出：-

【讨论】：

谢谢皮特。这在我使用 StackLayouts 时有效。但是当我用网格替换堆栈布局时，这不起作用。这是一个已知的错误吗？
@ScottNimrod 最好创建一个新问题，并附上一个代码示例，因为它不清楚您如何构建事物并有助于提供帮助。

【解决方案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); }
    }

}

【讨论】：