UWPイメージリストのバインド

Question

URLリストをイメージにバインドしようとしています。私はまた、以下のようにコンバータでそれを行うことを試みた

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

イメージプロパティ）（のObservableCollectionです。

結果は本当に奇妙です。なぜなら、UIではURLストリングのリストしか見ることができないからです。イメージではありません。誰もそれを解決する方法を知っていますか？

Answer 1

ItemsSourceは通常、アイテムのリストを参照します。これは、ビジネスオブジェクトからの固定リスト、または基になるデータが変更された場合に通知を発行するように設計されたリストです。リストは、汎用インターフェイス（IListなど）またはWindowsランタイムデータバインディングがサポートするコレクションインターフェイスを実装する実用的なクラスです。 ItemsControlにアイテムを表示するときは、ItemTemplateプロパティ、ItemsPanelプロパティ、またはその両方を使用してアイテムの外観を指定できます。

詳細については、ItemsControlの注釈を参照してください。

ItemsControl.ItemTemplateを使用して、DataTemplateを追加することができます。例えば

：

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

我々はBitmapImageに文字列を変換する必要はありませんところで、私たちはstringをバインドするImage.Sourceを使用する必要があります。例えば

：

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

あなたは、自動変換が機能しない場合のBitmapImageオブジェクトにURIを変換するためのカスタムコンバータをしようとします。 以下は、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> 

そして、「あなたはBitmapImageのオブジェクトにURIを変換する必要があります」

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