2007年10月11日 星期四

Silverlight的文字輸入功能

  眾所周知,在目前這個階段,Silverlight並沒有所謂的TextBox控制項可以輸入文字,因此,想要在Silverlight當中輸入文字必須使用ASP.NET的TextBox控制項來充當文字的輸入功能。
  這部份該如何作呢?這就要討論到Xaml控制項的WindowsLess屬性了,其實該屬性是Xaml控制項當中相當重要的屬性之一,它讓ASP.NET的控制項與Silverlight之間可以彼此合作,例如下圖這樣的狀況:
  上圖中的文字輸入功能,其實並非是Silverlight所提供的,如您所知,Silverlight目前並沒有所謂的控制項,因此也沒有辦法直接輸入文字,但是我們可以和ASP.NET的TextBox控制項加以配合,讓Silverlight模擬出輸入的功能。
  其實設計的方式很簡單,我們只需要透過Blend2把外框先繪製好:

  接著把xaml code引用至Xaml控制項中,然後關鍵的部份來了,請務必把Xaml控制項的WindowsLess屬性設為True,同時在Xaml控制項上『疊上』TextBox物件(注意要把TextBox的Style設為position: absolute且將ZIndex設為大於Xaml控制項,並透過『樣式』功能,把TextBox的邊框消除:



  完成後,其HTML指令碼如下:


  請注意,這個技巧在設計RIA時相當常見,讀者可參考書附光碟中的範例『SilverlightStudyHostCom\Demo\AniBackground\Default.aspx』來瞭解設計的方式。
  我們未來會介紹如何透過這樣的方式,讓使用者在Silverlight介面上輸入文字,並透過AJAX技術傳遞給後端的ASP.NET程式。

資料來源: Silverlight權威講座--ASP.NET整合秘技與獨家案例剖析(董大偉 - 旗標)

沒有留言: