XAML，将列表绑定到列表框答案

【问题标题】：XAML, Binding a list to a listboxXAML，将列表绑定到列表框
【发布时间】：2012-10-21 21:52:06
【问题描述】：

我正在制作一个 windows8app 商店应用程序。我花了很多时间来解决这个问题：

我有一个包含视频 uri 和缩略图 uri 的项目对象：

公开课视频 { 公共字符串 VideoUrl { 获取；放; } 公共 Uri ThumbnailUrl { 获取；放; } }

public class Project
{
    public List<Video> ProjectVideos { get; set; }

    public Project()
    {

        string projectVideosUrl = "http://ProjectStatus1-11-07.ism/manifest";
        string thumbnail = "https://ProjectStatus1.jpg?st=2013-07-11%3A34%3A37Z";
        Uri thumbnailUrl = new Uri(thumbnail);

       var video = new Video
        {
            VideoUrl = projectVideosUrl ,
            ThumbnailUrl = thumbnailUrl 
        };

        ProjectVideos = new List<Video>();
        ProjectVideos .Add(video);
        ProjectVideos .Add(video);

    }

我想将项目视频绑定到一个列表框，以便为项目视频列表中的每个项目制作带有按钮的缩略图图像。并通过点击按钮播放相关视频。

这是列表框：

<ListBox Name="list" Height="140" Margin="-2,-2,-5,-8" Background="#CC2B1717" ItemsSource="{Binding Project.ProjectVideos }">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"  />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>

                    <ListBox.ItemTemplate >
                            <DataTemplate>
                                <Border Name="stBorder" Width="120" Height="110" Background="#FFDC2D2D" CornerRadius="10" HorizontalAlignment="Center" VerticalAlignment="Center" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
                                    <Canvas  >
                                       <Image Name="test" >
                                             <Image.Source>
                                                <BitmapImage UriSource="{Binding  Path = Project.ProjectVideos .ThumbnailUrl}" />
                                             </Image.Source>
                                         </Image>

                                        <Button   Click="PlayVideo_Button_Click"   Height="30" Width="30" HorizontalAlignment="Center" Canvas.Top="44" Canvas.Left="44" >
                                            <Button.Template>
                                                <ControlTemplate>
                                                    <Image Source="ms-appx:///Assets/playbutton.png"/>
                                                </ControlTemplate>
                                            </Button.Template>
                                        </Button>
                                    </Canvas>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
</listbox>

当我运行代码时，我看到为每个项目制作了一个带有按钮的图像。但我没有看到图像缩略图。貌似图片元素与 ThumbnailUrl 的绑定不正确。

有谁知道如何将图像绑定到“ThumbnailUrl”？

这是后面的代码：

public Project ViewModel  { get; set; }     
protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
    {
        ViewModel = navigationParameter as Project;

        DataContext = ViewModel;
ViewModel.Page = this;
    }

【问题讨论】：

标签： xaml data-binding windows-runtime

【解决方案1】：

我只是看看出了什么问题：这是解决方案：

 <Image Name="test"  Width="120" Height="90" Canvas.Top="10" >
                                             <Image.Source>
                                                <BitmapImage UriSource="{Binding  ThumbnailUrl}" />
                                             </Image.Source>
                                         </Image>

【讨论】：