Поделиться через

  • Статья
Немного о панораме. Программный контроль

Привет всем.

Это уже 10 пост в цикле Windows Phone 7 для начинающих. Мы с вами поговорили довольно о многих вещах, но все же осталось еще больше. Сегодня мы немного поговорим о контроле Панорама.

Я наблюдал за развитием платформы еще с первого анонса и был просто невероятно рад, когда увидел эту штуку.  Вся прелесть состоит в том, что у нас есть страница, которая продолжается вправо и влево на несколько экранов.

Пару дней назад мне понадобилось создать приложение, использующее панораму. Сделав интерфейс, я впал в замешательство: А как же мне программно менять  контент на страницах? Немного погуглив, я бросил эту затею и решил разобраться сам. Для начала, давайте посмотрим из чего же все-таки состоит панорама. Хорошая картинка есть на сайте проекта, вот она:

итак, у нас есть набор объектов типа PanoramaControlItem, которые содержат в себе контент. Задача: в зависимости от того что мы выбираем на первой странице, изменить контент на второй и перейти к нему. У Объекта панорама есть несколько интересных свойств:

  • DefaultItem(по сути это тот item который на покажет Panorama)
  • HeaderTemplate
  • Header
  • SelectedIndex( Можно только получить значение. задать нельзя...)
  • SelectedItem (Можно только получить значение. задать нельзя...)
  • Title
  • TitleTemplate

А ключевым событием является SelectionChanged.

Давайте создадим простое приложение. Добавим в него Panorama нажав правой кнопкой на проекте и выбрав Add->New Item...

Выбираем Windows Phone Panorama Page и жмем Add. Что бы сделать ее стартовой, необходимо перейти в WMAppManifest.xml и в строке

<DefaultTask Name="_default" NavigationPage="PanoramaPage.xaml" />

Указать свое имя страницы в NavigationPage.

Теперь добавим немного контента на страницу. Вот вырезка из PanoramaPage.xaml:

<controls:Panorama x:Name="Pan" Title="Блог Антона Полховского" SelectionChanged="Panorama_SelectionChanged" >
            <!--Panorama item one-->
            <controls:PanoramaItem x:Name="FirstItem" Header="Выбираем" >
                <ListBox x:Name="NumberToDisplay" SelectionChanged="NumberToDisplay_SelectionChanged">
                    <ListBoxItem Padding="30 30 30 30" Content="1"></ListBoxItem>
                    <ListBoxItem Padding="30 30 30 30" Content="2"></ListBoxItem>
                    <ListBoxItem Padding="30 30 30 30" Content="3"></ListBoxItem>
                    <ListBoxItem Padding="30 30 30 30" Content="4"></ListBoxItem>
                    <ListBoxItem Padding="30 30 30 30" Content="5"></ListBoxItem>
                </ListBox>
            </controls:PanoramaItem>
            <!--Panorama item two-->
            <controls:PanoramaItem x:Name="SecondItem" Padding="40 0 0 0" Header="Результаты">
                <ListBox x:Name="Results">
                 </ListBox>
            </controls:PanoramaItem>
        </controls:Panorama>

Заметьте, я явно указал имя для PanoramaItem, хотя доступ к ним можно осуществлять и при помощи коллекции PanoramaControls.Items, просто зная индекс нужного PanoramaItem. Для того что бы зафиксировать переход между элементами панорамы, нам необходимо подписаться на событие SelectionChanged

Pan.SelectionChanged += new EventHandler<SelectionChangedEventArgs>(Panorama_SelectionChanged);

А теперь, собственно, смотрим на код:

private void Panorama_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            if (e.RemovedItems.Contains(SecondItem))
            {
                NumberToDisplay.SelectedIndex = -1;
            }

        }

        private void NumberToDisplay_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (NumberToDisplay.SelectedIndex > -1)
            {
                Results.Items.Add(((ListBoxItem)NumberToDisplay.SelectedItem).Content);
                Pan.DefaultItem = SecondItem;

            }
        }

Метод NumberToDisplay_SelectionChanged позволяет нам отслеживать по какому из элементов списка мы нажали и записывать текст этого элемента во второй список. Pan.DefaultItem = SecondItem; позволит нам подставить вторую страничку после выбора элемента на первой.

Метод Panorama_SelectionChanged: В аргументах есть хорошее свойство RemovedItems(По аналогии есть и AddedItems), в котором хранится объект(тут PanoramaItem) с которого мы перешли к текущему PanoramaItem. Мы воспользуемся этим для того, что бы снять выделение со списка при переходе назад к первой странице.