Silverlight 3.0 內建了3D功能,亦支援GPU硬體加速,
以下是一些Silverlight 3D的實例:

http://www.denebspace.com/blog/wp-content/uploads/2008/12/silverlight3d1.html

Kit3D – a 3D C# graphics engine for Microsoft Silverlight
http://kit3d.codeplex.com/

http://www.markdawson.org/kit3d/demos/sl2/tigertexture/testpage.html

http://sildev.net/#demo1

Balder – Get a flying start with Balder, 3D engine for Silverlight.

balder.codeplex.com

Getting Start: http://vimeo.com/13659554

這一篇將介紹如何讓Silverlight在事件觸發之後傳輸資料給PHP的SOAP web service.

STEP1: 在VS2010的Silverlight專案按右鍵 > Add Service Reference

step3

STEP2: 確認你的wsdl 已經上傳到web server上之後, 將他的路徑輸入在 "Address"的欄位之中. 並按下 "Go", 就可以看到ageService的SOAP出現在Services的欄位中.

此外, 為了方便起見, 我們也將Namespace命名程成 "AgeService" (這名字將會在xaml.cs中再度用到)

step4

Step3 : 按下OK之後就會發現專案檔中出現兩個新的檔案, 一個是AgeService, 另一個是config檔. 雙擊config檔.

step5

Step4: 你會發現剛剛設定的東西已經被記錄到Config檔裡面去了.

step6

STEP5: 接下來是處理XAML.CS中的事件, 其中包含了兩個function的CODE:

namespace SilverlightApplication2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {

            AgeService.ageServicePortTypeClient client = new AgeService.ageServicePortTypeClient();
            client.getAgeCompleted += new EventHandler(client_getAgeCompleted);
            client.getAgeAsync(txtName.Text);
            HtmlPage.Window.Alert(txtName.Text);
        }

        void client_getAgeCompleted(object sender, SilverlightApplication2.AgeService.getAgeCompletedEventArgs e)
        {
            HtmlPage.Window.Alert(e.Result.ToString());
        }
    }
}

STEP6: 將Silverlight Application再BUILD一次, 並將新的XAP檔上傳到遠端主機上.

STEP7: 再RUN一次index.php, 並輸入關鍵字 "alfie" 則輸出"27″, 這樣就大功告成了!
last

檔案之間的對照表:
comparison

在網路上搜尋關於初學者以PHP處理Silverlight的教學文章不多,

但就以這篇我測試後是OK的,

所以在這裡希望能用中文簡略的來重新記錄一遍.

測試環境:

  • Windows Server 2008 IIS 7.0
  • FastCGI (PHP環境)
  • PHP 5.2.14 (必須開 soap 與 xmlrpc的模組)
  • Silverlight 4 (確認你的CLIENT已經安裝好silverlight, 其實就像裝Flash Player那麼簡單)

使用的Tools:

  • Visual Studio 2010
  • Silverlight 4 tools
  • PHP IDE (都可)

使用到的檔案:

  • index.php: 顯示silverlight的頁面, 其實對silverlight不熟悉的人可以把它想成是Flash的swf檔, 就像把swf用HTML的object 包起來然後指定路徑顯示而已.
  • ageService.php: 使用者自己寫的class檔, 還有開啟SOAP的程式也會記錄在裡面
  • ClientBin/SilverlightApplication2.xap: 當你用Visual Studio 2010編輯完成後Build出來的就是一個放在ClientBin的xap檔, 事實上在PHP的環境裡, 你只要把xap上傳就可以了, 起他的xaml檔都是原始碼, 讓你日後維護修改再Build的時候可以用到.
  • ageService.wsdl: 這是根據W3C制定的一種XML格式, 內容其實就是告訴SOAP可以接受甚麼, 可以傳送甚麼, 格式是甚麼, 將會吃進甚麼CLASS. 這個檔案將會在ageService.php裡面被拿來用.

index.php內容如下:
source的部分指定了xap檔的路徑, 吃進這個檔案基本上就可以顯示Silverlight的內容了.

indexphp

ageService.php內容如下:

ageService這邊顯示了使用者自訂的Class, 以及如何使用PHP來啟動SOAP服務. 這裡的class只是使用了一個簡單的IF範例. 若使用者輸入的字串為"alfie"則回傳"7″給SILVERLIGHT程式; 若使用者輸入"catherine", 則回傳"21″給SILVERLIGHT程式. 一般來說, 這裡的CLASS大部分都是用來處理MYSQL所讀取的資料. 為了簡單示範, 這裡就不用太複雜的範例了.

ageServicephp

ageService.wsdl內容如下:

仔細看這個XML的內容可以發現他REQUEST是吃進一個STRING, 然後回復的時候是回傳一個INT,
getAge是使用者自訂Class的function, 而這篇教學的重點也是圍繞在這個getAge function.
要注意的是wsdl的內容也要指定SOAP Service的路徑, 也就是web伺服器的php位址.

wdsl

ClientBin/SilverlightApplication2.xap :

xap是由一連串步驟所形成的, 步驟如下:

1. 建立基本的silverlight介面, 可透過編輯XAML檔來達成, 內容就是簡單的Textbox與一個按鈕, 我們希望做到當使用者按下按鈕的時候會顯示使用者輸入的內容, 所以要透過event_handler來處理, 也就是在button中加入一個attribute: Click. 方法很簡單, 只要在Design頁面點兩下Button 就會跳到事件處理的頁面, 畫面如步驟2.

xaml

2. 事件處理寫法:

