Liaison observable de liaison dans une collection observable à un élément Listbox

Question

J'ai une zone de liste qui contient 4 images et chacune affiche une info-bulle que je veux refactoriser mon code dans un style. Le problème est que la zone de liste se trouve dans une grille de données avec l'ensemble d'éléments défini sur un objet collectionView.

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

et DataGrid ..

<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}"> 

En ce moment, la source d'image nécessite une liaison au réseau 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 

Mon modèle et classes de vue:

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

Ainsi après m En donnant à la propriété Images une collection observable, ils ne peuplent encore que si j'utilise un index de tableau [0,1,2,3, ..]. Comment suis-je censé lier la collection Images au contrôle image dans l'élément listbox et de préférence créer un style pour ListboxItem donc il n'y a pas [x] nombre de listbox avec le même code sauf pour l'index de tableaux images

Answer 1

Article À la place:

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