vs2010 学习Silverlight学习笔记(8)：使用用户控件

概要：

　　这个类似于封装控件样式。不过封装的是整个或是多个控件罢了，然后用的时候就可以直接引用过来了。

创建用户控：

　　这个也很简单，不过有几个地方需要注意下。这个就不照抄了，咱们也自己写一个。
　　步骤：
　　1.在SilverlightApplication中添加SilverlightUserControl。
　　2.发现新建的是：
　　
　　　打开看一下，这个文件跟MainPage一样一样的。但是你不能把它当做MainPage用，如果你想用的话，你要到App.xaml
　　中修改启动
　　
 
   

  
    
   
     

    
      
    
      private
    
       
    
      void
    
       Application_Startup(
    
      object
    
       sender, StartupEventArgs e)
 {
 
    
      this
    
      .RootVisual 
    
      =
    
       
    
      new
    
       MainPage();
 }

   
     


 
   






 




3.在SilverlightControl1.xaml中添加代码





 
   

  
    
  
    
  
    代码
  
    

  
    



  
    
 
     
 
     
    
      

     
       
     
       <
     
       Grid 
     
       x:Name
     
       ="LayoutRoot"
     
        Background
     
       ="#46461F"
     
       >
     
       
 
     
       <
     
       Grid.RowDefinitions
     
       >
     
       
 
     
       <
     
       RowDefinition
     
       ></
     
       RowDefinition
     
       >
     
       
 
     
       <
     
       RowDefinition
     
       ></
     
       RowDefinition
     
       >
     
       
 
     
       <
     
       RowDefinition
     
       ></
     
       RowDefinition
     
       >
     
       
 
     
       </
     
       Grid.RowDefinitions
     
       >
     
       
 
     
       <
     
       Grid.ColumnDefinitions
     
       >
     
       
 
     
       <
     
       ColumnDefinition
     
       ></
     
       ColumnDefinition
     
       >
     
       
 
     
       <
     
       ColumnDefinition
     
       ></
     
       ColumnDefinition
     
       >
     
       
 
     
       </
     
       Grid.ColumnDefinitions
     
       >
     
       
 
     
       <
     
       TextBlock 
     
       Grid.Row
     
       ="0"
     
        Grid.Column
     
       ="0"
     
        Text
     
       ="账户"
     
       
 Width
     
       ="50"
     
        Height
     
       ="20"
     
       ></
     
       TextBlock
     
       >
     
       
 
     
       <
     
       TextBox 
     
       Grid.Row
     
       ="0"
     
        Grid.Column
     
       ="1"
     
        Width
     
       ="200"
     
        Height
     
       ="20"
     
       ></
     
       TextBox
     
       >
     
       
 
     
       <
     
       TextBlock 
     
       Grid.Row
     
       ="1"
     
        Grid.Column
     
       ="0"
     
        Text
     
       ="密码"
     
       
 Width
     
       ="50"
     
        Height
     
       ="20"
     
       ></
     
       TextBlock
     
       >
     
       
 
     
       <
     
       TextBox 
     
       Grid.Row
     
       ="1"
     
        Grid.Column
     
       ="1"
     
        Width
     
       ="200"
     
        Height
     
       ="20"
     
       ></
     
       TextBox
     
       >
     
       
 
     
       <
     
       Button 
     
       Grid.Row
     
       ="2"
     
        Grid.Column
     
       ="0"
     
        Grid.ColumnSpan
     
       ="2"
     
        Content
     
       ="提交"
     
       
 Background
     
       ="Orange"
     
        Width
     
       ="200"
     
        Height
     
       ="100"
     
       ></
     
       Button
     
       >
     
       
 
     
       </
     
       Grid
     
       >
     
       

    
      
 
    


 
   



4.在MainPage.xaml添加代码





 
   

  
    
  
    
  
    代码
  
    

  
    



  
    
 
     
 
     
    
      

     
       
     
       <
     
       UserControl 
     
       x:Class
     
       ="SilverlightAppDemo10.MainPage"
     
       
 xmlns:myControl
     
       ="clr-namespace:SilverlightAppDemo10"
     
       
 xmlns
     
       ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     
       
 xmlns:x
     
       ="http://schemas.microsoft.com/winfx/2006/xaml"
     
       
 xmlns:d
     
       ="http://schemas.microsoft.com/expression/blend/2008"
     
       
 xmlns:mc
     
       ="http://schemas.openxmlformats.org/markup-compatibility/2006"
     
       
 mc:Ignorable
     
       ="d"
     
       
 d:DesignHeight
     
       ="300"
     
        d:DesignWidth
     
       ="400"
     
       >
     
       

 
     
       <
     
       Grid 
     
       x:Name
     
       ="LayoutRoot"
     
        Background
     
       ="White"
     
       >
     
       
 
     
       <
     
       myControl:SilverlightControl1 
     
       x:Name
     
       ="mycon"
     
       ></
     
       myControl:SilverlightControl1
     
       >
     
       
 
     
       </
     
       Grid
     
       >
     
       

     
       </
     
       UserControl
     
       >
     
       

    
      
 
    


 
   






 



