Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Programming Windows Phone 7 : Pivot and Panorama - Displaying the Albums

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
5/29/2011 11:37:53 AM
When the program starts up, MainPage is displayed. The XAML file contains XML namespace declarations for “controls” (to access the Pivot control) and “local” (for MusicPresenter). The Resources collection instantiates MusicPresenter:
Example 1. Silverlight Project: MusicByComposer File: MainPage.xaml (excerpt)
<phone:PhoneApplicationPage.Resources>
<local:MusicPresenter x:Key="musicPresenter" />
</phone:PhoneApplicationPage.Resources>

In the design view, Visual Studio will complain that it can’t create an instance of MusicPresenter, and of course it can’t because it would need access to the phone’s (or the phone emulator’s) music library.

Almost the entire visual tree of the page is a Pivot control:

Example 2. Silverlight Project: MusicByComposer File: MainPage.xaml (excerpt)
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Pivot Name="pivot"
Title="MUSIC BY COMPOSER"
ItemsSource="{Binding Source={StaticResource musicPresenter},
Path=Composers}">
<controls:Pivot.HeaderTemplate>
<!-- Objects of type ComposerInfo -->
<DataTemplate>
<TextBlock Text="{Binding Composer}" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>

<controls:Pivot.ItemTemplate>
<!-- Objects of type ComposerInfo -->
<DataTemplate>
<ListBox ItemsSource="{Binding Albums}"
SelectionChanged="OnListBoxSelectionChanged">
<ListBox.ItemTemplate>
<!-- Objects of type AlbumInfo -->
<DataTemplate>
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Border Grid.Column="0"
BorderBrush="{StaticResource
PhoneForegroundBrush}"
BorderThickness="1"
Width="100" Height="100"
Margin="0 2 6 2">
<Image Source="{Binding ThumbnailArt}" />
</Border>

<StackPanel Grid.Column="1"
VerticalAlignment="Center">
<TextBlock
Text="{Binding ShortAlbumName}"
Foreground="{StaticResource
PhoneAccentBrush}"
TextWrapping="Wrap" />
<TextBlock Text="{Binding Album.Artist.Name}"
TextWrapping="Wrap" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
</Grid>


This XAML file really shows off the power of templates and data binding. Remember that Pivot derives from ItemsTemplate, so it has an ItemsSource property that you can bind to a collection:

ItemsSource="{Binding Source={StaticResource musicPresenter},
Path=Composers}"

This means that the Pivot is filled with a collection of objects of type ComposerInfo. Internally, Pivot will generate objects of type PivotInfo, one for each ComposerInfo item. The Header property of each PivotItem needs to be bound to the Composer property of the corresponding ComposerInfo object. But the actual PivotItem object is being created behind the scenes! It is for this reason that Pivot defines a HeaderTemplate property:

<controls:Pivot.HeaderTemplate>
<!-- Objects of type ComposerInfo -->
<DataTemplate>
<TextBlock Text="{Binding Composer}" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>

Don’t worry about the formatting of the TextBlock object in this template: It magically gets the proper formatting, probably through property inheritance.

The Pivot class also defines an ItemTemplate. This is a DataTemplate that is used to generate the content of each PivotItem:

<controls:Pivot.ItemTemplate>
<!-- Objects of type ComposerInfo -->
<DataTemplate>
<ListBox ItemsSource="{Binding Albums}"
SelectionChanged="OnListBoxSelectionChanged">
. . .
</ListBox>
</DataTemplate>
</controls:Pivot.ItemTemplate>

This DataTemplate consists of a ListBox that lists all the albums associated with the composer represented by the PivotItem. The ItemsSource property of the ListBox is bound to the Albums property of the ComposerInfo object. This means that the ListBox is filled with a collection of objects of type AlbumInfo, which means the DataTemplate of the ListBox defines how each of those items is displayed:

<ListBox.ItemTemplate>
<!-- Objects of type AlbumInfo -->
<DataTemplate>
. . .
</DataTemplate>
</ListBox.ItemTemplate>

This DataTemplate references the ThumbnailArt, ShortAlbumName, and Album properties of AlbumInfo.

The first of the two screen shots of MusicByComposer shown earlier is entirely the result of the MainPage.xaml file and the data objects functioning as binding sources.

The code-behind file for MainPage is left with little to do except process the SelectionChanged event from the ListBox to navigate to AlbumPage.xaml:

