Response.Write("Hello LOLOTA")

在Silverlight中，除了透過Javascript所彈跳出來的視窗外，也可以透過Popup物件來達到彈跳視窗的效果。

 

1.

首先在新開啟的Silverlight專案的Page.xaml，新增一個Button以及一個Popup物件，然後在Popup物件內設定一些顯示的內容

(由一個StackPanel內含TextBlock以及一個Close Button)。

<UserControl x:Class="SL_D15._1.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"> <Button x:Name="uxShowPopup" Content="出現彈跳視窗內容" Click="uxShowPopup_Click" VerticalAlignment="Top" Width="128" Height="40" HorizontalAlignment="Left"></Button> <Popup x:Name="MyPopup" VerticalOffset="75" HorizontalOffset="25" Margin="-8,0,8,0"> <Border BorderBrush="Black" BorderThickness="5"> <StackPanel x:Name="PopUpPanel" Background="#FFB9F4E2" Height="Auto" Width="Auto" > <TextBlock x:Name="PopUpText" Height="143" Width="Auto" Text="點部落試煉大會~" FontFamily="Comic Sans MS" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFD91F1F"/> <Button x:Name="ClosePopup" Height="34" Width="73" Content="Close" Background="#FF86F922" FontFamily="Verdana" FontSize="14" Click="ClosePopup_Click" /> </StackPanel> </Border> </Popup> </Grid> </UserControl>

 

2.

在Page.xaml.cs中，撰寫下列程式碼：

private void uxShowPopup_Click(object sender, RoutedEventArgs e) { MyPopup.IsOpen = true; } private void ClosePopup_Click(object sender, RoutedEventArgs e) { MyPopup.IsOpen = false; }

這兩段程式碼，一個是控制Popup物件顯示，另一段則是將它隱藏。

 

3.

按下F5執行。按下按鈕。

 

接下來，我們動態新增Popup物件。

 

4.

在xaml code中，我們再新增一個按鈕，然後設定它的Click事件：

<UserControl x:Class="SL_D15._1.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"> <Button x:Name="uxShowPopup" Content="出現彈跳視窗內容" Click="uxShowPopup_Click" VerticalAlignment="Top" Width="128" Height="40" HorizontalAlignment="Left"></Button> <Button x:Name="uxDynamicShowPopup" Content="動態出現彈跳視窗內容" Click="uxDynamicShowPopup_Click" VerticalAlignment="Top" Height="40" Margin="138,0,134,0"/> <Popup x:Name="MyPopup" VerticalOffset="75" HorizontalOffset="25"> <Border BorderBrush="Black" BorderThickness="5"> <StackPanel x:Name="PopUpPanel" Background="#FFB9F4E2" Height="Auto" Width="Auto" > <TextBlock x:Name="PopUpText" Height="143" Width="Auto" Text="點部落試煉大會~" FontFamily="Comic Sans MS" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFD91F1F"/> <Button x:Name="ClosePopup" Height="34" Width="73" Content="Close" Background="#FF86F922" FontFamily="Verdana" FontSize="14" Click="ClosePopup_Click" /> </StackPanel> </Border> </Popup> </Grid> </UserControl>

 

5.

寫入下列程式碼：

//建立一個Popup物件 private Popup myPopup = new Popup(); private void uxDynamicShowPopup_Click(object sender, RoutedEventArgs e) { StackPanel sp = new StackPanel(); TextBlock tb = new TextBlock(); tb.Text = "這是動態建立的彈跳視窗!!"; tb.FontSize = 18; tb.Foreground = new SolidColorBrush(Colors.Red); Button bt = new Button(); bt.Content = "close"; bt.Click += new RoutedEventHandler(bt_Click); //新增children control sp.Children.Add(tb); sp.Children.Add(bt); myPopup.Child = sp; //控制顯示位置 myPopup.VerticalOffset = 75.0; myPopup.HorizontalOffset = 25.0; myPopup.IsOpen = true; } void bt_Click(object sender, RoutedEventArgs e) { myPopup.IsOpen = false; }

 

 

這裡動態建立一個Popup物件，然後在其中塞了一個StackPanel、TextBlock以及Button。透過TextBlock顯示文字，Button則是關閉

彈跳視窗。

 

6.

按下F5執行。按下「動態出現彈跳視窗內容」按鈕。

 

線上Demo

程式碼下載

 

 

 

試煉大會，我們下次見囉~

 

 

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

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