每個xaml底下都會有一個.cs或者.vb檔, 取決於你一開始選擇的語言(所以基本上還是要學會一點VB跟C#的寫法的), 點兩下cs檔一樣可以到達事件的處理頁面.

xamlcs

MainPage.xaml.cs: 底下紅色框框的程式當使用者按下button之後會跳出Javascript的alert視窗, 並顯示txtName的內容. 淺色紅色框框的部分是待會會繼續討論的部分這裡先帶過.

xamlcs2

接下來就把XAML等資料BUILD一次:

step1

這樣一來再ClientBin裡面就有了最新的XAP檔

step2

將這個XAP檔上傳到WEB SERVER上後, 瀏覽index.php看看

result1

Silverlight成功跑起來了!接下來我們要試試用PHP與Silverlight做溝通.

請按此看下篇


在Silverlight宣告事件的方式有兩種:

  • 直接在XAML內部宣告 (優點:簡單明瞭, 缺點: 只能使用預設的參數, 不能再加參數)
  • 在.cs裡面作宣告 (優點: 彈性大, 可以做變化; 缺點: 比較困難(吧~) )

第一種方式:

在XAML直接作宣告(eg. 在Page.xaml):

<Canvas Loaded="Canvas_Loaded">

<Button x:Name="myButton" Content="Hello"

Canvas.Left="10″ Canvas.Top="10″ />

</Canvas>

在Page.xaml.cs作處理:

private void Canvas_Loaded(object sender, RoutedEventArgs e)

{

theButton.Content = "Please Click Me";

}

第二種方式

不需在XAML裡面宣告事件

<!– <Canvas  Loaded="Canvas_Loaded"> –>

<Canvas >

<Button x:Name="theButton" Content="I’m Indented!"

Canvas.Left="150″ Canvas.Top="20″ />

<CheckBox x:Name="RushOrder" Content="Rush"

Canvas.Left="50″ Canvas.Top="20″ FontSize="18″ />

</Canvas>

而是直接在Page.xaml.cs的Page( ) Constructor動手腳~

public Page()

{

InitializeComponent();

Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

/*throw new NotImplementedException(); 去掉這行 */

theButton.Click +=new RoutedEventHandler(theButton_Click); //事件1

RushOrder.Checked += new RoutedEventHandler(RushOrder_Changed); //事件2

RushOrder.Unchecked +=new RoutedEventHandler(RushOrder_Change); //事件3

}

void RushOrder_Changed(object sender, RoutedEventArgs e)

{

if (RushOrder.IsChecked == true)

{

RushOrder.Content = "RUSH";

}

else

{

RushOrder.Content = "Rush";

}

}

在SilverLight中用來規劃整個版面Layout的Control主要有三種:

  • Grid: 就像Table一樣, 將物件以行列的方式對齊
  • StackPanel: 讓物件之間相對對齊, 如相鄰對齊或向上對齊
  • Canvas: 用絕對對齊(absolute positioning) 的方式放置物件(與SilverLight 1.0相符)

Grid

Grid 在使用VS2008開啟新檔案的時候就已經存在XAML裡面了, 格式會長這個樣子:

<UserControl x:Class="EasyGrid.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">

</Grid>

你可以先規劃整個SilverLight App的框線, 以便之後的對齊作業, 定義的方式如下:

<Grid x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="50″ />

<RowDefinition Height="30*" MaxHeight="70″ />

<RowDefinition Height="40*" MaxHeight="70″ />

<RowDefinition Height="*" MinHeight="30″ MaxHeight="50″ />

<RowDefinition Height="Auto" MinHeight="5″ MaxHeight="30″ />

</Grid.RowDefinitions>

</Grid>

Height: 每一列的高度

MaxHeight: 能夠拉伸的最大高度 (* 表示以比例的方式定義高度, 兩倍高就是 2*)

MinHeight: 能夠拉伸的最小高度

StackPanel

Stack就是堆疊的意思, 使用StackPanel你可以將你的物件以左右堆疊或者上下堆疊的方式排列, 就像書本在書架上一樣. 它也是在SilverLight2.0經常使用的對齊工具. 下面以放置TextBlock, TextBox, CheckBox及Button 為例:

<StackPanel Background="Beige" Orientation="Vertical" >

<TextBlock Text="Your name?"

HorizontalAlignment="Left" Margin="10,2,0,1″/>

<TextBox Width="150″ Height="30″

HorizontalAlignment="Left" Margin="10,2,0,1″/>

<Button Content="Submit this information"

HorizontalAlignment="Left"

Margin="10,2,0,1″ Height="30″ Width="150″ />

<CheckBox Content="With Zing!" HorizontalAlignment="Left"

Margin="10,2,0,1″ />

</StackPanel>

屬性:

Background: Stack背景的顏色

Orientation: 排列方向, Vertical是垂直
在StackPanel內部的物件Margin="10,2,0,1″ 的Margin順序是左, 上, 右, 下.

SilverLight的Control有很多, 以後會逐一介紹其用法, 首先介紹TextBlock的屬性:

<TextBlock x:Name="TestName" Grid.Row="0″ Grid.Column="0″ Text="Testing Name: "  Margin="5″ />

應用: TextBlock的使用方法跟.NET的Label Control很像, 就是專門顯示文字用的.

屬性:

Grid.Row, Grid.Column叫做Extended Properties, 功能是對齊週邊的Grid格線, 讓App看起來較整齊.
Text 功能就是顯示內部的文字.

Margin很有趣, 輸入不同數目的值就有不同的Margin效果.
Margin="5″ : 表示 左, 右, 上, 下 都是空出5px.
Margin="5,6″ : 表示 左右空出5px, 上下空出6px.
Margin="5,6,7,8″: 表示 左5px, 上6px, 右7px, 下8px.