Response.Write("Hello LOLOTA")

在Silverlight中，我們知道專案預設都是使用Page.xaml作為初始化的顯示頁面，但是如果有多個畫面要作切換，

要如何在頁面上動態地載入所需的UserControl呢？

 

1.

首先，我們建立一個新的Silverlight專案，在專案的Page.xaml中，我們在其中新增一個Button以及一個Border，

Button是作為動態載入的觸發器，而Border則是作為放置UserControl的容器。

<UserControl x:Class="SL_D20.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutRoot" Background="White"> <Button x:Name="uxMyButton" Content="Test" Width="50" Height="50" Click="uxMyButton_Click" HorizontalAlignment="Left" Margin="24,8,0,0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height"/> <Border Margin="40,120,48,36" x:Name="uxSP"/> </Grid> </UserControl>

 

2.

然後，我們製作兩個UserControl，分別為Control1以及Control2：

Control1:

<UserControl x:Class="SL_D20.Control1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="112" Height="96" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutRoot" Background="White"> <Button x:Name="uxButton" Content="按鈕1號" Width="50" Height="50" Background="Red" Margin="22,16,40,30" d:LayoutOverrides="Width, Height" /> </Grid> </UserControl>

 

 

Control2:

<UserControl x:Class="SL_D20.Control2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="88" Height="56" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutRoot" Background="White"> <TextBlock Text="測試機二號" Width="70" Height="40" Margin="8,8,10,8" d:LayoutOverrides="Width, Height"/> </Grid> </UserControl>

 

3.

接下來，在Page.xaml的Button的Click事件中，我們去作切換USerControl的動作：

private Control1 uc1 = new Control1(); private Control2 uc2 = new Control2(); private bool isNowUC2 = false; private void uxMyButton_Click(object sender, RoutedEventArgs e) { if (isNowUC2) { uxSP.Child=uc1; } else { uxSP.Child = uc2; } isNowUC2 = !isNowUC2; }

 

這邊是透過初始化兩個UserControl以及一個判別現在是載入那個UserControl的Flag來實做。

 

線上Demo

程式碼下載

 

 

透過這樣的Demo，是不是看到動態載入控制項很簡單呢？

 

試煉大會，我們下次見~

 

 

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。