добавить пользовательский элемент управления с изображением в wpf Listbox

Question

У меня есть этот проект, где я хотел бы установить некоторые изображения на свой экран, добавив пользовательский элемент управления (inSignalLight) в список (или какой-либо другой элемент управления, я бы просто хотел их выровнять) вверх). Я установил изображения в пользовательских элементах управления и добавил их в «ObservableCollection», но ничего не отображается. Im действительно новичок в WPF, поэтому не совсем уверен, что xaml является корневым ... Если есть лучший способ сделать это, то в списке, пожалуйста, скажите мне тоже.

inSignalLights = new ObservableCollection<inSignalLight>(); 

Вот XAML на странице, что я хотел бы показать фотографии в

<Page x:Class="Project.Pages.MainPicView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    mc:Ignorable="d" 

    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    Background="Beige" 
Title="MainPicView" d:DesignHeight="343" d:DesignWidth="676"> 

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
    <Label Content="Label" Height="30" HorizontalAlignment="Left" Margin="61,195,0,0" Name="label1" VerticalAlignment="Top" Width="164" /> 
    <ListBox ItemsSource="{Binding Path=inSignalLights}" Width="400" Height="25" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel IsItemsHost="True"/> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
    </ListBox> 
</Grid> 
</Page> 

Edit:.

Это XAML для пользовательского элемента управления

<UserControl x:Class="Project.CustomControls.inSignalLight" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="16" d:DesignWidth="16"> 
<Grid> 
    <Image Height="16" HorizontalAlignment="Left" Margin="0,0,0,0" Name="signalImage" Stretch="Fill" VerticalAlignment="Top" Width="16" /> 
</Grid> 
</UserControl> 

Редакция:

for (int i = 0; i < inpins; i++) 
     { 
      InPin ip = iFace.getInPin(i); 
      parent.insertNewSignalLight(ip); 
     } 

public void insertNewSignalLight(InPin ip) 
    { 
     inSignalLight isl = new inSignalLight(ip); 
     isl.setLightOff(); 
     this.inSignalLights.Add(isl.signalImage); 
    } 
public void setLightOff() 
    { 
     setThreadSafeImage(signalImage); 
    } 

    private void gotLightSignal(InPin pin, EventArgs e) 
    { 
     Thread.CurrentThread.Join(200); 
     if (pin.PinState == 1) 
      setLightOn(); 
     else 
      setLightOff(); 
    } 
    public void setThreadSafeImage(Image iS) 
    { 
     string strUri2 = String.Format(@"pack://application:,,,/;component/Images/Signal_Gron_16.png"); 
     BitmapImage img = new BitmapImage(new Uri(strUri2)); 
     img.Freeze(); 

     iS.Dispatcher.BeginInvoke(
        DispatcherPriority.Background, 
         new Action(() => iS.Source = img)); 

    } 

Answer 1

В вашей модели ViewModel должно быть ObservableCollection<ImageSource> Images. Я думаю, что ваш UserControl с Image не нужен.

Вы должны определить ItemTemplate в ListBox:

<ListBox ItemsSource="{Binding Path=Images}" Width="400" Height="25" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel IsItemsHost="True"/> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Image Height="16" HorizontalAlignment="Left" Margin="0,0,0,0" Stretch="Fill" VerticalAlignment="Top" Width="16" Source="{Binding}" /> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

И как заполнить коллекцию изображений? Это очень легко. Добавить экземпляры BitmapImage в цикле, как:

BitmapImage bi = new BitmapImage(); 
bi.BeginInit(); 
bi.UriSource = new Uri(@"/Images/image_file.png", UriKind.RelativeOrAbsolute); 
bi.EndInit(); 

Answer 2

Ну на самом деле в вашем случае (если контроль остается просто), вам не нужен CustomControl, кстати ваш пример ИМХО называется UserControl, в любом случае.

Вы можете просто объявить DataTemplate. Например.

<ListBox ItemsSource="{Binding YourCollectionInDataContext}"...> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <Image Source="{Binding SomePropertyOfYourItemVm1}"/> 
       <TextBlock Text="{Binding SomePropertyOfYourItemVm2}"/> 
      </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Для получения дополнительной информации см. here.

UserControls (состав элементов управления) и CustomControls (расширение существующего элемента управления) следует использовать только в том случае, если нет другой возможности реализовать желаемую функцию. This - хороший артикул об обоих типах элементов управления.