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

概述前面我们搭建了开发环境，并且创建了一个基本的SilverLight应用程序。本节我们开始研究界面控件的用法。注意：做SilverLight有一点需要记住，这是运行在客户端宿主环境中的，所以这里的控件不是服务器控件。换句话说，SilverLight的运行需要客户端安装.NET Framework 3，虽然宿主环境是浏览器，但是程序是下载到本地运行的，这和WPF机理一致，毕竟SilverLight 前面我们搭建了开发环境，并且创建了一个基本的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();

}