День #5. Навигация

Posted on Ноябрь 18, 2010

6


Всем привет!

Как я и обещал, сегодня мы поговорим о навигации в Windows Phone 7 приложениях. Навигация в  Silverlight программах базируется на XAML  файлах так же как и навигация в традиционном Вебе на файлах HTML. При правильной организации навигации, пользователь сможет проходить по вашему приложению назад с помощью аппаратной кнопки «Назад». Давайте с места в карьер. Создаем простое приложение в студии и пишем там:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Блог Антона Полховского" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Страница 1" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<p><Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Перейти на Вторую страницу и еще много-много-много-много-много слов" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="0 34" ManipulationStarted="TextBlock_ManipulationStarted"  />
</Grid>

Сразу говорю: ко мне обращались несколько человек с вопросами по навигации через Гиперссылки и говорили что у гиперссылок нет свойства TextWrapping потому я сделаю все в текстблоке  с «очень» длинным текстом 🙂

Мы у текст блока подписались на событие ManipulationStarted что бы поймать момент когда пользователь прикоснется к нему. Так же в файле с кодом мы переопределим это событие для всей страницы. Вот код из файла MainPage.xaml.cs:

using System;
using System.Windows.Input;
using System.Windows.Media;
using Microsoft.Phone.Controls;
namespace day_5_navigation
{
	public partial class MainPage : PhoneApplicationPage
	{
		Random rand = new Random();
		public MainPage()
		{
			InitializeComponent();
		}
		private void TextBlock_ManipulationStarted(object sender, ManipulationStartedEventArgs args)
		{
			this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
			args.Complete();
			args.Handled = true;
		}
		protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
		{
			ContentPanel.Background = new SolidColorBrush(
				Color.FromArgb(255, (byte)rand.Next(255),
				(byte)rand.Next(255),
				(byte)rand.Next(255)));
			base.OnManipulationStarted(args);
		}
	}
}

В методе TextBlock_ManipulationStarted мы выполняем навигацию на вторую страницу нашего приложения, а вот в переопределенном методе OnManipulationStarted мы меняем цвет фона приложения. Т.е. если пользователь нажмет на текстблок, то он перейдет на вторую страницу, если нет, то фон изменит свой цвет на случайный. Все это приводит нас ко второй странице. По сути, они идентичны, я решил даже не не изменять логику. Код ниже, привожу сразу код страницы SecondPage.xaml.cs, т.к. в Xaml отличается только текст:

using System;
using System.Windows.Input;
using System.Windows.Media;
using Microsoft.Phone.Controls;
namespace day_5_navigation
{
	public partial class SecondPage : PhoneApplicationPage
	{
		Random rand = new Random();
		public SecondPage()
		{
			InitializeComponent();
		}
		private void TextBlock_ManipulationStarted(object sender, ManipulationStartedEventArgs args)
		{
			this.NavigationService.GoBack();
			args.Complete();
			args.Handled = true;
		}
		protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
		{
			ContentPanel.Background = new SolidColorBrush(
				Color.FromArgb(255, (byte)rand.Next(255),
				(byte)rand.Next(255),
				(byte)rand.Next(255)));
			base.OnManipulationStarted(args);
		}
	}
}

Заметьте, тут мы использовали this.NavigationService.GoBack(); Это позволит нам перейти назад к той странице с которой мы осуществили навигацию к SecondPage.xaml

Запустим и немного потыкаем по приложению:

Это результат запуска приложения, сейчас нажмем не по тексту, и увидим, что цвет изменился

Теперь жмем на текст и переходим на вторую страницу нашего приложения.

Можем поменять цвет и нажать на текст. И Внимание мы вернемся на страницу такого же цвета, с которого мы уходили! Т.е. вернемся к

Это происходит потому что, мы написали this.NavigationService.GoBack(); Тоже самое произойдет если мы нажмем аппаратную кнопку «Назад». А вот если с первой страницы перейти снова на вторую, то мы получим страницу без изменений, т.к. она создалась после вызова перехода к ней.

Методы Navigate и GoBack являются двумя базовыми методами. Скорее всего у вас не будет необходимости использовать что-то другое. Помните, вы пишете для телефона, и тут нет необходимости в каких-либо сложных решениях без уведомления пользователя на какой странице он находится, как он сюда попал и как отсюда уйти назад.

Возможно самым необходимым будет использование таких «вторых» страниц в качестве диалоговых окон, когда вам необходима какая-то информация от пользователя, телефон переходит к другой странице и вводит информацию и возвращается на главную страницу. Немного позже мы подробнее рассмотрим этот случай.

День #6. Общие данные, передача данных в приложении.

Реклама