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>
