Silverlight布局系統(tǒng)正確優(yōu)化方法
Silverlight的開(kāi)發(fā)工具的使用之所以能被廣大開(kāi)發(fā)者們所接受,除了其功能的強(qiáng)大之外,還有一點(diǎn)就是應(yīng)用的靈活性。它的各種特點(diǎn)決定了其在這一領(lǐng)域中的領(lǐng)先地位。在這里我們將會(huì)為大家介紹一下Silverlight布局系統(tǒng)的優(yōu)化方法。#t#
我對(duì)Silverlight布局系統(tǒng)一直感到不滿(mǎn),原因無(wú)他,太過(guò)羅嗦?tīng)?。它靈活是足夠靈活了,但對(duì)于界面布局并沒(méi)有提供一個(gè)簡(jiǎn)潔的表達(dá)機(jī)制,使得即使非常常見(jiàn)的界面也總是生成一大坨又臭又長(zhǎng)的XAML,寫(xiě)得累,看的人更累。特別是和競(jìng)爭(zhēng)對(duì)手Flex的布局機(jī)制比較,F(xiàn)lex可以說(shuō)既靈活又簡(jiǎn)單,Silverlight則是既靈活又麻煩。
Silverlight里面常用的布局容器幾乎都可以挑挑毛?。?/p>
Canvas:只支持絕對(duì)坐標(biāo)布局使得Canvas在應(yīng)用程序布局方面純粹是個(gè)雞肋,要求稍微靈活一點(diǎn)的界面就派不上用場(chǎng)了。Flex也有一個(gè)Canvas,不過(guò)Flex Canvas支持左/中/右對(duì)齊,并且可以指定絕對(duì)寬度或相對(duì)寬度,所以Flex Canvas比Silverlight Canvas要好用得多,在各種界面布局里也是常見(jiàn)的選擇。
StackPanel:StackPanel不支持Grid的百分比布局是很大的遺憾。很多時(shí)候,我只需要單行或單列布局,但控件則需要絕對(duì)/相對(duì)混合布局,StackPanel不能提供這種靈活性。這使得我不得不使用語(yǔ)法更加羅嗦的Grid。
Grid:如果和GridSplitter聯(lián)合做多面板布局的話(huà),99%的情況下需要關(guān)心的無(wú)非是左右或上下兩個(gè)面板,而Grid和GridSplitter需要指定一大堆屬性才能正常工作,增加了無(wú)謂的負(fù)擔(dān)。
在忍受這些毛病很長(zhǎng)時(shí)間以后,我終于決定拋開(kāi)Silverlight的默認(rèn)布局容器,自己寫(xiě)一套更加方便的自定義Silverlight布局系統(tǒng)管理器。你可以猜到,我寫(xiě)的這套容器很大程度上參考了Flex,甚至大部分類(lèi)的命名都向Flex看齊——比如HBox、VBox。和Silverlight內(nèi)置類(lèi)沖突的則換個(gè)名字,比如FlexCanvas模擬了Flex的Canvas組件,HSplitBox相當(dāng)于Flex HDevideBox,HeaderBox相當(dāng)于Flex Panel。
編寫(xiě)自定義容器實(shí)際上比原先想象的要簡(jiǎn)單,無(wú)非是實(shí)現(xiàn)MeasureOverride/ArrangeOverride兩個(gè)方法而已。只是要考慮到各種布局情況需要仔細(xì)計(jì)算。另外一點(diǎn)不滿(mǎn)的地方是,創(chuàng)建Dependency Property的語(yǔ)法純粹是折磨人的工作。
這里僅舉一個(gè)常見(jiàn)的Silverlight布局系統(tǒng)例子,你可以比較一下用自定義布局可以比默認(rèn)的布局系統(tǒng)節(jié)省多少代碼。
例子: 我們都很熟悉的瀏覽器地址欄,文本框隨容器自動(dòng)擴(kuò)展。
用Silverlight布局:
- < Grid>
- < Grid.ColumnDefinations>
- < ColumnDefination Width="Auto" />
- < ColumnDefination Width="*" />
- < ColumnDefination Width="Auto" />
- < /Grid.ColumnDefinations>
- < TextBlock Grid.Column="0"
Text="Address" />- < TextBox Grid.Column="1" />
- < Button Grid.Column="2"
Content="Go" />- < /Grid>
自定義布局:
- < yh:HBox>
- < TextBlock Text="Address" />
- < TextBox yh:Box.Width="100%" />
- < Button Content="Go" />
- < /yh:HBox>
Silverlight布局系統(tǒng)的介紹就到這里,希望對(duì)大家有些幫助。