[Silverlight] Silverlight Multiple Page

 

작성날짜    : 2011-04-18

참고 사이트 :

http://www.silverlight.net/learn/videos/silverlight-videos/using-multiple-pages-part-1/

http://www.silverlight.net/learn/videos/silverlight-videos/using-multiple-pages-part-2/

Silverlight Multiple Pages

 

사용 목적

Silverlight 응용 프로그램에서는 XAML파일들이 서로 간에 직접 전환되는 기능을 제공하지 않기 때문에 다음과 같이 구현해야 사용이 가능하다.

 

App는 PageSwitcher를 가르키며 PageSwitcher는 각각의 전환할 페이지들의 부모이다.

 

 

예제 소스

 

PageSwitcher.xaml

Switcher 페이지는 다른 페이지를 감싸는 역할 즉 부모 역할을 한다.

해당 코드를 보면 빈 껍데기 인 것을 볼 수 있다.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"          mc:Ignorable="d" x:Class="MultiPagePhase1.PageSwitcher" d:DesignWidth="640" d:DesignHeight="480"> </UserControl>

 

Page.xaml

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MultiPagePhase1.Page" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White" > <StackPanel Height="Auto" HorizontalAlignment="Stretch"  Margin="20,20,20,20" VerticalAlignment="Stretch" Width="Auto" Orientation="Horizontal">          <TextBlock x:Name="Page1" FontFamily="Verdana" FontSize="36"  Text="Page 1" TextWrapping="Wrap" HorizontalAlignment="Center"  VerticalAlignment="Center" Margin="150,0,0,0"/>          <Button Height="40" Width="150" Content="Switch" x:Name="Switch" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25,0,0,0" FontFamily="Verdana" FontSize="36"/> </StackPanel> </Grid>  </UserControl>

Margin=" " 은 해당 출력물이 표시될 좌표이며, x:Name=" Switch "은 해당 버튼의 이름이다.

 

PageSwitcher.xaml.cs

생성자의 초기화 구문 뒤에 Content를 첫 번째 Page 인스턴스로 지정한다. 여기서 Content는 해당 페이지에 자식 요소들을 보관하는 컨테이너라 할 수 있다.

UserControl을 입력 매개변수로 하는 메소드를 만들고 Navigate 메소드에서는 Content를 입력 매개 변수로 받은 UserControl 페이지로 지정한 구문을 추가한다.

public Switcher() {       InitializeComponent();       this.Content = new Page(); } public void Navigate(UserControl nextpage) {       this.Content = nextpage; }

이 메소드는 다른 UserControl 페이지에서 버튼을 클릭할 시에 호출할 메소드이다.

 

Page.xaml.cs

첫 페이지의 Button의 Click EventHandler를 설정하고 해당 Handler를 편집한다. 그리고 두 번째 Page 인스턴스를 생성하여 부모 페이지 컨트롤(PageSwitcher)의 Navigate 메소드의 인자로 넘기도록 한다.

public Page() {       InitializeComponent();       Switch.Click += new RoutedEventHandler(Switch_Click); } void Switch_Click (object sender, RoutedEventArgs e) {       PageSwitcher ps = this.Parent as PageSwitcher;       ps.Navigate(new Page2 ()); }

 

Page2.xaml.xs

두 번째 페이지의 Button의 Click EventHandler를 설정하고 해당 Handler를 편집하고, 첫 번째 Page 인스턴스를 생성하여 부모 페이지 컨트롤(PageSwitcher)의 Navigate 메소드의 인자로 넘기도록 한다.

public Page2() { InitializeComponent(); Switch.Click += new RoutedEventHandler(Switch_Click); } void Switch_Click(object sender, RoutedEventArgs e) { PageSwitcher ps = this.Parent as PageSwitcher; ps.Navigate(new Page()); }

 

App.xaml.cs

Startup메소드에 초기 RootVisual Property에 Switcher 인스턴스로 지정한다.

PageSwitcher는 다른 두 개의 페이지 중 한 개의 페이지를 자식 요소로 갖게 되며, 해당 페이지에서는 클릭을 하면 다른 페이지로 변경할 수 있게 PageSwitcher의 Navigate 메소드를 호출한다.

private void [안내]태그제한으로등록되지않습니다-xxOnStartup(object sender, StartupEventArgs e) { this.RootVisual = new PageSwitcher(); }

 

실행 결과

 

 

Switch 버튼을 눌르면 페이지가 전환된다.