將可觀察集合中的Observable集合綁定到列表框項目

Question

我有一個包含4個圖像的列表框，每個顯示一個工具提示，我想將我的代碼重構爲一個樣式。問題是列表框位於dataource中，其中itemsource被設置爲一個collectionView。

<CollectionViewSource x:Key="ItemsViewSource" Source="{Binding PicklistItemCollection}" /> 

和數據網格..

<DataGrid x:Name ="PicklistItemDataGrid" x:FieldModifier="public" AutoGenerateColumns="False" 
      SelectionMode="Single" SelectionUnit="FullRow" VerticalScrollBarVisibility="Auto" 
      MaxHeight="492" ItemsSource="{Binding Source={StaticResource ItemsViewSource}}" 
      DataContext="{Binding Path=this, Mode=TwoWay}"> 

眼下圖像源需要結合的ImageUrl陣列[0]，[1]，[2]，[3]

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto" > 
<ListBox.ItemsPanel> 
    <ItemsPanelTemplate> 
     <WrapPanel IsItemsHost="True" /> 
    </ItemsPanelTemplate> 
</ListBox.ItemsPanel> 
<ListBoxItem> 
    <Image ToolTipService.ShowDuration="60000" Source="{Binding Images[0].ImageUrl}" Width="240" Height="240" Stretch="Uniform" Margin="0,8,5,8"> 
     <Image.ToolTip> 

      <ToolTip MaxWidth="600" MaxHeight="580" 
         DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}"> 
       <Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5"> 
        <Image Source="{Binding Source}" Stretch="Fill" /> 
       </Border> 
      </ToolTip> 
     </Image.ToolTip> 
    </Image> 
</ListBoxItem> 
<ListBoxItem> 
    <Image ToolTipService.ShowDuration="60000" Source="{Binding Images[1].ImageUrl}" Width="240" Height="240" Stretch="Uniform" Margin="0,8,5,8"> 
     <Image.ToolTip> 
      <ToolTip MaxWidth="600" MaxHeight="580" 
         DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}"> 
       <Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5"> 
        <Image Source="{Binding Source}" Stretch="Fill" /> 
       </Border> 
      </ToolTip> 
     </Image.ToolTip> 
    </Image> 
</ListBoxItem> 

.....and so on... for each array item 

我的查看模型和類：

class PicklistItemViewModel : INotifyPropertyChanged 
{ 
    private ObservableCollection<PicklistItem> _picklistItemCollection; 

    public PicklistItemViewModel() 
    { 



     List<Rootobject> rootObjectList = CARestRequest.ChannelAdvisorRestCall(CARestRequest.url.product, CARestRequest.GetProductParameterList(CARestRequest.GetSkuString())); 
     ObservableCollection<PicklistItem> picklist = new ObservableCollection<PicklistItem>(); 


     foreach (var rol in rootObjectList) 
     { 
      foreach (var r in rol.value) 
      { 
       picklist.Add(AddPicklistItem(r)); 
      } 

     } 
     PicklistItemCollection = picklist; 

    } 
} 

public class PicklistItem:INotifyPropertyChanged 
{ 
    private string itemcode; 
    private string location; 
    private int qty; 
    private string title; 
    public bool RowActive { get; set; } = false; 

    //Here is old images list and the getter and setters for the private 
    //variables i deleted to save space 
    //public List<PicklistImageUrl> Images { get; set; } 

    private ObservableCollection<PicklistImageUrl> _imageCollection; 
    public ObservableCollection<PicklistImageUrl> Images 
    { 
     get { return _imageCollection; } 
     set { _imageCollection = value; } 
    } 
} 
public class PicklistImageUrl 
{ 
    public string ImageUrl { get; set; } 
} 

所以在m如果我使用數組索引[0,1,2,3，..]，那麼爲Images屬性設置一個可觀察集合。我應該如何將圖像集合綁定到列表框項目中的圖像控件，並最好爲ListboxItem創建一個樣式，以便不存在[x]具有相同代碼的列表框項目數量，除了圖像數組索引

Answer 1

ItemTemplete改爲：

<ListBox ItemsSource="{Binding Images}"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Image ToolTipService.ShowDuration="60000" Source="{Binding ImageUrl}" Width="240" Height="240" Stretch="Uniform" Margin="0,8,5,8"> 
       <Image.ToolTip> 
        <ToolTip MaxWidth="600" MaxHeight="580" 
       DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}"> 
         <Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5"> 
          <Image Source="{Binding Source}" Stretch="Fill" /> 
         </Border> 
        </ToolTip> 
       </Image.ToolTip> 
      </Image> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>