vs2010 学习Silverlight学习笔记(7)：控件样式与模板

概要：

终于知道Silverlight——App.xaml是干什么用的了，不仅可以用来封装样式（类似css），还可以制定控件模版。。。好强大的功能啊。

封装：

继续学习《一步一步学Silverlight 2系列（8）：使用样式封装控件观感》。
上面的例子只要照着做很容易就成功了，但是咱们的学会自己来啊，那我就自己试验试试。
App.xaml代码：

 
   

  
    
  
    
  
    代码
  
    
 
     
    
      

     
       
     
       <
     
       Style 
     
       x:Key
     
       ="ell"
     
        TargetType
     
       ="Ellipse"
     
       >
     
       
 
     
       <!--
     
       Style x:Key="此样式名称" TargetType="样式指定的控件"
     
       -->
     
       
 
     
       <
     
       Setter 
     
       Property
     
       ="Fill"
     
        Value
     
       ="Orange"
     
       ></
     
       Setter
     
       >
     
       
 
     
       <
     
       Setter 
     
       Property
     
       ="Width"
     
        Value
     
       ="100"
     
       ></
     
       Setter
     
       >
     
       
 
     
       <
     
       Setter 
     
       Property
     
       ="Height"
     
        Value
     
       ="100"
     
       ></
     
       Setter
     
       >
     
       
 
     
       <!--
     
       Setter Property="属性名" Value="属性值"
     
       -->
     
       

     
       </
     
       Style
     
       >
    
      
 
    


 
   



MainPage.xaml代码：Style="{StaticResource ell}绑




 
   

  
    
  
    
  
    代码
  
    

  
    



  
    
 
     
 
     
    
      

     
       
     
       <
     
       Grid 
     
       x:Name
     
       ="LayoutRoot"
     
        Background
     
       ="#46461F"
     
       >
     
       
 
     
       <
     
       Ellipse 
     
       HorizontalAlignment
     
       ="Left"
     
        Margin
     
       ="10,10,0,0"
     
        
 Name
     
       ="ellipse1"
     
        Stroke
     
       ="Black"
     
        StrokeThickness
     
       ="1"
     
        
 VerticalAlignment
     
       ="Top"
     
       
 Style
     
       ="{StaticResource ell}"
     
       />
     
       

     
       </
     
       Grid
     
       >
    
      
 
    


 
   












很简单吧，如果遇到大量样式复用的时候，这样会很方便的。

控件模版：

第一个制定控件内容的试验不成功，查了一下说是Silverlight版本问题。不过这个例子做的挺漂亮的，个人希望也能做出类似的控件来。
第二个用模版制定控件的试验倒是成功了，可是App.xaml中好多节点我仍然不了解，看来我学东西还停在表面呃。

再把app.xaml贴出来： 　　能看懂，却自己写不出来，真蛋疼。

 
   

  
    
  
    
  
    代码
  
    
 
     
    
      

     
       
     
       <
     
       Style 
     
       x:Key
     
       ="RoundButton"
     
        TargetType
     
       ="Button"
     
       >
     
       
 
     
       <
     
       Setter 
     
       Property
     
       ="Template"
     
       >
     
       
 
     
       <
     
       Setter.Value
     
       >
     
       
 
     
       <
     
       ControlTemplate 
     
       TargetType
     
       ="Button"
     
       >
     
       
 
     
       <
     
       Grid 
     
       x:Name
     
       ="RootElement"
     
       >
     
       
 
     
       <
     
       Rectangle 
     
       Width
     
       ="200"
     
        Height
     
       ="80"
     
        RadiusX
     
       ="15"
     
        RadiusY
     
       ="15"
     
       >
     
       
 
     
       <
     
       Rectangle.Fill
     
       >
     
       
 
     
       <
     
       LinearGradientBrush 
     
       StartPoint
     
       ="0,0"
     
       >
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#FFFFFF"
     
        Offset
     
       ="0.0"
     
        
     
       />
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#EC04FA"
     
        Offset
     
       ="1.0"
     
        
     
       />
     
       
 
     
       </
     
       LinearGradientBrush
     
       >
     
       
 
     
       </
     
       Rectangle.Fill
     
       >
     
       
 
     
       <
     
       Rectangle.Stroke
     
       >
     
       
 
     
       <
     
       LinearGradientBrush 
     
       EndPoint
     
       ="0.5,1"
     
        StartPoint
     
       ="0.5,0"
     
       >
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#FCB2FD"
     
        Offset
     
       ="0"
     
        
     
       />
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#FFFFFF"
     
        Offset
     
       ="1"
     
        
     
       />
     
       
 
     
       </
     
       LinearGradientBrush
     
       >
     
       
 
     
       </
     
       Rectangle.Stroke
     
       >
     
       
 
     
       </
     
       Rectangle
     
       >
     
       
 
     
       <
     
       TextBlock 
     
       Text
     
       ="我也做出来了"
     
        FontSize
     
       ="26"
     
        Foreground
     
       ="White"
     
       
 HorizontalAlignment
     
       ="Center"
     
        VerticalAlignment
     
       ="Center"
     
       />
     
       
 
     
       </
     
       Grid
     
       >
     
       
 
     
       </
     
       ControlTemplate
     
       >
     
       
 
     
       </
     
       Setter.Value
     
       >
     
       
 
     
       </
     
       Setter
     
       >
     
       
 
     
       </
     
       Style
     
       >
    
      
 
    


 
   




