1.只有切換頁面
2.加上頁面傳值的功能
第一部份:切換頁面
同樣的先建立一個新的Silverlight專案
分別建立兩個User Control,並且名命為PageSwitcher、Page2
建立完成的結果
接著修改PageSwitcher.xaml.cs
public partial class PageSwitcher : UserControl
{
public PageSwitcher()
{
InitializeComponent();
//將一開始頁面指定為page UI
this.Content = new Page();
}
//這裡是處理切換到下一頁的方法
public void Navigate(UserControl nextPage)
this.Content = nextPage;
}
}
然後現在要做第一頁設計頁的部分(Page.xaml)
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
Width ="400" Height ="300" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< StackPanel VerticalAlignment ="Center" >
< TextBlock FontSize ="50" Text ="這是第一頁" HorizontalAlignment ="Center" />
< Button x:Name ="GotoPage2" FontSize ="30" Width ="300" Content ="我想去第二頁" > </ Button >
</ StackPanel >
</ Grid >
</ UserControl >
而Page.xaml.cs程式碼如下
{
public Page()
{
InitializeComponent();
GotoPage2.Click += new RoutedEventHandler(GotoPage2_Click);
}
//當按下"我想去第二頁"
void GotoPage2_Click(object sender, RoutedEventArgs e)
{
//建立樹狀結構中的父物件
PageSwitcher ps = this.Parent as PageSwitcher;
//將UI置換成Page2
ps.Navigate(new Page2());
}
}
然後是第二頁Page2的部份,基本上跟第一頁是一樣的
Page2.xaml
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
Width ="400" Height ="300" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< StackPanel VerticalAlignment ="Center" >
< TextBlock FontSize ="50" Text ="這是第二頁" HorizontalAlignment ="Center" />
< Button x:Name ="GotoPage1" FontSize ="30" Width ="300" Content ="我要回第一頁" > </ Button >
</ StackPanel >
</ Grid >
</ UserControl >
Page2.xaml.cs
{
public Page2()
{
InitializeComponent();
GotoPage1.Click += new RoutedEventHandler(GotoPage1_Click);
}
//按下按鈕回第一頁
void GotoPage1_Click(object sender, RoutedEventArgs e)
{
PageSwitcher ps = this.Parent as PageSwitcher;
ps.Navigate(new Page());
}
}
最後把App.xaml.cs修改一下
{
this .Startup += this .Application_Startup;
this .Exit += this .Application_Exit;
this .UnhandledException += this .Application_UnhandledException;
InitializeComponent();
}
private void Application_Startup( object sender, StartupEventArgs e)
{
//只有修改這一段,主要應用程式UI改為PageSwitcher
this .RootVisual = new PageSwitcher();
}
private void Application_Exit( object sender, EventArgs e)
{
}
這樣第一階段就完成了
第二部份:加入頁面傳值功能
雖然上面已做完換頁動作,但很多情況必須傳遞參數才能達到你要的目的,但是相對來說就比較麻煩一點了
建立一個新的Class,命名為Switcher.cs、ISwitchable.cs
Switcher.cs
{
public static PageSwitcher pageSwitcher;
//只要切換頁面但不傳值
public static void Switch(UserControl newPage)
{
pageSwitcher.Navigate(newPage);
}
//切換頁面並且傳值
public static void Switch(UserControl newPage, object state)
{
pageSwitcher.Navigate(newPage, state);
}
}
ISwitchable.cs :這主要是要建立一個interface來共用並且傳值
在 namespace 裡有這段code就可以
{
void UtilizeState(object state);
}
再修改PageSwitcher.xml.cs
{
public PageSwitcher()
{
InitializeComponent();
}
//這裡是處理切換到下一頁的方法
public void Navigate(UserControl nextPage)
{
this.Content = nextPage;
}
//這是有傳值的
public void Navigate(UserControl nextPage, object state)
{
this.Content = nextPage;
//借由ISwitchable傳值
ISwitchable s = nextPage as ISwitchable;
s.UtilizeState(state);
}
}
回去改第一頁的版面Page.xaml
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
Width ="400" Height ="300" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< StackPanel VerticalAlignment ="Center" >
< TextBlock FontSize ="50" Text ="這是第一頁" HorizontalAlignment ="Center" />
< TextBlock FontSize ="30" Text ="你的名字:" Foreground ="Blue" HorizontalAlignment ="Center" />
< TextBox FontSize ="30" Width ="300" x:Name ="YourName" > </ TextBox >
< Button x:Name ="GotoPage2" Margin ="20" FontSize ="30" Width ="300" Content ="我想去第二頁" > </ Button >
</ StackPanel >
</ Grid >
</ UserControl >
Page.xaml.cs
{
public Page()
{
InitializeComponent();
GotoPage2.Click += new RoutedEventHandler(GotoPage2_Click);
}
//當按下"我想去第二頁"
void GotoPage2_Click(object sender, RoutedEventArgs e)
{
Switcher.Switch(new Page2(), YourName.Text);//這裡會加上要傳的值
}
}
第二頁的版面Page2.xaml
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
Width ="400" Height ="300" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< StackPanel VerticalAlignment ="Center" >
< TextBlock FontSize ="50" Text ="這是第二頁" HorizontalAlignment ="Center" />
< TextBlock FontSize ="30" Text ="我的名字是:" Foreground ="Red" HorizontalAlignment ="Center" />
< TextBlock FontSize ="30" x:Name ="MyName" Foreground ="Blue" HorizontalAlignment ="Center" />
< Button x:Name ="GotoPage1" Margin ="20" FontSize ="30" Width ="300" Content ="我要回第一頁" > </ Button >
</ StackPanel >
</ Grid >
</ UserControl >
Page2.xaml.cs
{
public Page2()
{
InitializeComponent();
GotoPage1.Click += new RoutedEventHandler(GotoPage1_Click);
}
//按下按鈕回第一頁
void GotoPage1_Click(object sender, RoutedEventArgs e)
{
Switcher.Switch(new Page());
}
//這一段很重要,在繼承interface時要再實做出來
public void UtilizeState(object state)
{
MyName.Text = state as string;
}
}
最後也是去修改
App.xaml.cs
{
this .Startup += this .Application_Startup;
this .Exit += this .Application_Exit;
this .UnhandledException += this .Application_UnhandledException;
InitializeComponent();
}
private void Application_Startup( object sender, StartupEventArgs e)
{
PageSwitcher pageSwitcher = new PageSwitcher();
//主要應用程式UI為PageSwitcher
this .RootVisual = pageSwitcher;
//把PageSwitcher傳給Switcher,並交由它切換頁面
Switcher.pageSwitcher = pageSwitcher;
Switcher.Switch(new Page());
}
private void Application_Exit( object sender, EventArgs e)
{
}
可以把PageSwitcher.xaml.cs再修改以方便除錯
{
this .Content = nextPage;
//借由ISwitchable傳值
ISwitchable s = nextPage as ISwitchable;
if (s != null )
{
s.UtilizeState(state);
}
else
{
throw new ArgumentException("不具有傳遞值的頁面"
+ nextPage.Name.ToString());
}
}
copyright http://www.dotblogs.com.tw/liuznsn/archive/2008/12/06/6276.aspx