如何绑定到图像列表

Question

我已将代码更改为：

观点：

<phone:Panorama.ItemTemplate>
            <DataTemplate>
                <ScrollViewer Width="800" HorizontalContentAlignment="Left" Margin="0,50,0,0">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <ListBox x:Name="list_of_images" ItemsSource="{Binding ImagesUrls}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <Image Width="300" Height="300" Source="{Binding}"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"  />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ListBox>

                        <TextBlock Text="{Binding Title}" 
                                    Grid.Row="1"
                                   Loaded="TextBlock_Loaded_1"
                                   Margin="50,0,0,0"
                                   FontSize="23"
                                   TextWrapping="Wrap"
                                   Width="360"
                                   HorizontalAlignment="Left"
                                   Foreground="Black"/>

                        <TextBox Text="{Binding ContactEmail}" 
                                   Grid.Row="2" 
                                BorderBrush="Black"
                                 Width="340"
                                 HorizontalAlignment="Left"
                                 BorderThickness="1"
                                  Margin="40,0,0,0"
                                   Foreground="Black" />

                        <TextBlock Text="{Binding Body}" 
                                   Grid.Row="3" 
                                   TextWrapping="Wrap"
                                   Foreground="Black"
                                   Margin="50,5,0,0"
                                   Width="360"
                                   HorizontalAlignment="Left"
                                   FontSize="20" />
                    </Grid>

我构建了一个具有不同属性的新对象，其中一个属性是代表图像网址的字符串列表，但我无法显示图像？

我附上了屏幕截图，我必须更改我的 xaml 中的哪些内容才能显示图像，因为目前它没有显示任何图像，但它显示了所有其他详细信息

填充集合的代码：

   ObservableCollection<ClassifiedAds> klasifiseerd_source = new ObservableCollection<ClassifiedAds>();

  ImagesClassifieds new_Classifieds = new ImagesClassifieds();

  ObservableCollection<string> gallery_images = new ObservableCollection<string>();


   new_Classifieds.Title = klasifiseerd_source[0].Title;
   new_Classifieds.ContactEmail = klasifiseerd_source[0].ContactEmail;
   new_Classifieds.Body = klasifiseerd_source[0].Body;


         foreach (var item in klasifiseerd_source[0].Gallery.Images)
        {
            var deserialized = JsonConvert.DeserializeObject<GalleryImages>(item.ToString());
            gallery_images.Add(deserialized.ImageUrl);
            //new_Classifieds.ImageUrls.Add(deserialized.ImageUrl);
        }

      new_Classifieds.ImageUrls = gallery_images;

        // classifiedPanorama.ItemsSource = new_list;

        new_Classifieds_list.Add(new_Classifieds);

        classifiedPanorama.ItemsSource = new_Classifieds_list;


public class ImagesClassifieds
{
    public string Title { get; set; }
    public string ContactEmail { get; set; }
    public string Body { get; set; }
    public ObservableCollection<string> ImageUrls { get; set; }

}

这是 imageurl 格式，它可以工作（在我的应用程序的另一个部分中，我只需绑定到这种格式的 1 个图像，它就可以完美地工作）

Answer 1

根据您是只想显示图像列表还是还希望能够选择它们，您可以选择 ItemsControl 或 ListBox。在这两种情况下，您都必须定义一个 DataTemplate 来控制每个项目的显示方式。

<ItemsControl ItemsSource="{Binding Images}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

或

<ListBox ItemsSource="{Binding Images}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

然后您应该考虑如何定义您的项目类别。万一您希望能够从列表中动态添加或删除图像并让 UI 自动更新，您应该使用 ObservableCollection 作为容器类型。由于存在从string 到ImageSource（Image 控件的Source 属性的类型）的内置类型转换，您可以简单地使用ObservableCollection<string>。

public class Gal
{
    public ObservableCollection<string> Images { get; set; }
}

您可以像这样创建该类的实例：

var gallery = new Gal();
gallery.Images = new ObservableCollection<string>(
    Directory.EnumerateFiles(@"C:\Users\Public\Pictures\Sample Pictures", "*.jpg"));

现在您可以直接绑定到该实例，只需将 Window（或应显示图像列表的任何位置）的 DataContext 设置为该实例：

DataContext = gallery;

请注意，上面 ItemsControl 或 ListBox 中的绑定声明是 {Binding Images}。如果你真的必须有一个属性Gallery（我假设它在MainWindow中）并像{Binding Gallery.Images}一样绑定你可以像这样设置DataContext：

DataContext = this;

Answer 2

所以我基本上在列表框上创建了一个加载事件并添加了这段代码

  private void list_of_images_Loaded_1(object sender, RoutedEventArgs e)
    {
        ListBox lst = (ListBox)sender;
        lst.ItemsSource = new_Classifieds_list[0].ImageUrls;
    }

将列表框的 itemssource 绑定到 imageurls 列表。因为我无法从代码隐藏中访问列表框，因为它位于全景图的项目模板中