WPF personnalisé ItemsControl and Binding

Question

J'ai créé un ItemsControl personnalisé appelé Toolbox. Je veux être en mesure d'afficher des images dans cette boîte à outils - c'est une partie d'un concepteur de diagramme.

Mon XAML ressemble à ceci:

<d:Toolbox ItemsSource="{Binding}"> 
          <ItemsControl.ItemTemplate> 
           <DataTemplate> 

            <Image Source="{Binding Library}"/> 

           </DataTemplate> 

          </ItemsControl.ItemTemplate> 
         </d:Toolbox> 

et mon ViewModel:

public ObservableCollection<ElectricalLibrary> l = null; 
     public ObservableCollection<Image> _images = null; 
     public ObservableCollection<Image> Library 

     { 
      get 
      { 
       if (l == null) 
       { 
        DataAccessLayerClass dc = new DataAccessLayerClass(); 
        dc.LoadComponents(); 
        l = dc.Library; 
        foreach (ElectricalLibrary lib in l) { 
         Image finalImage = new Image(); 
         finalImage.Width = 80; 
         BitmapImage logo = new BitmapImage(); 
         logo.BeginInit(); 
         logo.UriSource = new Uri(lib.url.ToString()); 
         logo.EndInit(); 

         finalImage.Source = logo; 
         MessageBoxResult result = MessageBox.Show(logo.UriSource.ToString()); 

         _images.Add(finalImage); 
        } 



       } 
       return _images; 
      } 
      set { _images = value; } 
     } 

Ands c'est un fichier de ressources pour boîte à outils lui-même:

<Style TargetType="{x:Type s:Toolbox}"> 
     <Setter Property="SnapsToDevicePixels" 
       Value="true" /> 
     <Setter Property="Focusable" 
       Value="False" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border BorderThickness="{TemplateBinding Border.BorderThickness}" 
          Padding="{TemplateBinding Control.Padding}" 
          BorderBrush="{TemplateBinding Border.BorderBrush}" 
          Background="{TemplateBinding Panel.Background}" 
          SnapsToDevicePixels="True"> 
         <ScrollViewer VerticalScrollBarVisibility="Auto"> 
          <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" /> 
         </ScrollViewer> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <WrapPanel Margin="0,5,0,5" 
           ItemHeight="{Binding Path=DefaultItemSize.Height, RelativeSource={RelativeSource AncestorType=s:Toolbox}}" 
           ItemWidth="{Binding Path=DefaultItemSize.Width, RelativeSource={RelativeSource AncestorType=s:Toolbox}}" /> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Je magasin seulement les URL des images dans la base de données, les images sont stockées sur un disque. Je prends l'objet entité et crée une image, l'ajoute dans un ObservableCollection d'images et lie le contrôle Image à LIbrary dans xaml.

Évidemment, le code ne fonctionne pas. Mais comment le faire fonctionner? La liste avec les images est chargée correctement.

Merci pour votre aide.

Answer 1

**** EDIT **** Droit - J'ai réussi à faire fonctionner le code après quelques changements. Changez votre propriété de bibliothèque pour renvoyer une liste de l'ensemble d'Uri de votre base de données Objets - assurez-vous que vous avez réellement retourné quelque chose. Je suggère ce qui suit pour votre propriété (changer si vous avez besoin d'une propriété plus robuste qui ne marche pas réextrayez chaque fois qu'il ya obtenir ...

public ObservableCollection<Uri> Library 
{ 
    get 
    { 
     OberservableCollection<Uri> library = new OberservableCollection<Uri>(); 
     DataAccessLayerClass dc = new DataAccessLayerClass(); 
     dc.LoadComponents(); 

     foreach (ElectricalLibrary lib in dc.Library) 
     { 
      library.Add(new Uri(lib.url.ToString())); 
     } 

     return library; 
    } 

Ensuite, votre XAML peut ressembler à ceci:

     <d:Toolbox ItemsSource="{Binding Library}"> 
          <ItemsControl.ItemTemplate> 
           <DataTemplate> 

            <Image Source="{Binding}"/> 

           </DataTemplate> 

          </ItemsControl.ItemTemplate> 
         </d:Toolbox> 

faire cela fait fonctionner très bien pour moi.

texte original gauche pour des raisons historiques

Vous semblez être lier l'image à l'ensemble de la collection. Si ce n'est qu'une seule liste d'images dont vous avez besoin, la boîte à outils ItemsSource devrait être la collection Library avec une image dans le DataTemplate (je ne peux pas tester cela maintenant, donc ce n'est pas un code 100%)

<d:Toolbox ItemsSource="{Binding Library}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
       <Image Source="{Binding}"/> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</d:Toolbox> 

Answer 2

Essayez ceci:

<d:Toolbox ItemsSource="{Binding Library}"> 
<Image Source="{Binding}"/>