XAML, Binding a list to a listbox

Question

I am making a windows8app store apps. I've spent lots of hours with this problem:

I have a Project object that has videos uri and the thumbnail uri:

public class Video { public string VideoUrl { get; set; } public Uri ThumbnailUrl { get; set; } }

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

    }

I want to bind the project videos to a Listbox in such a way that for each item in the list of project videos, the image of thumbnail with a button over it to be made. And by clicking the button the related video to be played.

this is the listbox:

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

When I run the code,I see that for each item an image with the button over it is made. But I dont see the image thumbnail. It seems that the binding of image element with ThumbnailUrl is not correct.

Does anyone know how I can bind the image to the "ThumbnailUrl "?

This is the code behind:

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

        DataContext = ViewModel;
ViewModel.Page = this;
    }

wingman55 wingman55 · Accepted Answer · 2012-11-01T10:20:24

i Just see what was wrong: This is the solution:

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

XAML, Binding a list to a listbox

1 Answers