綁定多個項目到列表視圖行

Question

這裏是我想要做什麼的描述：我需要建立一個產品目錄，當用戶按下肉的按鈕時，目錄（ListView）填滿了肉的照片我希望每個行包含3個產品...繼承人是我到目前爲止有：

XAML：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfApplication1" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <local:ImageConverter x:Key="ImageConverter"/> 
     <DataTemplate x:Key="imageListView"> 
      <StackPanel> 
       <Image Source="{Binding .,Converter={StaticResource ImageConverter}}" Height="50" Width="100" /> 
      </StackPanel> 
     </DataTemplate> 
    </Window.Resources> 
    <Grid> 
     <ListView ItemsSource="{Binding ImageCollection}" ItemTemplate="{StaticResource imageListView}"/>  
    </Grid> 
</Window> 

返回代碼爲XAML：

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 
     MyViewModel VM = new MyViewModel(); 
     DataContext = VM; 
    } 
} 

class ImageConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if (value is Bitmap) 
      return ConvertBitmapToBitmapImage((Bitmap)value); 
     return null; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     return null; 
    } 

    private BitmapImage ConvertBitmapToBitmapImage(Bitmap bitmap) 
    { 
     MemoryStream memoryStream = new MemoryStream(); 
     bitmap.Save(memoryStream, ImageFormat.Png); 
     BitmapImage bitmapImage = new BitmapImage(); 
     bitmapImage.BeginInit(); 
     bitmapImage.StreamSource = new MemoryStream(memoryStream.ToArray()); 
     bitmapImage.EndInit(); 
     return bitmapImage; 
    } 
} 

而且MyViewModel代碼：

private List<Bitmap> m_ImageCollection; 
public MyViewModel() 
{ 
    LoadImages(); 
} 
void LoadImages() 
{ 
    m_ImageCollection = new List<Bitmap>(); 
    ResourceManager rm = Properties.Resources.ResourceManager; 
    ResourceSet rs = rm.GetResourceSet(new CultureInfo("en-US"), true, true); 
    if (rs != null) 
    { 
     var images = 
      from entry in rs.Cast<DictionaryEntry>() 
      where entry.Value is Bitmap 
      select entry; 

     foreach (DictionaryEntry img in images) 
     { 
      if (img.Value is Bitmap) 
       m_ImageCollection.Add((Bitmap)img.Value); 
     } 
    } 
} 
public List<Bitmap> ImageCollection 
{ 
    get { return m_ImageCollection; }  
    set { m_ImageCollection = value; } 
} 

的Picturs加載，但在一排我想了三頁連勝的圖片每張圖片...

任何幫助嗎？

Answer 1

我只是做一個虛擬機，它表示一個行：

//immutable - so safe to bind to without INotifyPropertyChange support 
    public sealed class BitmapRow 
    { 
      private readonly Bitmap _bitmap1; 
      private readonly Bitmap _bitmap2; 
      private readonly Bitmap _bitmap3; 

      public BitmapRow(Bitmap bitmap1, Bitmap bitmap2, Bitmap bitmap3) 
      { 
       _bitmap1 = bitmap1; 
       _bitmap2 = bitmap2; 
       _bitmap3 = bitmap3; 
      } 

      public Bitmap Bitmap1{ get{return _bitmap1;}} 
      public Bitmap Bitmap2{ get{return _bitmap2;}} 
      public Bitmap Bitmap3{ get{return _bitmap3;}} 
    } 

然後：

<StackPanel Orientation="Horizontal"> 
    <Image Source="{Binding Path=Bitmap1,Converter={StaticResource ImageConverter}}" Height="50" Width="100" /> 
    <Image Source="{Binding Path=Bitmap2,Converter={StaticResource ImageConverter}}" Height="50" Width="100" /> 
    <Image Source="{Binding Path=Bitmap3,Converter={StaticResource ImageConverter}}" Height="50" Width="100" /> 
</StackPanel> 

更改主VM那麼看起來像：（順便說一下List<T>是不是一個好主意對於WPF，請使用ObservableCollection<T>）：

private readonly ObservableCollection<BitmapRow> m_ImageCollection = new ObservableCollection<BitmapRow>(); 
    public IEnumerable<BitmapRow> ImageCollection 
    { 
     get { return m_ImageCollection; } 
    } 

    void LoadImages() 
    {    
     ResourceManager rm = Properties.Resources.ResourceManager; 
     ResourceSet rs = rm.GetResourceSet(new CultureInfo("en-US"), true, true); 
     if (rs != null) 
     { 
      //var allImages = new List<Bitmap>(); 
      //var images = 
      // from entry in rs.Cast<DictionaryEntry>() 
      // where entry.Value is Bitmap 
      // select entry;     

      //foreach (DictionaryEntry img in images) 
      //{ 
      // var bmp = img.Value as Bitmap; //one type cast 
      // if (bmp!=null) 
      // { 
      //  allImages.Add(bmp); 
      // } 
      //} 

      //neat alternative to all of above code: 
      var allImages = rs.Cast<DictionaryEntry>().Values.OfType<Bitmap>().ToList(); 
      //or maybe you need to do this: 
      var allImages = rs.Cast<DictionaryEntry>().Select(d=>d.Value).OfType<Bitmap>().ToList(); 

      //now load the images in allImages in 3s into BitmapRows and add to m_ImageCollection 
      //I'll leave this bit up to you to complete - you need to decide what to do 
      //when the list is not an exact multiple of 3 
      var max = allImages.Count(); 
      for(ini row = 0; row < max/3; row+=1) 
      { 
       Bitmap a = allImages[row*3]; 
       Bitmap b = allImages[row*3+1]; //TODO: needs index checking 
       Bitmap c = allImages[row*3+2]; //TODO: needs index checking 
       m_ImageCollection.Add(new BitmapRow(a,b,c)); 
      } 
     } 
    }