主要就是：
　　　　注册：xmlns:myControl="clr-namespace:SilverlightAppDemo10"　　　　　　
　　　　使用或引用：<myControl:SilverlightControl1 x:Name="mycon"></myControl:SilverlightControl1>
　　　　这些代码vs会出现输入提示的。。。
　　5.看看效果。我晕，还真难看。。。
　　　　

添加用户控件属性：

哎，本想show一下asp.net控件开发知识的。结果没成功，把代码贴上了。我会继续研究原因的，也请知道的朋友告诉我一下。
SilverlightControl.xaml代码：

 
   

  
    
  
    
  
    代码
  
    
 
     
    
      

     
       
     
       <
     
       Canvas 
     
       x:Name
     
       ="LayoutRoot"
     
        Background
     
       ="White"
     
       >
     
       
 
     
       <
     
       TextBlock 
     
       x:Name
     
       ="txtb"
     
        Canvas.Left
     
       ="20"
     
        Canvas.Top
     
       ="50"
     
        Width
     
       ="100"
     
        Height
     
       ="20"
     
        Text
     
       =""
     
       ></
     
       TextBlock
     
       >
     
       
 
     
       <
     
       TextBox 
     
       Canvas.Left
     
       ="150"
     
        Canvas.Top
     
       ="50"
     
        Width
     
       ="200"
     
        Height
     
       ="20"
     
       ></
     
       TextBox
     
       >
     
       
 
     
       </
     
       Canvas
     
       >
     
       

    
      
 
    


 
   




SilverlightControl.xaml.cs代码：

 
   

  
    
  
    
  
    代码
  
    
 
     
    
      

     
       
     
       public
     
        
     
       string
     
        TextMessage
 {
 
     
       get
     
        
 {
 
     
       return
     
        
     
       this
     
       .txtb.Text
     
       !=
     
       ""
     
       ?
     
       this
     
       .txtb.Text:
     
       "
     
       还没有定义属性
     
       "
     
       ;
 }
 
     
       set
     
       
 {
 
     
       this
     
       .txtb.Text 
     
       =
     
        value;
 }
 }

    
      
 
    


 
   



MainPage.xaml代码：





 
   

  
    

  
    



  
    
   
     

    
      
    
      <
    
      Grid 
    
      x:Name
    
      ="LayoutRoot"
    
       Background
    
      ="White"
    
      >
    
      
 
    
      <
    
      myControl:SilverlightControl1 
    
      x:Name
    
      ="myCon"
    
       TextMessage
    
      ="没成功啊"
    
      ></
    
      myControl:SilverlightControl1
    
      >
    
      

    
      </
    
      Grid
    
      >
    
      

   
     


 
   






 

运行一下：
我想的是，假如没有设置Text，就会显示：还没有定义属性 ,设置后就会显示设置的属性。可是这个Silverlight机制我不太懂，
弄巧成拙了。

动态添加用户控件：

　　时间不够了，先把TerryLee的贴上。回头我再改。另外我在想既然可以动态添加，是不是也可以动态减去？
这样的话，页面岂不是花样百出了？！我会明天继续。。
1.用户控件可以动态的添加到页面中，修改一下Page.xaml中的XAML代码，放入一个Canvas作为用户控件的容器。

<Grid x:Name="LayoutRoot" Background="#
 
   
    
  46461F
 
   ">
    <Canvas x:Name="ContainerCanvas">
        
    </Canvas>
</Grid>

 编写添加用户控件代码：

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
    ConfirmBox confirmbox = new ConfirmBox();
 
    confirmbox.Message = "动态添加用户控件成功！";
    ContainerCanvas.Children.Add(confirmbox);
}

后记：

　　现在有两个问题：
　　1.动态修改用户控件属性，即上面那个代码中get{}set{}为什么不能成功？怎样才能成功？
　　2.能否动态卸载控件？
这篇是我昨晚写的，不过关机的时候忘记保存了。。今天重做一下，传了上来。
今天是我生日，我出去玩了。晚上回来我会继续研究者两个问题。
总目录
上一篇：vs2010 学习Silverlight学习笔记(7)：控件样式与模板
下一篇：vs2010 学习Silverlight学习笔记(9)：使用用户控件（2）