silverlight 窗体切换 与 窗体之间传值 的实现

简介: 1.只有切換頁面 2.加上頁面傳值的功能 第一部份:切換頁面 同樣的先建立一個新的Silverlight專案 分別建立兩個User Control,並且名命為PageSwitcher、Page2   建立完成的結果 接著修改PageSwitcher.

1.只有切換頁面

2.加上頁面傳值的功能

第一部份:切換頁面

同樣的先建立一個新的Silverlight專案

image

分別建立兩個User Control,並且名命為PageSwitcher、Page2

image 

建立完成的結果

image

接著修改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)

image 

< UserControl  x:Class ="SilverlightApplication2.Page"
     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  partial  class  Page : UserControl
     {
        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的部份,基本上跟第一頁是一樣的

image

Page2.xaml

< UserControl  x:Class ="SilverlightApplication2.Page2"
     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  partial  class  Page2 : UserControl
     {
        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修改一下

  public  App()
         {
            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

image

Switcher.cs

public  static  class  Switcher
     {
        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就可以

     public  interface  ISwitchable
     {
        void 
UtilizeState(object  state);
    }

再修改PageSwitcher.xml.cs

public  partial  class  PageSwitcher : UserControl
     {
        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

image 

< UserControl  x:Class ="SilverlightApplication2.Page"
     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  partial  class  Page : UserControl
     {
        public 
Page()
        {
            InitializeComponent();
            GotoPage2.Click += new RoutedEventHandler(GotoPage2_Click);
        }
       //當按下"我想去第二頁"
        void 
GotoPage2_Click(object  sender, RoutedEventArgs e)
        {
            
            Switcher.Switch(new Page2(), YourName.Text);//這裡會加上要傳的值
        }
    }

第二頁的版面Page2.xaml

image 

< UserControl  x:Class ="SilverlightApplication2.Page2"
     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  partial  class  Page2 : UserControl, ISwitchable  //要記得加上interface 才能繼承
     {
        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

public  App()
         {
            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再修改以方便除錯

public  void  Navigate(UserControl nextPage,  object  state)
         {
          
            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 

目录
相关文章
|
监控 前端开发 API
ArcGIS API for Silverlight 点击地图弹出自定义窗体
在之前的博客中,关于弹出窗体,样式比较单一,不能满足自定义各种样式,源连接地址:http://blog.
562 0
silverlight 窗体切换 与 窗体之间传值的实现
1.只有切換頁面 2.加上頁面傳值的功能 第一部份:切換頁面 同樣的先建立一個新的Silverlight專案 分別建立兩個User Control,並且名命為PageSwitcher、Page2   建立完成的結果 接著修改PageSwitcher.
968 0
下一篇
DDNS