XAML,将列表绑定到列表框

时间:2012-11-01 10:12:31

标签: xaml data-binding windows-runtime

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

我有一个Project对象,其中包含视频uri和缩略图uri:

公共课视频     {         public string VideoUrl {get;组; }         public Uri ThumbnailUrl {get;组; }     }

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;
    }

1 个答案:

答案 0 :(得分:0)

我只是看错了什么: 这是解决方案:

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