How to list AlbumArt from MediaLibrary on WP? - windows-phone

Question

I've been looking for a long time how to list album cover from Windows Phone Media Library, but I didn't found any answer.
I'm developping a music player for wp8, and actually I can successfully list album info as album name, artist name, duration, etc, but I can't get the AlbumArt.
Here is the code I'm actually using :
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="AlbumInfoTemplate">
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Image Source=" " Margin="5" Height="80" Width="80" Stretch="UniformToFill"/>
<StackPanel Grid.Column="1">
<TextBlock FontWeight="Normal" Text="{Binding Name}" Margin="10,0,0,0" FontSize="25" Foreground="Black"/>
<TextBlock FontWeight="Normal" Text="{Binding Artist}" Margin="10,0,0,0" FontSize="20" Foreground="Black" Opacity="0.75"/>
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<phone:LongListSelector
x:Name="llsAlbums"
SelectionChanged="llsAlbums_SelectionChanged"
Margin="0,-35,0,0"
JumpListStyle="{StaticResource JumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"
ItemTemplate="{StaticResource AlbumInfoTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"/>
Hope you could help me guys !

Answer 1

Before anything you need to do a small modification to the LongListSelector definition in XAML. Add this ItemsSource="{Binding}" to it. Then is should look like this.
<phone:LongListSelector
x:Name="llsAlbums"
SelectionChanged="llsAlbums_SelectionChanged"
Margin="0,-35,0,0"
JumpListStyle="{StaticResource JumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"
ItemTemplate="{StaticResource AlbumInfoTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"
ItemsSource="{Binding}"/>
Since you are using JumpLists and GroupHeaders in the LongListSelector, you need to to more work than usual. Start off with creating a class to hold the Album information. Lets call it MusicAlbum Its like this.
public class MusicAlbum
{
public string Name { get; set; }
public string Artist { get; set; }
public BitmapImage Art { get; set; }
}
Then create this class and methods included for the GroupHeaders and JumpLists to work.
public class AlphaKeyGroup<T> : List<T>
{
public delegate string GetKeyDelegate(T item);
public string Key { get; private set; }
public AlphaKeyGroup(string key)
{
Key = key;
}
private static List<AlphaKeyGroup<T>> CreateGroups(SortedLocaleGrouping slg)
{
List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>();
foreach (string key in slg.GroupDisplayNames)
{
list.Add(new AlphaKeyGroup<T>(key));
}
return list;
}
public static List<AlphaKeyGroup<T>> CreateGroups(IEnumerable<T> items, CultureInfo ci, GetKeyDelegate getKey, bool sort)
{
SortedLocaleGrouping slg = new SortedLocaleGrouping(ci);
List<AlphaKeyGroup<T>> list = CreateGroups(slg);
foreach (T item in items)
{
int index = 0;
index = slg.GetGroupIndex(getKey(item));
if (index >= 0 && index < list.Count)
{
list[index].Add(item);
}
}
if (sort)
{
foreach (AlphaKeyGroup<T> group in list)
{
group.Sort((c0, c1) => { return ci.CompareInfo.Compare(getKey(c0), getKey(c1)); });
}
}
return list;
}
}
Here i have written a small method to get the Album Art for the album, this makes it easy.
private BitmapImage GetAlbumArt(Album album)
{
BitmapImage img = new BitmapImage();
img.DecodePixelHeight = 80;
img.DecodePixelWidth = 80;
img.SetSource(album.GetAlbumArt());
return img;
}
Then this actual methods gets the list of albums from the MediaLibrary and makes a list of MusicAlbums we can use in the LLS
public List<MusicAlbum> GetAlbums()
{
if (lib == null)
lib = new MediaLibrary();
List<MusicAlbum> albumList = new List<MusicAlbum>();
var albums = lib.Albums;
foreach (var album in albums)
{
albumList.Add(new MusicAlbum()
{
Name = album.Name,
Artist = album.Artist.Name,
Art = album.HasArt ? GetAlbumArt(album) : null
});
}
return albumList;
}
After doing this, you need to make the list and set the ItemSource of the LongListSelector. In the Constructor of the page or in OnNavigatedTo method add this code.
List<AlphaKeyGroup<MusicAlbum>> albumList = AlphaKeyGroup<MusicAlbum>.CreateGroups(this.GetAlbums() as List<MusicAlbum>, Thread.CurrentThread.CurrentUICulture, (MusicAlbum s) => { return s.Name; }, true);
llsAlbums.ItemsSource = albumList;
Then you are done, run the app and you will see the albums listed..