Silverlight学习笔记一：准备环境，开始第一个Siverlight 3程序

发布于

一、工具篇。

   工欲善其事，必先利其器，我一直觉得对于MS的东西，没有个强大的编辑器是万万不行的，绝对不想PHP那样的随意。所以，开始之前，我们必须准备好需要的工具，而且这些东西也都不是小个头。

   1、Visual studio 2008，大概3个G吧；

   2、Visual Studio sp1，这个也有800多个Mb；

   3、Silverlight tools for visual studio 2008；

   4、Silverlight SDK

   如果我们需要在方便的界面下来完成Silverlight的布局，可能还需要下面两个

   5、Expression Blend 3；

   6、Expression Studio；

   安装就很简单了，这个不再赘言。

二、初级的例子。

    这里我使用了 Visual Studio 2008 来创建一个简单的例子，Expression Blend 也可以创建，他们在创建项目的时候选型稍微有点区别，不过不大影响。创建项目基本上就是Visual Studio 一贯的风格，填写项目名称，不过随后出来的一个界面中，我们需要选择是否需要建立一个 Web 项目，然后再选择 Web 项目的类型，通俗的将就是静态网站和动态网站。

    这里因为我只是需要了解 Silverlight 的制作，所以选择 Web Site。创建后，

    完成后，我们可以看到相应的文件。

    资源管理器中查看工程的文件夹。

    VS 资源管理器中查看工程。

    接下来，就可以在MainPage.xaml中编写Silverlight 布局样式的代码了，这里是一个3行4列的表格，分别显示名称，日期和消息的。

代码语言：javascript
复制
<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="_002_simple_project.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot" Background="Azure" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="350" />
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="250" />
            <RowDefinition Height="150" />
        </Grid.RowDefinitions>
      
        <TextBlock Text="Name:" x:Name="name_1" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock Text="Date:" x:Name="cal_1" Grid.Row="1" Grid.Column="0" ></TextBlock>
        <TextBlock Text="Message:" x:Name="message_1" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ></TextBlock>
      
        <TextBox Text="your name" Grid.Row="0" Grid.Column="1"></TextBox>
        <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Vertical">
            <controls:Calendar SelectionMode="SingleDate" HorizontalAlignment="Left"></controls:Calendar>
            <Button Content="OK" x:Name="okButton" Width="100" Click="okButton_Click"></Button>
        </StackPanel>
    </Grid>
</UserControl>

    这样，布局基本上完成，可以开始隐藏代码的编写了，在开始之前，我们需要 Rebuild Solution 以确保 Xaml 中的命名能够在程序中被找到。

    程序的逻辑代码如下：

代码语言：javascript
复制
private void okButton_Click(object sender, RoutedEventArgs e)
        {
            string dateString;
            if (cal_1.SelectedDate == null)
            {
                dateString = "<date not selected>";
            }
            else
            {
                dateString = cal_1.SelectedDate.ToString();
            }
            message_1.Text = "Hi " + name_1.Text + "\n Selected Date is " + dateString;

 第一个简单的Silverlight程序就完成了，支持一个简单的单击事件，并且显示相应的信息。

#silverlight