對我們的Digg應用進行潤色(Polishing up)
至此,我們討論了控件模板工作原理的一些基礎知識,讓我們來在幾個地方用它們來給我們的Digg應用的UI加些點綴。
目前,應用中一個明顯需要一些加工的地方是我們用戶控件的“Close”(關閉)按鈕:
好消息是,這對我們(或者跟我們協(xié)作的設計師)來說很容易修正。我們可以在App.xaml文件中的 "CloseButton" 樣式中加一個ControlTemplate,加一些自定義的矢量形狀來提供一個比較好看的關閉按鈕(注:比我更稱職的設計師大概還會加懸浮和動畫行為到矢量圖像形狀上去,讓它更好看些):
點擊放大
重新運行我們的應用的話,按鈕看上去象下圖:
我們應用中我認為應該潤色的第二個地方是ListBox的外圈界面。如果你仔細看的話,你可以看到Beta1版本中的ListBox有一個嵌套的邊框,作為它的默認外觀(注:我們還沒最后決定要發(fā)布的默認皮膚,所以在最終版之前,這非常有可能會改變):
我們可以除去這個,通過定制它的控件模板來給與ListBox一個平的邊框(flat border)。下面是一個以自定義模板樣式化了的,有平的邊框的ListBox :
注意我們是如何除去ListBox的邊框控件的,我們只用了Silverlight中的<ScrollViewer>控件(該控件允許其中任何內容做卷動),將一個<ItemsPresenter/>控件嵌入其中,該控件負責ListBox中實際條目的顯示(它使用了我們在第四部分中創(chuàng)建的 <DataTemplate> 來顯示這些條目)。
下面是它現(xiàn)在給與我們的List更為平直的外觀:
比較酷的是,為了做這些觀感的改動,我們不用更改應用中的任何代碼,或者修改實際的控件的XAML標識。這種代碼、設計的分離能在Silverlight和WPF應用中促進開發(fā)人員和設計師之間的流暢的工作流程。Expression Blend 和所有的 Expression Studio產品把這些控件設計功能提到了又一個高度,將提供方便這種定制的豐富的設計師工具集。
下一步
至此,我們完成了Digg應用在Silverlight中的實現(xiàn)。
最后一步,是實現(xiàn)一個桌面應用的版本。好消息是,做起來并不難,因為Silverlight是完整WPF和.NET框架的一個子集,所以概念,代碼和內容都很容易轉移過去的。
想看是如何實現(xiàn)的,讓我們跳到下一個教程:《使用WPF創(chuàng)建一個Digg桌面應用》。
本文鏈接:http://www.95time.cn/tech/multimedia/2008/5392.asp
出處:Scott Guthrie 博客中文版
責任編輯:bluehearts
上一頁 使用控件模板定制控件的觀感 [3] 下一頁
◎進入論壇RIA設計與應用版塊參加討論
|