使用Silverlight Toolkit实现弹窗---ChildWindow

简介:
 在Silverlight中写一个弹窗功能并不难,但必定也要自己写代码,定义模式去实现,而 在SilverlightToolKit3中,提供了一个叫“ChildWindow”的类,位于:  
      System.Windows.Controls
          
     使用它,我们可以很容易的将任何想放在新窗口中显示的内容,以弹窗的形式显示显示。
     
     下面演示一下效果:
     
      1.点击弹窗按钮。
     
      2.弹出子窗体,并输入数据。

     
    
       3.点击“提交”按钮返回父窗体。
     
     
    
      下面就简要介绍一下其用法,如果之前我们执行了Silverlight ToolKit 3 的安装包。我们只要在相应的SL应用项目上击鼠标右键,选“添加”--> "新建项",就可以在弹出窗口中看到新加了一个“Silverlight Child Window”模板,这时我们选中它,并将新创建的子窗口命名为:MyChildWindow.xaml
   
     
       这样,我们在可以在这个新建的XAML文件中加入任何我们想弹窗显示的元素了,比如:    
< controls:ChildWindow  x:Class ="Silverlight_ToolKit3.MyChildWindow"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:controls
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Width
="400"  Height ="180" >
    
< Grid  x:Name ="LayoutRoot"  Background ="White" >
        
< Grid.ColumnDefinitions >
            
< ColumnDefinition  Width ="100" />
            
< ColumnDefinition  Width ="300" />
        
</ Grid.ColumnDefinitions >
        
        
< Grid.RowDefinitions >
            
< RowDefinition  Height ="50" />
            
< RowDefinition  Height ="50" />
            
< RowDefinition  Height ="50" />
        
</ Grid.RowDefinitions >
        
        
< TextBlock  Text ="用户名:"  Grid.Column ="0"  Grid.Row ="0"   />
        
< TextBox  Width ="200"  x:Name ="UserName"  Grid.Column ="1"  Grid.Row ="0"  Height ="30" />
        
< TextBlock  Text ="密码:"  Grid.Column ="0"  Grid.Row ="1" />
        
< TextBox  Width ="200"  x:Name ="PassWord"  Grid.Column ="1"  Grid.Row ="1"  Height ="30" />

        
< StackPanel  Grid.ColumnSpan ="2"  Orientation ="Horizontal"  HorizontalAlignment ="Center"  Grid.Row ="2" >
            
< Button  Content ="提交"  Width ="75"  Height ="25"   x:Name ="Submit"  Click ="Submit_Click" />
            
< Button  Content ="取消"  Width ="75"  Height ="25"   x:Name ="Cancel"  Click ="Cancel_Click" />
        
</ StackPanel >
    
</ Grid >
</ controls:ChildWindow >
    
      我们看到上面的XAML中的按钮有两个单击事件,分别对应提交和取消操作,相应事件处理代码如下: 

private   void  Submit_Click( object  sender, RoutedEventArgs e)
{
     
this .DialogResult  =   true ;
}

private   void  Cancel_Click( object  sender, RoutedEventArgs e)
{
     
this .DialogResult  =   false ;
}
 
      代码比较简单,主要是将当前对话框的结果(关闭时状态)传递给父窗口。
    
      下面我们就来看一下父窗口是如果实现弹窗功能的。
    
      首先我们在父窗口放置一个Button元素,并将Click事件进行绑定如下:       
< Button  Content ="显示子窗口"  Height ="23"  Grid.Column ="0"  Grid.Row ="0"   Click ="ShowWindow_Click" />
   
      然后向父窗口的XAML.CS文件中复制如下代码:     
 MyChildWindow myChildWindow  =   new  MyChildWindow();

 
public  MainPage()
 {
     InitializeComponent();

     
// 子窗口事件绑定
     myChildWindow.Closed  +=   new  EventHandler(myChildWindow_Closed);
 }

 
#region  子窗口事件代码
 
void  myChildWindow_Closed( object  sender, EventArgs e)
 {
     
if  (myChildWindow.DialogResult  ==   true )
         Message.Text 
=   string .Format( " 用户名:{0}  密码:{1} " , myChildWindow.UserName.Text, myChildWindow.PassWord.Text);
     
else
         Message.Text 
=   " 取消 " ;
 }

 
private   void  ShowWindow_Click( object  sender, RoutedEventArgs e)
 {
     myChildWindow.Title 
=   " 子窗口信息 " ;
     myChildWindow.OverlayBrush 
=   new  SolidColorBrush(Colors.Yellow);
     myChildWindow.Opacity 
=   0.9 ;
     myChildWindow.HasCloseButton 
=   true ;
     myChildWindow.Foreground 
=   new  SolidColorBrush(Colors.Red);
     myChildWindow.FontSize 
=   14 ;
     
// myChildWindow.OverlayOpacity = 0.9;
     
// myChildWindow.IsEnabled = false; 

     myChildWindow.Show();
 }
 
#endregion
 
     上述代码首先声明一个MyChildWindow实例,用于进行相关弹窗操作。然后在构程方法中对该实例的Closed事件绑定事件处理代码“ myChildWindow_Closed”, 在该事件中我们可以通过对DialogResult的判断(之前子窗口中已通过相关CLICK事件进行了绑定),来获取子窗口中的输入数据信息并进行显示。
 
     最后的事件就是弹窗事件代码了,在这里可以对窗体背景的透明度Opacity,子窗口是否包括关闭按钮(窗体右上方),子弹体是否有效等属性进行设置,并最终调用Show()方法来显示子窗体。    

     好了,今天的内容就先到这里了。


本文转自 daizhenjun 51CTO博客,原文链接:http://blog.51cto.com/daizhj/185743,如需转载请自行联系原作者
相关文章
|
测试技术 开发工具 开发者

热门文章

最新文章