silverlight窗体之间传值的实现

Silverlight 多頁切換的方法

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)

<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的部份，基本上跟第一頁是一樣的
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
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

<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

<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

posted @ 2009-11-25 14:10 molin 阅读(744) 评论(0) 编辑收藏举报

刷新页面返回顶部

molin's space!

silverlight窗体之间传值的实现

Silverlight 多頁切換的方法

公告