Question

如何在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>

以上代码不显示任何图片。它只显示白色背景。

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

如果您对BindableProperties中的ImageWidth和ImageHeight进一步ViewModel，并使用WidthRequest在上面的示例中指定它们和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中设置图像的大小？

2 个答案: