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