xaml – 如何绑定到图像列表

发布时间：2020-12-13 20:37:08 所属栏目：Windows 来源：网络整理

导读：我已将代码更改为：风景： phone:Panorama.ItemTemplate DataTemplate ScrollViewer Width="800" HorizontalContentAlignment="Left" Margin="0,50,0" Grid Grid.RowDefinitions RowDefinition Height="Auto" / RowDefinition Height="Auto" / RowDefinitio

我已将代码更改为：

风景：

<phone:Panorama.ItemTemplate>
            <DataTemplate>
                <ScrollViewer Width="800" HorizontalContentAlignment="Left" Margin="0,50,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"
                                   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"
                                   Foreground="Black" />

                        <TextBlock Text="{Binding Body}" 
                                   Grid.Row="3" 
                                   TextWrapping="Wrap"
                                   Foreground="Black"
                                   Margin="50,5,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个图像,它完美地工作)

根据您是只想显示图像列表还是希望能够选择它们,您可以选择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作为容器类型.由于存在从字符串到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:UsersPublicPicturesSample Pictures","*.jpg"));

现在,您可以通过简单地将Window的DataContext(或应该显示图像列表的位置)设置为此实例来直接绑定到该实例：

DataContext = gallery;

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

DataContext = this;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!