當安裝完Silverlight 2.0之後。我們開始來寫第一隻Silverlight程式,感受一下新版的好處。
首先開啟VS2008,開啟一個新專案。我們會發現在Project Types-->Visual C#的樹狀目錄下多了一個子目錄:Silverlight,Templates則撰擇其中的Silverlight Application。(同時需指定Project Name / Project Location喔)
接著會跳出下列的對話框。由於Silverlight專案是一個Silverlight User Control的專案,所以會要求我們說要加入一個Web Application以方便進行Silverlight的測試。
請注意:Project Type:請選擇Web Application Project。
然後VS2008就會開啟整個Silverlight Application。
主要的專案結構如下:
BMI Project為真正的Silverlight Project,而BMIWeb則是上述提到的供開發時方便Debug用的Web Application Project。
我們觀察一下Silverlight Project裏預設有兩個檔案。其一是Page.xaml,為Silverlight元件真正所在的檔案,而App.xaml 則可供整個專案使用的全域變數。
BMIWeb中,比較重要的檔案及結構就是BMITestPage.aspx。這個檔案就是debug用的網頁。我們可以在Compiler過後,直接執行這個網頁進行測試及debug。而ClientBin的目錄,則在經過Compiler過後,會自動將BMI Project所產生的 *.xap檔案複製在到這裏,讓BMIWeb能正常執行我們撰寫出來的Silverlight控制項。
我們將下列的程式碼,直接覆蓋BMI Project的Page.xaml的XAML原始碼。
<UserControl x:Class="BMI.Page"
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">
<Border Margin="80,74,93,123" Background="#FFF0C5C5"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" Margin="89,88,104,140" HorizontalAlignment="Stretch" Background="#FFCFD3EA">
<StackPanel Orientation="Horizontal">
<TextBlock Text="身高:" Width="50" Margin="5"></TextBlock>
<TextBox x:Name="txtHeight" Width="100" Height="25"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="體重:" Width="50" Margin="5"/>
<TextBox x:Name="txtWeight" Width="100" Height="25"></TextBox>
<Button x:Name="btnCalc" Width="35" Margin="5" Content="計算" Click="btnCalc_Click"></Button>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
然後,在VS2008 Solution Explorer中點選Page.xaml。按右鍵,選擇啟動「Open in Expression Blend」
則會在Expression Blend 2.5中出現下列的畫面
我們可以將畫面調整成下列的模樣後,存檔。
然後,回到VS2008中。在Buutton的那一行中,加上一個屬性
Click。利用VS2008的Intellisense功能「New Event Handler」產生相對應的EVent。
打開Page.xaml.cs。我們就可以發現已經產生相對應的Event:btnCalc_Click。
將下列的程式碼貼入btnCalc_Click內
double result = new double();
double weight = Convert.ToDouble(this.txtWeight.Text);
double height = Convert.ToDouble(this.txtHeight.Text);
result = weight / System.Math.Pow(height/100, 2);
System.Windows.Browser.HtmlPage.Window.Alert("您的BMI值:" + result.ToString());
其中比較重要的是最後一行:
System.Windows.Browser.HtmlPage.Window.Alert(“您的BMI值:” + result.ToString());
這一行程式碼代表Silverllight 2.0,可以讓我們的Silverlight的程式碼呼叫原本Html或Browser上的功能,甚至是原本在Html上的JavaScript Function。
重新Compiler程式後。在BMIWeb Project上點選BMITestPage.aspx上按右鍵。執行「View in Browser」。則會出現下面的畫面。
請在身高輸入170,體重輸入70。則會跳出一個windows對話框,內容是「您的BMI值:24.22145…」。
恭喜,我們完成了第一隻Silverlight 2.0的程式了。