How to bind Images in a LongListItem with MediaLibrary pictures(System.IO.Stream)

Question

I am trying to modify the PhotoHub Sample given here by microsoft. but the images are binded to images that are already in the project instead i want medialibrary pictures.

XAML PhoneApplicationPage.Resources

<phone:PhoneApplicationPage.Resources>

    <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
    <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>

    <Style x:Key="JumpListStyle" TargetType="phone:LongListSelector">
        <Setter Property="LayoutMode" Value="List" />
        <Setter Property="Margin" Value="12,12,0,0"/>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" 
                            Width="470" 
                            Height="70" 
                            Margin="6">
                        <TextBlock Text="{Binding Key}"
                                   Foreground="{Binding Converter={StaticResource ForegroundConverter}}"                                       
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                   FontSize="28"  
                                   Padding="2"
                                   VerticalAlignment="Bottom"/>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate x:Key="GroupHeader">
        <Border Background="Transparent">
            <Border Background="Transparent" BorderBrush="Transparent" BorderThickness="1"  
                    Width="400" Height="90"                  
                    HorizontalAlignment="Left">
                <TextBlock Text="{Binding Key}" 
                           Foreground="{StaticResource PhoneAccentBrush}" 
                           FontSize="28"
                           Padding="2"                                
                           FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Center"/>
            </Border>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="ItemTemplate">
        <StackPanel Height="108" Width="108" Margin="6,6">
            <Image Width="108" Height="108" Stretch="UniformToFill">
                <Image.Source>
                    <BitmapImage UriSource="{Binding ImageSource}" CreateOptions="BackgroundCreation"/>
                </Image.Source>
            </Image>
        </StackPanel>
    </DataTemplate>

</phone:PhoneApplicationPage.Resources>

XAML

<Grid x:Name="LayoutRoot" Background="Transparent"
       d:DataContext="{d:DesignInstance Type=ViewModels:PhotosViewModel, IsDesignTimeCreatable=true}">

    <phone:Pivot Title="PHOTOS" Name="pivot" Margin="-3, 0, 0, 0" >

        <phone:PivotItem Header="date">
            <phone:LongListSelector Name="PhotoHubLLS" Margin="13,-30,0,0"                                        
                                    ItemsSource="{Binding GroupedPhotos}"
                                    ItemTemplate="{StaticResource ItemTemplate}"                     
                                    GroupHeaderTemplate="{StaticResource GroupHeader}"
                                    JumpListStyle="{StaticResource JumpListStyle}"
                                    IsGroupingEnabled="True"
                                    LayoutMode="Grid" 
                                    GridCellSize="108,108"/>
        </phone:PivotItem>

        <phone:PivotItem Header="albums"/>
    </phone:Pivot>
</Grid>

Code for ViewModel

public class PhotosViewModel
    {


    public ObservableCollection<KeyedList<string, Photo>> GroupedPhotos
        {
          get
          {
            var photos = DataService.GetPhotos();

            var groupedPhotos =
                from photo in photos
                orderby photo.TimeStamp
                group photo by photo.TimeStamp.ToString("y") into photosByMonth
                select new KeyedList<string, Photo>(photosByMonth);

            return new ObservableCollection<KeyedList<string, Photo>>(groupedPhotos);
          }
       }
    }

Code for DataService

public static class DataService
{
    public static ObservableCollection<Photo> GetPhotos()
    {
        ObservableCollection<Photo> imageList = new ObservableCollection<Photo>();
        var ml = new MediaLibrary();
        var Pictures = ml.Pictures;
        foreach (var item in Pictures)
        {

            Photo imageData = new Photo()
            {
                ImageSource = PictureDecoder.DecodeJpeg(item.GetImage()),
                Title = item.Name,
                TimeStamp = item.Date
            };
            imageList.Add(imageData);
        }
        return imageList;
    }
}

Code for Model

public class Photo
    {
        public string Title { get; set; }
        public WriteableBitmap ImageSource { get; set; }
        public DateTime TimeStamp { get; set; }
    }

Answer 1

Found the solution

       <DataTemplate x:Key="ItemTemplate">
            <StackPanel Height="108" Width="108" Margin="6,6">
                <Image Width="108" Height="108" Stretch="UniformToFill" Source="{Binding ImageSource}">

                </Image>
            </StackPanel>
        </DataTemplate>