Developing a media player for Windows Phone 8

Question

I am to design a Media Player for Windows Phone 8. I read about using MediaLibrary (for using inbuilt player) and MediaElement ( for designing custom player).

I used MediaSource to get all files located on my phone storage using the following statements.

MediaSource media_local = MediaSource.GetAvailableMediaSources().First((source => source.MediaSourceType == MediaSourceType.LocalDevice));
using (MediaLibrary mediaLibrary = new MediaLibrary(media_local))
{
  SongCollection Songs = mediaLibrary.Songs;
  MediaPlayer.Play(mediaLibrary.Songs);
  List<Song> songslist = Songs.ToList();
  foreach (var item in songslist)
  {
    System.Diagnostics.Debug.WriteLine(item.Name);
  }
}

Next I need to design the playlist where i can show all the songs in the list songlist. I dont know what to desgn the playlist feature.

For eg. making a box which can display all the names in the playlist and how to go about displaying the Song name sequentially.

Answer 1

You could use a listbox for that...

this is the raw xaml declration

<ListBox x:Name="listBoxSong" FontSize="26">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" Width="150"/>
                <TextBlock Text="{Binding TrackNumber}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

now just bind your list to this listbox in code .

Like this:

listBoxSong.ItemSource=songslist;

This would generate a list kind of structure and also provides customization to a great extent.

Answer 2

Try this one.

Xaml

<phone:LongListSelector Name="llsPlaylist"
                        LayoutMode="List"
                        SelectionChanged="SelectSong_SelectionChanged">
     <phone:LongListSelector.ItemTemplate>
       <DataTemplate>
         <Grid>
           <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
           </Grid.ColumnDefinitions>
            <Grid Width="40"
                  Height="40"
                  Margin="0 5 5 0"
                  VerticalAlignment="Top"
                  HorizontalAlignment="Right">
                  <Ellipse  Stroke="White"
                    StrokeThickness="2" />
                  <Image Source="/Assets/Icons/play.png"
                         Height="30"
                         Width="30"
                         Margin="3 0 0 0"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Center" />
             </Grid>
             <StackPanel Grid.Column="1"
                         Margin="20 0 20 0">
               <TextBlock  Foreground="White"
                           FontSize="24"
                           TextWrapping="NoWrap"
                           Text="{Binding Name}" />
                <TextBlock  Foreground="Gray"
                            FontSize="18"
                            TextWrapping="NoWrap"
                            Text="{Binding Artist}" />
             </StackPanel>
             <TextBlock FontSize="16"
                        Foreground="White"
                        Grid.Column="2"
                        HorizontalAlignment="Right"
                        Padding="0 12 0 0"
                        TextWrapping="NoWrap"
                        Text="{Binding Duration}">
             </TextBlock>
        </Grid>
     </DataTemplate>
  </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

CS

llsPlaylist.ItemSource=songslist;