Example 3. Silverlight Project: MusicByComposer File: MainPage.xaml.cs (excerpt)
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}

void OnListBoxSelectionChanged(object sender, SelectionChangedEventArgs args)
{
ComposerInfo composerInfo = pivot.SelectedItem as ComposerInfo;
int composerInfoIndex = MusicPresenter.Current.Composers.IndexOf(composerInfo);

AlbumInfo albumInfo = (sender as ListBox).SelectedItem as AlbumInfo;
int albumInfoIndex = composerInfo.Albums.IndexOf(albumInfo);

// Construct URI with two indices and navigate
string destinationUri =
String.Format("/AlbumPage.xaml?ComposerInfoIndex={0}&AlbumInfoInd
ex={1}",
composerInfoIndex, albumInfoIndex);

this.NavigationService.Navigate(new Uri(destinationUri, UriKind.Relative));
}
}


The query string consists of two indices: an index into the Composers collection of MusicPresenter to indicate the current ComposerInfo object, and an index into the Albums property of the ComposerInfo object to reference the selected AlbumInfo.

The code obtains the current ComposerInfo object being displayed through the SelectedItem property of the Pivot control. It was my original intention to save the SelectedIndex of the Pivot control during tombstoning so I could restore the MainPage display on reactivation. However, I experienced problems setting SelectedIndex on a newly created Pivot control, so I decided to abandon that amenity for now. This means that if the program is tombstoned, the MainPage always goes back to displaying the albums of John Adams.

The Navigate call instantiates an AlbumPage instance, which displays an album. AlbumPage is a normal PhoneApplicationPage derivative, with the normal two titles. (The page title is set to the composer’s name from code.) The content area of the XAML file assumes that the DataContext of AlbumPage is set to an instance of AlbumInfo. (This is also set in code.) The first row of the content grid is the album art, album name, and artist. The second row is a ScrollViewer with an ItemsControl to display the songs:

Example 4. Silverlight Project: MusicByComposer File: AlbumPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Border Grid.Row="0" Grid.Column="0"
BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="1"
Height="200" Width="200"
Margin="0 0 6 0">

<Image Source="{Binding AlbumArt}" />

</Border>

<StackPanel Grid.Row="0" Grid.Column="1"
VerticalAlignment="Center">

<TextBlock Text="{Binding Album.Name}"
Foreground="{StaticResource PhoneAccentBrush}"
TextWrapping="Wrap" />

<TextBlock Text=" " />

<TextBlock Text="{Binding Album.Artist}"
TextWrapping="Wrap" />
</StackPanel>

<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<ItemsControl ItemsSource="{Binding Album.Songs}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:SongTitleControl Song="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>


Notice that the ItemsControl that displays the songs has its ItemsSource property set to the Songs collection of the Album property of AlbumInfo. This SongsSongCollection and contains objects of the XNA class Song. Each Song object in that collection is the source of a binding to the SongTitleControl property is of type class that I’ll show you soon.

AlbumPage.xaml also has an ApplicationBar for controlling the music player:

Example 5. Silverlight Project: MusicByComposer File: AlbumPage.xaml (excerpt)
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.rew.rest.
png"
Text="previous"
Click="OnAppbarPreviousButtonClick" />

<shell:ApplicationBarIconButton x:Name="appbarPlayPauseButton"
IconUri="/Images/appbar.transport.play.rest.
png"
Text="play"
Click="OnAppbarPlayButtonClick" />

<shell:ApplicationBarIconButton IconUri="/Images/appbar.transport.ff.rest.png"
Text="next"
Click="OnAppbarNextButtonClick" />
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Other -----------------
- Programming Windows Phone 7 : Pivot and Panorama - The XNA Music Classes: MediaLibrary
- Programming Windows Phone 7 : Pivot and Panorama - The XNA Connection
- Programming Windows Phone 7 : Pivot and Panorama - Music by Composer
- Programming Windows Phone 7 : Pivot and Panorama - Compare and Contrast
- Programming Windows Phone 7 : Elements and Properties - Modes of Opacity
- Programming Windows Phone 7 : Elements and Properties - Non-Tiled Tile Brushes & Playing Movies
- Programming Windows Phone 7 : Items Controls - A Card File Metaphor
- Programming Windows Phone 7 : Items Controls - The DataTemplate Bar Chart
- Programming Windows Phone 7 : Items Controls - Changing the Panel
- Programming Windows Phone 7 : Items Controls - Sorting
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer