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

119 阅读2分钟

一、工具篇。

   工欲善其事,必先利其器,我一直觉得对于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列的表格,分别显示名称,日期和消息的。\

   \

<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="_002_simple_project.MainPage"
xmlns="schemas.microsoft.com/winfx/2006/…
xmlns:x="schemas.microsoft.com/winfx/2006/…"
xmlns:d="schemas.microsoft.com/expression/…
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 中的命名能够在程序中被找到。

    程序的逻辑代码如下:\

        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程序就完成了,支持一个简单的单击事件,并且显示相应的信息。