第三个是个可以灵活用的例子，不像2中把样式写死了。我以前学过Asp.net自定义控件，这个很容易就看懂了。






 
   

  
    
  
    
  
    代码
  
    

  
    

  
    



  
    
 
     
 
     
    
      

     
       
     
       <
     
       Style 
     
       x:Key
     
       ="RoundButton"
     
        TargetType
     
       ="Button"
     
       >
     
       
 
     
       <
     
       Setter 
     
       Property
     
       ="Template"
     
       >
     
       
 
     
       <
     
       Setter.Value
     
       >
     
       
 
     
       <
     
       ControlTemplate 
     
       TargetType
     
       ="Button"
     
       >
     
       
 
     
       <
     
       Grid 
     
       x:Name
     
       ="RootElement"
     
       >
     
       
 
     
       <
     
       Rectangle 
     
       Width
     
       ="{TemplateBinding Width}"
     
        Height
     
       ="{TemplateBinding Height}"
     
       
 RadiusX
     
       ="15"
     
        RadiusY
     
       ="15"
     
       >
     
       
 
     
       <
     
       Rectangle.Fill
     
       >
     
       
 
     
       <
     
       LinearGradientBrush 
     
       StartPoint
     
       ="0,0"
     
       >
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#FFFFFF"
     
        Offset
     
       ="0.0"
     
        
     
       />
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#EC04FA"
     
        Offset
     
       ="1.0"
     
        
     
       />
     
       
 
     
       </
     
       LinearGradientBrush
     
       >
     
       
 
     
       </
     
       Rectangle.Fill
     
       >
     
       
 
     
       <
     
       Rectangle.Stroke
     
       >
     
       
 
     
       <
     
       LinearGradientBrush 
     
       EndPoint
     
       ="0.5,1"
     
        StartPoint
     
       ="0.5,0"
     
       >
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#EC04FA"
     
        Offset
     
       ="0"
     
        
     
       />
     
       
 
     
       <
     
       GradientStop 
     
       Color
     
       ="#FFFFFF"
     
        Offset
     
       ="1"
     
        
     
       />
     
       
 
     
       </
     
       LinearGradientBrush
     
       >
     
       
 
     
       </
     
       Rectangle.Stroke
     
       >
     
       
 
     
       </
     
       Rectangle
     
       >
     
       
 
     
       <
     
       ContentPresenter
 
     
       Content
     
       ="{TemplateBinding Content}"
     
       
 FontSize
     
       ="{TemplateBinding FontSize}"
     
       
 HorizontalContentAlignment
     
       ="{TemplateBinding HorizontalContentAlignment}"
     
       
 VerticalContentAlignment
     
       ="{TemplateBinding VerticalContentAlignment}"
     
       
 Foreground
     
       ="{TemplateBinding Foreground}"
     
       >
     
       
 
     
       </
     
       ContentPresenter
     
       >
     
       
 
     
       </
     
       Grid
     
       >
     
       
 
     
       </
     
       ControlTemplate
     
       >
     
       
 
     
       </
     
       Setter.Value
     
       >
     
       
 
     
       </
     
       Setter
     
       >
     
       

     
       </
     
       Style
     
       >
    
      
 
    


 
   

后记：

　　李老师的代码被我copy的差不多了，但是越到后来越是觉得Silverlight深奥，尽管李老师讲的很精彩，但真正被我学到手能用的越来
越少。现在觉得写笔记给自己复习用真的不错。
总目录
上一篇：vs2010 学习Silverlight学习笔记(6)：全屏模式
下一篇：vs2010 学习Silverlight学习笔记(8)：使用用户控件