Silverlight

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

И так начнем, технология на самом деле не сложная, но думаю в будущих версиях все- таки будут придуманы другие средства, но пока в текущей версии, есть один приемлемый вариант, который правда имеет свои недостатки.

Для начала нам понадобится создать несколько страниц, для этого правой клавишей кликаем по нашему проекту и использую “Add new Item” Добавляем несколько страниц. Не будем особо, что-то придумывать назовем их

Page1.xaml
Page2.xaml
Page3.xaml

На каждом из них создадим несколько контролов и кнопки для навигации, а контролы, чтобы визуально различать наши страницы. И так вот кода наших страниц.

Page1.xaml

<UserControl x:Class="MultiPage.Page1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <StackPanel x:Name="LayoutRoot" Background="White">
	  	<Ellipse Width="100" Height="100" Fill="AntiqueWhite"  />
		  <TextBlock Text="Page 1" Width="100" Height="100"  />
	  	<Button x:Name="Go" Content="Go" Width="100" Click="Go_Click" />
	  </StackPanel>
  </UserControl>

Page2.xaml

<UserControl x:Class="MultiPage.Page2"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <StackPanel x:Name="LayoutRoot" Background="White">
	  	<Rectangle Width="200" Height="100" Fill="Beige"  />
		  <TextBlock Text="Page 2" />
	  	<Button x:Name="Go" Content="Go" Width="100" Click="Go_Click" />
  </StackPanel>
  </UserControl>

Page3.xaml

<UserControl x:Class="MultiPage.Page3"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <StackPanel x:Name="LayoutRoot" Background="White">
		  <Rectangle Width="200" Height="100" Fill="Blue"  />
	  	<TextBlock Text="Page 3" />
	 	 <Button x:Name="Go" Content="Go" Width="100" Click="Go_Click" />
  </StackPanel>
  </UserControl>

На странице App.xaml можно указать один RootVisual элемент, который у нас будет виден, по умолчанию, у нас это будет первый созданный контрол, в нашем случае Page1.xaml. Все это можно увидеть открыв, App.xaml.cs.

Код С#

private void Application_Startup(object sender, StartupEventArgs e)
{
	this.RootVisual = new Page1();
}

Меняем его на следующий

private void Application_Startup(object sender, StartupEventArgs e)
{
	Grid root = new Grid(); //Создаем grid
	this.RootVisual = root; // Делаем его эелментов по умолчанию
	root.Children.Add(new Page1()); // Добавляем в коллекцию контролв Grid наш контрол
}

Чтобы изменить контрол по умолчанию, на просто надо его заменить. Но как сказано в справке SilverLight мы можем присваивать RootVisual, только однажды, как бы тогда в этом случае. Есть одна маленькая хитрость. Создать Layout Control, будем использовать Grid так, как он нам наиболее подходит. Назовем его root и добавим нашему Grid дочерним контролом

private void Application_Startup(object sender, StartupEventArgs e)
{
	Grid root = new Grid();
	Grid.children
	this.RootVisual = new MasterPage();
}

Теперь используя root, как контейнер можно добавлять и скрывать определенные страницы. Теперь добавим код для наших страниц, для обработчиков нажатие на копки мыши, они буду очень похожи.

Page1

public partial class Page1 : UserControl
{
	Grid root = App.Current.RootVisual as Grid; //Достаем ссылку на RootVisual
	public Page1()
	{
		InitializeComponent();
	}

	private void Go_Click(object sender, RoutedEventArgs e)
	{
		UserControl oldCtrl = this.root.Children[0] as UserControl; //Запоминаем предыдущий контрол
		this.root.Children.Add(new Page2()); // Добавляем новый контрол
		this.root.Children.Remove(oldCtrl); // Удаляем старый контрол
	}
}

Page2

public partial class Page2 : UserControl
{
	Grid root = App.Current.RootVisual as Grid; //Достаем ссылку на RootVisual
	public Page1()
	{
		InitializeComponent();
	}

	private void Go_Click(object sender, RoutedEventArgs e)
	{
		UserControl oldCtrl = this.root.Children[0] as UserControl; //Запоминаем предыдущий контрол
		this.root.Children.Add(new Page3()); // Добавляем новый контрол
		this.root.Children.Remove(oldCtrl); // Удаляем старый контрол
	}
}

Page3

public partial class Page3 : UserControl
{
	Grid root = App.Current.RootVisual as Grid; //Достаем ссылку на RootVisual
	public Page1()
	{
		InitializeComponent();
	}

	private void Go_Click(object sender, RoutedEventArgs e)
	{
		UserControl oldCtrl = this.root.Children[0] as UserControl; //Запоминаем предыдущий контрол
		this.root.Children.Add(new Page1()); // Добавляем новый контрол
		this.root.Children.Remove(oldCtrl); // Удаляем старый контрол
	}
}

Как видите, мы получаем ссылку на нашем RootVisual, которым является наш Grid (root). И у него меняем страницы так, как нам необходимо. Здесь можно найти свои реализации. Было конечно классно, если в будущих версиях, все таки, сделали бы нормальную поддержку базовых классов, а пока стоит довольствоваться либо хитростями, либо кривыми решениями.

Я здесь рассказал о простой навигации, если будет интересно вы можете, покопать, и более интересные варианты и предложить их здесь.

Popularity: 85%

Похожие статьи по SilverLight:

1. Custom Control
2. DataBinding (часть 2 – метод вынесения контрола)
3. Контролы – контейнеры
4. Обработка событий MouseLeftButtonDown и MouseLeftButtonUp у контрола – Slider
5. Анимация