前面我们搭建了开发环境,并且创建了一个基本的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 >
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控件写法基本一致。
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
这是SilverLight XAML C#代码,实现计数器累加和显示。与ASP.NET不同,我们已不需要考虑计数器状态保存的问题了。
运行结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/be41ee1fb686e23575668e417b7c4d4a.png)
这是个很简单的例子。说明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 >
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布局的知识,简单的实现左右布局,我们会在后期有专门的布局学习。其实就是如下一样的按钮:
![](https://i-blog.csdnimg.cn/blog_migrate/15ae8deb600df3128ef4e95395297dc0.png)
你甚至可以在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 >
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#代码如下:
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
实现的效果按钮上一个滑动条,滑动式显示数值:
![](https://i-blog.csdnimg.cn/blog_migrate/ad64a1addd81850711ec48b1024845ef.png)
有兴趣的朋友可以发挥想象力将Button玩出更强大的效果来。
本文转自 王杰瑞 51CTO博客,原文链接:http://blog.51cto.com/wangjierui/117931,如需转载请自行联系原作者