Главная » Разработка для Windows Phone 7 » Вывод альбомов на экран

0

Когда приложение начинает выполнение, на экран выводится MainPage. XAML-файл включает объявления пространств имен XML для «controls» (чтобы обеспечить доступ к элементу управления Pivot) и «local» (для MusicPresenter). В коллекции Resources создается экземпляр MusicPresenter:

Проект Silverlight: MusicByComposer Файл: MainPage.xaml (фрагмент)

<phone:PhoneApplicationPage.Resources>

<local:MusicPresenter x:Key="musicPresenter" /> </phone:PhoneApplicationPage.Resources>

В дизайнере Visual Studio сообщит о том, что не может создать экземпляр MusicPresenter. Конечно же, не может, потому что для этого необходимо иметь доступ к музыкальной библиотеке телефона (или эмулятора телефона).

Практически все дерево визуальных элементов страницы – это элемент управления Pivot: Проект Silverlight: MusicByComposer Файл: MainPage.xaml (фрагмент)

<Grid x:Name="LayoutRoot" Background="Transparent"> <controls:Pivot Name="pivot"

Title="MUSIC BY COMPOSER"

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

<controls:Pivot.HeaderTemplate>

<!– Объекты типа ComposerInfo –> <DataTemplate>

<TextBlock Text="{Binding Composer}" /> </DataTemplate> </controls:Pivot.HeaderTemplate>

<controls:Pivot.ItemTemplate>

<!– Объекты типа ComposerInfo –> <DataTemplate>

<ListBox ItemsSource="{Binding Albums}"

SelectionChanged="OnListBoxSelectionChanged"> <ListBox.ItemTemplate>

<!– Объекты типа AlbumInfo — > <DataTemplate>

<Grid Background="Transparent"> <Grid.ColumnDefinitions>

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

<Border Grid.Column="0"

BorderBrush="{StaticResource

PhoneForegroundBrush}"

BorderThickness="1" Width="10 0" Height="10 0" 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>

XAML-файл подчеркивает мощь шаблонов и привязки данных. Как мы помним, Pivot наследуется от ItemsTemplate, так что у него есть свойство ItemsSource, которое можно связать с коллекцией посредством привязки данных:

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

Это означает, что Pivot заполняется коллекцией объектов типа ComposerInfo. Внутри себя Pivot будет формировать объект типа PivotInfo для каждого элемента ComposerInfo. Свойство Header каждого PivotItem должно быть связано посредством привязки данных со свойством Composer соответствующего объекта ComposerInfo. Но фактический объект PivotItem создается автоматически! Именно для этого Pivot определяет свойство HeaderTemplate:

<controls:Pivot.HeaderTemplate>

<!– Объекты типа ComposerInfo –> <DataTemplate>

<TextBlock Text="{Binding Composer}" /> </DataTemplate> </controls:Pivot.HeaderTemplate>

Не стоит беспокоиться о форматировании объекта TextBlock в этом шаблоне, он волшебным образом получает необходимое форматирование, вероятно, через наследование свойств.

Класс Pivot также определяет ItemTemplate. Это DataTemplate, используемый для формирования содержимого каждого PivotItem:

<controls:Pivot.ItemTemplate>

<!– Объекты типа ComposerInfo –> <DataTemplate>

<ListBox ItemsSource="{Binding Albums}"

SelectionChanged="OnListBoxSelectionChanged">

</ListBox> </DataTemplate> </controls:Pivot.ItemTemplate>

Этот DataTemplate состоит из ListBox со списком всех альбомов, ассоциированных с композитором, который представлен объектом PivotItem. Свойство ItemsSource этого ListBox связано посредством привязки данных со свойством Albums объекта ComposerInfo. Это означает, что ListBox заполняется коллекцией объектов типа AlbumInfo, т.е. DataTemplate объекта ListBox определяет, как будут отображаться эти элементы:

<ListBox.ItemTemplate>

<!– Объекты типа AlbumInfo –> <DataTemplate>

</DataTemplate> </ListBox.ItemTemplate>

Этот DataTemplate использует свойства ThumbnailArt, ShortAlbumName и Album объекта AlbumInfo.

Первые два снимка экрана приложения MusicByComposer, показанные ранее, являются исключительно продуктом файла MainPage.xaml и объектов данных, выполняющих роль источников привязки. Файлу выделенного кода для MainPage осталось лишь обработать формируемое ListBox событие SelectionChanged для перехода к AlbumPage.xaml:

Проект Silverlight: MusicByComposer Файл: MainPage.xaml.cs (фрагмент)

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);

// Создаем URI с двумя индексами и выполняем переход string destinationUri =

String.Format("/AlbumPage.xaml?ComposerInfoIndex={0}&AlbumInfoIndex={1}",

composerInfoIndex, albumInfoIndex);

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

}

}

Строка запроса состоит из двух индексов: индекс в коллекции Composers объекта MusicPresenter для обозначения текущего объекта ComposerInfo, и индекс свойства Albums объекта ComposerInfo, указывающий на выбранный AlbumInfo.

Код получает отображаемый в настоящий момент объект ComposerInfo через свойство SelectedItem элемента управления Pivot. Изначально я намеревался сохранять SelectedIndex элемента управления Pivot при захоронении, чтобы иметь возможность восстановить представление MainPage при возвращении к приложению. Однако у меня возникли проблемы с заданием SelectedIndex для вновь создаваемого элемента управления Pivot, поэтому пока я отказался от этой идеи, т.е. после захоронения данное приложение всегда возвращается к отображению альбомов Джона Адамса на MainPage.

Вызов метода Navigate создает экземпляр AlbumPage, который обеспечивает отображение альбома. AlbumPage – это обычный производный от PhoneApplicationPage с двумя обычными заголовками. (В качестве заголовка страницы используется имя композитора из кода.) Область содержимого XAML-файла предполагает, что значением DataContext объекта AlbumPage задан экземпляр AlbumInfo. (Это также определено в коде.) В первой строке сетки для содержимого располагается изображение обложки альбома, название альбома и исполнитель. Вторая строка – это ScrollViewer с ItemsControl для отображения песен:

Проект Silverlight: MusicByComposer Файл: AlbumPage.xaml (фрагмент)

<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="2 0 0" 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>

Обратите внимание, что значением свойства ItemsSource объекта ItemsControl, отображающего песни, задана коллекция Songs свойства Album объекта AlbumInfo. Это свойство Songs типа SongCollection. Оно включает объекты XNA-класса Song. Каждый объект Song этой коллекции является источником привязки для класса SongTitleControl (Элемент управления для названия песни), который мы рассмотрим чуть ниже.

AlbumPage.xaml также включает ApplicationBar для управления проигрывателем: Проект Silverlight: MusicByComposer Файл: AlbumPage.xaml (фрагмент)

<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>

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии