Hello SilverLight 4(写给初学者的SilverLight教程)第二章

SilverLight的控件们

  是的，没有它们你啥也做不了。先回答一个问题，先有桌面程序还是先有WEB程序（不要联想到先有鸡还是先有蛋）。当然是先有桌面程序，所以，如果你的WEB程序和桌面程序界面相差太远的话，那么就有人不会使用你的程序，因为他们习惯了那Button和CheckBox以及下拉框之类的东西。从某种角度来说，SilverLight的控件（也包括ASP.NET控件）就是为了使WEB程序看起来（以及使用起来）像桌面程序一样方便而产生的。所以我不说大家应该也知道有哪些控件。
我还是说一下吧...看图



以上的控件是SilverLight4中内置的控件，你可以下载SilverLight Toolkit来扩展这些个控件。因为这是一个入门教程，所以我不会一一的进行讲解，我主要讲几个主要的。当你理解了这些个主要的控件，其它的自己也能摸索个八九不离十了，只要你不是傻子。
我要重点进行讲解的控件有：Buttons, Checkboxes,RadioButtons, Grid, TabControl, Border, StackPanel, ToggleButton, Slider, TextBlock, TextBox, RichTextArea。

Button
一个Button就是一个按钮，你点击它，它执行代码，就这么简单。开发过ASP.NET的同学应该经常使用它去触发一个行为，比如提交表单之类。那么Button在SilverLight中和在ASP.NET中就一样了？从根本上来说，是。但是还是有区别的，这种区别也就是RIA所宣扬的提高用户体验。
在ASP.NET中，你可以通过Text属性改变Button上的文字，但是你如何能改变文字的颜色呢？你如何改变字体的大小呢？在SilverLight中它就行，而且很方便。下面的XAML会产生一个内容文字为绿色的Button：
<Button Height="23" HorizontalAlignment="Left" Margin="95,84,0,0" Name="button1" VerticalAlignment="Top" Width="75">
  <Button.Content>
  <TextBlock Foreground="Green">
  Button
  </TextBlock>
  </Button.Content>
</Button>



这是XAML语法，我们以后会详细讲解。到这时，SilverLight的特殊性质开始崭露头角了。
再看个更有意思的：
<Button Height="50" HorizontalAlignment="Left" Margin="95,84,0,0" Name="button1" VerticalAlignment="Top" Width="75">
  <Button.Content>
  <Button Height="25" HorizontalAlignment="Left" VerticalAlignment="Top" Width="50" Content="hello"></Button>
  </Button.Content>
  </Button>




你将会得到两个按钮，其中一个嵌套在另一个当中，这是传统的WEB开发做不到的东西。当然，这么做没什么意义，我只是为了说明SilverLight的与众不同。大家请注意，ASP.NET的Button中文字由Text属性来显示，而在SilverLight中Button没有Text属性，取而代之的是Content，值为Object类型。也就是说理论上你可以在Button里面放几乎任何“东西”（主要是控件）。
另一点不同就是在SilverLight中Button控件有一个ClickMode属性，它包括三个可能值Press（鼠标按下）、Release（鼠标弹起）和Hover（鼠标经过）以方便设计人员制作更多的效果。Button支持众多的事件，其事件机制和Asp.net是一致的，这里不再赘述。

CheckBoxe和RadioButton控件

这两个控件我想大家也不陌生，拖一个控件进去看看就知道它们长什么样子了。
CheckBox



RadioButton


当你新建一个SilverLight项目时，Grid会被做为默认的根控件，用来布局整个SilverLight程序，可见Gird的地位还是很高的，当然，功能强大通常意味着复杂。



提醒大家一下，下面很长一段内容都是和Gird相关的，如果觉得看教程枯燥的话自己可以去VS中亲自尝试一下，有时候我描述的很复杂的行为在操作起来是非常简单的，通常都是这样。
下面我们来看看Grid如何来定义行和列的吧



首先是通过XAML来定义：
<Grid x:Name="LayoutRoot" Background="White">
  <Grid.RowDefinitions>
  <RowDefinition Height="136*" />
  <RowDefinition Height="164*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="190*" />
  <ColumnDefinition Width="210*" />
  </Grid.ColumnDefinitions>
  </Grid>
老天... 不仅仅因为RowDefinitions和ColumnDefinitions这么长的单词为什么不简写为RowDef和ColumnDef，而是当我们要定义一个100行20列的一个Gird来显示一个员工工资表时，希望我的手不会因此而废掉。值得庆幸的是，我们可以不使用这种方式来定义Gird。请注意一下上面图片中Grid边缘的蓝色条，当选中Gird控件时，这些蓝色条就会出现，把鼠标移到上面会产生类似参考线的东西，把鼠标放在上面的蓝条上会出现垂直参考线，这时单击鼠标左键就会定义一列了，同样的方法可以定义一行。这种方法是简便的，但是可定制性上差了一点点，当我想要一个精确数值的一行或一列时，我可能需要一个好点的鼠标。我们来看第三种方法。
选中Gird，注意属性面板（不好意思我使用的是E文的VS）



这是VS为我们提供的，要不然怎么说VS是神器呢！点击 进入下面的界面，我们以ColumnDefinitions为例，RowDefinitions是一样的。



在这里定义行或列是非常简洁明了的，我推荐大家使用这种方式来定义行或列。
好了，Gird的主要使用方法告一段落了，有了Gird我们大可不必使用其它布局控件，但是，其它的控件也并不是一无是处啊，比如Canvas控件就可以很方便的做动画哦，并不是说Gird不能用于做动画，只是不方便而已。
Grid行和列的边界默认是不显示的，我们需要把ShowGridLines属性设为Ture以显示边界。
好了，现在我们已经有一个Gird表格了，但我们的任务才完成了一半，让我们在这些个单元格里放点东西吧。
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="183*" />
  <ColumnDefinition Width="217*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
  <RowDefinition Height="136*" />
  <RowDefinition Height="164*" />
  </Grid.RowDefinitions>
  <Button Grid.Row="0" Grid.Column="0" Content="Button" Height="23" Width="75" />
  <TextBlock Grid.Row="0" Grid.Column="1" Height="23" Text="TextBlock" />
  <Slider Grid.Row="1" Grid.Column="0" Height="23" Width="100" />
  <RichTextBox Grid.Column="1" Grid.Row="1" Height="66" Width="79" />
  </Grid>
在上面的代码中我们先定义了一个两行两列的Gird，然后把四个控件分别放在四个单元格里。下面是重点，请大家注意四个控件中Grid.Row和Grid.Column属性，这是大家所没有见过的写法，类似于一个二维数组，其实就是二维数组。这种属性我们叫到Attached Property（连接属性），它是子元素（四个控件）继承于其父元素（Grid）的属性，因为这是一个入门教程，所以我们不必太关心它是怎么实现的，只要会使用就可以了。当Grid.Row和Grid.Column的值为0时，可以省略，比如
<Button Grid.Row="0" Grid.Column="0" Content="Button" Height="23" Width="75" />
可以写成
<Button Content="Button" Height="23" Width="75" />
不过我感觉还是写上的好，至少看的明白点。
我要说的也正是你要说的，“这太不方便了！！”。
所以，我们不使用这种方式，通常我把控件直接拖到相应的单元格就可以了，VS Thank you very much.

今天的教程就到这里，大家有机会回去多练练布局，这是日后学习动画效果的基础。
这些个教程是由我原创的，大家有不懂的地方可以发Email给我chehongzhi@163.com或者QQ留言413743950，我会尽量给大家解答。

 

第二部分
第二章教程还没有讲完，今天咱们继续哈，还有多少同学在关注呢？
另外请大家不要担心，多关注，在全部教程完毕的时候我还会提供打包的Word文档下载（排版精美），请大家多提意见，我的教程中有错误的地方还望大家指出，谢谢。

StackPanel控件

我们可以把这个控件叫做堆栈控件（如果你们明白堆栈是什么东西的话），形象一点，我们可以叫它排队控件。
如果在StackPanel中放入控件进行布局的话，每一个放入的控件都会被默认的排列在前一个控件的下面哦，就像Window XP桌面上的图标一样。默认的排列顺序是垂直（从上往下排），我们可以把它改为水平（从左向右排），只要设置Orientation属性就可以了。因为StackPanel是自动排列的，所以这个控件没有像Grid一样的Row和Column这类属性，如果你的界面只有一行一列的话（比如一个导航条），那么StackPanel最合适不过了，它要比Gird方便很多哦。



因为StackPanel是自动排列布局，所以如果我们动态的（在代码中）删除一个Button的话，其它的下面（或者右边）的Button会顶替已经删除Button的位置，而在Gird中这将很难做到。

有同学可能要问了，前面两个布局控件怎么这么像古老的Table（表格）布局？太死板了！的确是这样，至少在我们的主角Canvas控件登场以前。

Canvas控件

就如其名，这叫做画布控件，你可以在上面任意位置“画”上你想“画”的控件，那位同学，显示器弄坏了别找我哈，画是加了引号的哦。像Gird一样（看看Gird老大的地位，什么都得先和它比），Canvas拥有我们前面提到的“链接属性”，只不过它要比Grid更丰富一点，包括：Canvas.Left | Canvas.Top| Canvas.Right| Canvas.Bottom
稍后我们会看到这些属性将会被其子控件继承。
我这样排列上面的四种属性是有意的，这是WEB开发约定，比如“0，0，100，200”表示什么呢？没错，根据约定，它表示一个举行四个角的坐标，顺序就是上面属性的排列属性。可以简单的记为“左上右下”，自己的心得而已，嘿嘿。
如果大家认真读过我前面的教程的话，可能会记得我说过，在SilverLight中布局就像在PhotoShop中布局一样所见即所得，是证明我没说大话的时候了！




不要拿DIV来和Canvas相比较，尽管看起来相似，但是SilverLight有着先天的优势，听我一一道来。
有过WEB开发经验的同学可能使用过DW（DreamWeaver），这个号称所见即所得的软件（当然这是个好软件，如果你不使用它的所见即所得的特性）。你们一定有过在不同浏览器中不兼容的问题，比如典型的错位问题。这不是你们的错，或者说这不是DW的错，是浏览器大战导致的后果，这是在HTML标准共存的时代所必然会发生的。但是在SilverLight中，所见就是所得，不会有任何偏差，相信我吧，这是真的。
在HTML中，操作DIV需要JavaScript，尽管JavaScript已经发展的很成熟了，已经被大量的使用（包括传播病毒和可恶的弹窗广告），但正如其名，Script毕竟是Script，在SilverLight中我们使用C#来进行编程。
又说了好多废话，下面我们来看一下XAML中VS给我们生成了些什么东西。

<Grid x:Name="LayoutRoot" Background="White">
<Canvas Height="193" HorizontalAlignment="Left" Margin="37,50,0,0" Name="canvas1" VerticalAlignment="Top" Width="313">
<Button Canvas.Left="45" Canvas.Top="63" Content="Button" Height="23" Name="button1" Width="75" />
<Button Canvas.Left="158" Canvas.Top="143" Content="Button" Height="23" Name="button2" Width="75" />
<Button Canvas.Left="93" Canvas.Top="132" Content="Button" Height="23" Name="button3" Width="75" />
<Button Canvas.Left="158" Canvas.Top="114" Content="Button" Height="23" Name="button4" Width="75" />
<Button Canvas.Left="56" Canvas.Top="122" Content="Button" Height="23" Name="button5" Width="75" />
<RadioButton Canvas.Left="208" Canvas.Top="104" Content="RadioButton" Height="16" Name="radioButton1" />
</Canvas>
</Grid>

大家注意一下“链接属性”，它们代表了与相应边界的距离。比如
<Button Canvas.Left="45" Canvas.Top="63" Content="Button" Height="23" Name="button1" Width="75" >
表示这个Button控件距离Canvas的左边界有45个像素的距离，距离Canvas的上边界有63个像素的距离。大家找找看，究竟这是哪一个Button呢？
之前我说过Canvas控件方便进行动画，怎么个方便呢？比如我想让上面的Button移动到左上角，那么只需要改变Canvas.Left="0" Canvas.Top="0"就可以了，有了这些Top,left,right和Bottom我们的Button控件可以去任何地方（放心，不会飞出屏幕的），这使得使用SilverLight编写游戏成为了可能。
使用Canvas时有一点需要注意，那就是Canvas.Zindex“链接属性”，就像DIV中的Zindex一样，数字大的在上，数字小的在下，比如使用Canvas.Zindex=1的Button会在使用Canvas.Zindex=0的Button上面，如果两者有重叠，那么上面的Button会盖住下面的（如果上面的Button没有设置透明度的话）。



好了，至此我们的布局控件就讲完了，SilverLight还有很多布局控件，有兴趣的话大家自己研究一下吧。

ToggleButton

你可能在控件列表中找不到这个控件，但它还是存在的，我强烈的建议你新手创建一个自己看看什么效果。
  <ToggleButton Width="100" Height="20"></ToggleButton>
对于这个控件我只有一点要说的，那就是它和前面讲的CheckBox，只是外观不同而已。

Slider

它看起来像什么?对了，像一个滑块，我们可以在很多桌面程序中看到它，比如MediaPlayer中的音量控制。我们来看看如何使用它吧。
双击Slider控件会进入后台代码文件，VS为我们生成一个slider1_ValueChanged事件，在这里，我们将开始做点什么。
为了配合Slider，我们还会创建一个Button控件，我们想要的效果就是当我拖动滑块时，Button的尺寸会随之放大或缩小。
XAML：
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Button" Height="23" Name="button1" Width="75" />
<Slider Height="23" Name="slider1" Width="100" ValueChanged="slider1_ValueChanged" Margin="162,168,138,108" Maximum="1000" /></Grid>

后台：
private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
button1.Width = slider1.Value;
button1.Height = slider1.Value;
}

弄好之后大家可以运行SilverLight程序看看效果了，唔，效果相当的不错，传统的Web开发是做不到的。