Silverlight教程第七部分: 使用控件模板定製控件的觀感

 ----------http://blog.joycode.com/scottgu/archive/2008/02/29/114916.aspx

這是8個系列教程的第七部分,這系列示範如何使用Silverlight 2的Beta1版本建造一個簡單的Digg客戶端應用。這些教程旨在按順序閱讀,幫着解釋Silverlight的一些核心編程概念。

如何定製控件的觀感(Look and Feel)

WPF和Silverlight編程模型中一個強大無比的功能,就是能夠完全定製所使用的控件的觀感(Look and Feel )。這允許開發人員和設計師對控件的界面以微妙和戲劇性的方式進行精雕細琢,促成無比的靈活性以創建出恰如所願的用戶體驗。

在這篇教程裏,我們將看一下你可以定製控件的幾種方式,然後在結尾使用這些技術對我們的Digg應用的用戶界面潤色一下。

定製控件的內容

在這個系列的第一部分裏,我們在頁面上加了一個簡單的按鈕控件,示範瞭如何把它的內容設成一個自定義的“Push Me!”文字字符串。然後我們連接了一個Click事件處理函數,在它被點擊時執行一些代碼:

step13.png

這導致按鈕在瀏覽器裏象下面這麼顯示:

step109.png

關於按鈕控件,也許會讓你感到驚奇的一件事情是,它的Content屬性,不必是象“Push Me!”這樣簡單的字符串。實際上,我們可以把Content屬性設成我們想要的任何形狀或控件序列:

譬如,我們可以嵌入一個StackPanel,內含 <Image> 和 <TextBlock> 控件:

step107.png 

這會導致我們的按鈕在運行時看上去會象下面這樣。注意,它依然保留同樣的功能行爲(按它的話,按鈕會陷下去,點擊事件處理函數也會象以前一樣觸發):

step108.png

我們也可以使用形狀控件(象下面這樣的Ellipse控件)來在按鈕裏面創建自定義的矢量圖像:

step21.png

注意上面我是怎麼使用一個偏移RadialGradientBrush來加一個非常好看的反射式光澤來填充Ellipse控件的:

step22.png

我們甚至可以搞些古怪,在按鈕內嵌入可交互的象日曆這樣的控件:

step23.png

在上面的例子中,日曆控件是完全可以交互的,意味着終端用戶可以前後翻月曆,在日曆裏選擇一個日期,然後按其中的按鈕,觸發Click事件處理函數:(注:我不清楚這是否會是一個好的用戶體驗,但它確實展示了你所能做之靈活性!)

step24.png

我上面概述的這些類型的內容定製場景不僅對按鈕控件有效,同樣地對其他繼承自ContentControl基類的其他控件也工作。

使用控件模板定製控件

爲Silverlight 和 WPF所用的控件模型,所允許之定製,遠遠超出控件內部的內容。它還允許你用你想要的任何東西完全替換控件的視覺樹(visual tree),同時還保持控件的同樣行爲。

例如,我們不想要我們的按鈕擁有一個默認的長方形的按鈕的外觀,而是要它們有一個象下面這樣的自定義的圓形按鈕外觀:

step111.png

我們可以這麼做,在App.xaml文件中創建一個“RoundButton”樣式,在其中,我們將改寫按鈕的Template屬性,提供一個內含一個Ellipse控件和一個TextBlock的ControlTemplate來替換按鈕的默認長方形外觀:

step110.png

然後我們可以讓<Button>引用這個Style資源來使用這個“RoundButton”的觀感:

step112.png

在控件模板中融入內容

你也許會注意到一件事情,在上面的“RoundButton”控件模板中,按鈕的大小,以及顯示在其中的內容,都是寫死的(總是“Push Me!”)。

好消息是,WPF 和 Silverlight也能讓我們對這些設置進行定製。我們可以在控件模板中通過使用 {TemplateBinding ControlProperty} 的標識擴展句法 (markup extension syntax) 來綁定到控件的屬性來實現。這允許我們的控件模板隨着外部開發人員設置在控件的屬性而改變:

step113.png

注意上面,不是加 <TextBlock>控件來顯示內容,而是使用<ContentPresenter>控件。那會允許我們不光讓按鈕顯示文字字符串,而且可以顯示任何自定義的內容(就象我們在本教程早先時候做的那樣)。

然後,我們可以在下面的三個按鈕上使用上面的Style(每個按鈕都有不同的內容和屬性設置):

step114.png

上面的按鈕然後就會象下面這樣顯示(對了,縮小的日曆控件還支持翻頁和日期選擇!):

step115.png

如果我們想進一步,我們還可以往ControlTemplate中加故事板動畫(來處理象“hover(懸浮)”,"focus(得到焦點)","pushed(按下)"這樣的按鈕狀態)。這個能力允許我們創建非常優美的用戶交互場景,同時還能促成HTML中不能實現的場景。

在應用中操作控件的開發人員可以對所有這些樣式和控件交互定製保持一無所知,他們還可以依然如故地處理控件的事件和操作控件的對象模型,而讓設計師另外使用樣式和模板對控件的觀感進行精雕細琢和定製。

對我們的Digg應用進行潤色(Polishing up)

至此,我們討論了控件模板工作原理的一些基礎知識,讓我們來在幾個地方用它們來給我們的Digg應用的UI加些點綴。

目前,應用中一個明顯需要一些加工的地方是我們用戶控件的“Close”(關閉)按鈕:

step116.png

好消息是,這對我們(或者跟我們協作的設計師)來說很容易修正。我們可以在App.xaml文件中的 "CloseButton" 樣式中加一個ControlTemplate,加一些自定義的矢量形狀來提供一個比較好看的關閉按鈕(注:比我更稱職的設計師大概還會加懸浮和動畫行爲到矢量圖像形狀上去,讓它更好看些):

step118.png

重新運行我們的應用的話,按鈕看上去象下圖:

step117.png

我們應用中我認爲應該潤色的第二個地方是ListBox的外圈界面。如果你仔細看的話,你可以看到Beta1版本中的ListBox有一個嵌套的邊框,作爲它的默認外觀(注:我們還沒最後決定要發佈的默認皮膚,所以在最終版之前,這非常有可能會改變):

step119.png

我們可以除去這個,通過定製它的控件模板來給與ListBox一個平的邊框(flat border)。下面是一個以自定義模板樣式化了的,有平的邊框的ListBox :

step120.png

注意我們是如何除去ListBox的邊框控件的,我們只用了Silverlight中的<ScrollViewer>控件(該控件允許其中任何內容做捲動),將一個<ItemsPresenter/>控件嵌入其中,該控件負責ListBox中實際條目的顯示(它使用了我們在第四部分中創建的 <DataTemplate> 來顯示這些條目)。

下面是它現在給與我們的List更爲平直的外觀:

step121.png

比較酷的是,爲了做這些觀感的改動,我們用更改應用中的任何代碼,或者修改實際的控件的XAML標識。這種代碼、設計的分離能在Silverlight和WPF應用中促進開發人員和設計師之間的流暢的工作流程。Expression Blend 和所有的 Expression Studio產品把這些控件設計功能提到了又一個高度,將提供方便這種定製的豐富的設計師工具集。

下一步

至此,我們完成了Digg應用在Silverlight中的實現。

最後一步,是實現一個桌面應用的版本。好消息是,做起來並不難,因爲Silverlight是完整WPF和.NET框架的一個子集,所以概念,代碼和內容都很容易轉移過去的。

想看是如何實現的,讓我們跳到下一個教程:《使用WPF創建一個Digg桌面應用》。

發佈了72 篇原創文章 · 獲贊 2 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章