《SilverLight2快速入门》之基本控件Button

前面我们搭建了开发环境，并且创建了一个基本的SilverLight应用程序。本节我们开始研究界面控件的用法。

注意：

做SilverLight有一点需要记住，这是运行在客户端宿主环境中的，所以这里的控件不是服务器控件。换句话说，SilverLight的运行需要客户端安装.NET Framework 3，虽然宿主环境是浏览器，但是程序是下载到本地运行的，这和WPF机理一致，毕竟SilverLight代号是WPF/E。

我们所用到的标准控件都来自 System.Windows.Controls 命名空间，具体成员说明可以查阅SDK。

 

Button控件绝对是最常用的控件。所以第一个讲解。其实我们在Hello程序里见过了。我们举个例子说明Button的声明和事件绑定，顺便通过演示来理解控件在本地运行的机理。

< UserControl  x:Class ="_51CTO.lesson02.Button" 
         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  Name ="button1"  Width ="200"  Height ="100"  Content ="这是一个按钮"  Click ="Button_Click"  > </ Button > 
         </ Grid > 
</ UserControl >

上面声明了一个Button，语法与ASP.NET控件写法基本一致。

namespace _51CTO.lesson02 
{ 
         public partial  class Button : UserControl 
        { 
                 private  int times=0; 
                 public Button() 
                { 
                        InitializeComponent(); 
                } 
 
                 private  void Button_Click( object sender, RoutedEventArgs e) 
                { 
                        times++; 
                        MessageBox.Show(times.ToString(),  "提示", MessageBoxButton.OK); 
                } 
        } 
}

这是SilverLight XAML C#代码，实现计数器累加和显示。与ASP.NET不同，我们已不需要考虑计数器状态保存的问题了。

运行结果如下：

这是个很简单的例子。说明Button控件的基本设置和Click事件处理，当然Button的属性和事件不止如此，笔者抛砖引玉，更多详细内容见SDK。

 

上面的控件使用用法没有新意，与传统控件不一样的是，Button属于控件内容模型，关于“控件内容模型”我们会在后期单独讲解。先看一个在Button上显示其它图形的做法：

< UserControl  x:Class ="_51CTO.lesson02.ButtonImage" 
         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  Height ="100"  Width ="300"  HorizontalContentAlignment ="Left" > 
                         < Grid > 
                                 < Grid.ColumnDefinitions > 
                                         < ColumnDefinition  /> 
                                         < ColumnDefinition  /> 
                                 </ Grid.ColumnDefinitions > 
                                 < Grid.RowDefinitions > 
                                         < RowDefinition  /> 
                                 </ Grid.RowDefinitions > 
                                 < Image  Source ="Naruto.jpg"  Grid.Column ="0"  Grid.Row ="0" > </ Image > 
                                 < TextBlock  Grid.Column ="1"  Grid.Row ="0"  VerticalAlignment ="Center"  FontSize ="20" >图片按钮 </ TextBlock > 
                         </ Grid > 
                 </ Button > 
         </ Grid > 
</ UserControl > 

这里用到了Grid布局的知识，简单的实现左右布局，我们会在后期有专门的布局学习。其实就是如下一样的按钮：

你甚至可以在Button上加其它输入控件，简直就是个容器一样，比如下面代码：

< UserControl  x:Class ="_51CTO.lesson02.ButtonContent" 
         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  Name ="button1"  Width ="200"  Height ="100" > 
                         < StackPanel > 
                                 < Ellipse  Height ="40"  Width ="40"  Fill ="Blue" /> 
                                 < Slider  Name ="Slider1"  Width ="100"  ValueChanged ="Slider_ValueChanged" > </ Slider > 
                                 < TextBlock  Name ="TextBlock1"  TextAlignment ="Center" >按钮 </ TextBlock > 
                         </ StackPanel > 
                 </ Button > 
         </ Grid > 
</ UserControl > 

C#代码如下：

namespace _51CTO.lesson02 
{ 
         public partial  class ButtonContent : UserControl 
        { 
                 public ButtonContent() 
                { 
                        InitializeComponent(); 
                } 
 
                 private  void Slider_ValueChanged( object sender, RoutedPropertyChangedEventArgs< double> e) 
                { 
                        TextBlock1.Text = (( int)Slider1.Value).ToString(); 
                } 
        } 
}

实现的效果按钮上一个滑动条，滑动式显示数值：

有兴趣的朋友可以发挥想象力将Button玩出更强大的效果来。

本文转自 王杰瑞 51CTO博客，原文链接：http://blog.51cto.com/wangjierui/117931，如需转载请自行联系原作者