Question

我正在尝试将网址列表绑定到图片。

 <VariableSizedWrapGrid Grid.Row="2"
                               Orientation="Horizontal">
            <ItemsControl  ItemsSource="{Binding Images}">
                <DataTemplate>
                    <Image Source="{Binding }"/>
                </DataTemplate>
            </ItemsControl>
        </VariableSizedWrapGrid >

我也尝试过使用转换器，如下所示：

var current = value as ObservableCollection<string>;
                if (current == null) return null;
                var result = new ObservableCollection<BitmapImage>();
                foreach (var item in current)
                {
                    result.Add(new BitmapImage(new Uri(item, UriKind.RelativeOrAbsolute)));
                }
                return result;

Images属性是ObservableCollection（）。

结果非常奇怪，因为在UI中我只能看到URL字符串列表 - 而不是图像。有谁知道如何解决这个问题？

Answer 1

ItemsSource通常引用项目列表。这可以是来自业务对象的固定列表，也可以是用于在基础数据发生更改时触发通知的列表。该列表可以是通用接口（例如IList）或实现Windows运行时数据绑定支持的集合接口的实用类。在ItemsControl中显示项目时，可以使用ItemTemplate属性，ItemsPanel属性或两者来指定项目的外观。

有关详细信息，请参阅ItemsControl的备注。

我们应该能够使用我们可以添加DataTemplate的{{3}}。

例如：

<VariableSizedWrapGrid Grid.Row="2"
                       Orientation="Horizontal">
    <ItemsControl ItemsSource="{Binding }">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</VariableSizedWrapGrid>

顺便说一下，我们不需要将字符串转换为BitmapImage，我们应该使用Image.Source绑定string。

例如：

private ObservableCollection<string> current;

public MainPage()
{
    this.InitializeComponent();
    current = new ObservableCollection<string>();
    current.Add("ms-appx:///Assets/sunset.jpg");
    current.Add("ms-appx:///Assets/treetops.jpg");
    current.Add("ms-appx:///Assets/valley.jpg");
    this.DataContext = current;
}

Answer 2

如果自动转换不起作用，您可以尝试使用自定义转换器将URI转换为BitmapImage对象。下面是一个转换器，用于将uri转换为BitmapImage。

public class UriConverterNormal : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        string relativepath = value as String;
        BitmapImage bi = new BitmapImage();
        bi.UriSource = new Uri(relativepath.Trim(), UriKind.Absolute);
        return bi;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

然后在页面的资源区域中定义转换器，或者在您正在使用的任何内容中控制用户。

<UserControl.Resources>
<c:UriConverter x:Key="UriConverter" /></UserControl.Resources>

然后使用带有图像控制的转换器，如下所示

<VariableSizedWrapGrid Grid.Row="2" Orientation="Horizontal">
<ItemsControl  ItemsSource="{Binding Images}">
    <DataTemplate>
        <Image Source="{Binding imageUrl, Converter={StaticResource UriConverter}}"/>
    </DataTemplate>
</ItemsControl></VariableSizedWrapGrid >

UWP绑定图像列表

2 个答案: