День #10. Немного о панораме. Программный контроль

Posted on Ноябрь 28, 2010

2


Привет всем.
Это уже 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. Мы воспользуемся этим для того, что бы снять выделение со списка при переходе назад к первой странице.

Реклама