上一篇對(duì)Blend 3開(kāi)發(fā)界面進(jìn)行了快速入門(mén)介紹，本篇將基于Blend 3介紹Silverlight控件。對(duì)于微軟開(kāi)發(fā)工具熟悉的朋友，相信您很快就熟悉Blend的開(kāi)發(fā)界面和控件。 XAML概述 Silverlight的控件繪制是由XAML語(yǔ)言進(jìn)行支持的。什么是XAML語(yǔ)言？ 簡(jiǎn)單的說(shuō)，XAML（Extensible Application Markup Language ）是一款基于XML的描述性語(yǔ)言，中文也叫做可擴(kuò)展應(yīng)用程序標(biāo)記語(yǔ)言。 該語(yǔ)言是由微軟開(kāi)發(fā)創(chuàng)建，主要用于構(gòu)建WPF和Silverlight應(yīng)用程序用戶界面。XAML是Silverlight用戶界面設(shè)計(jì)的基礎(chǔ)，使用XAML可以定義Silverlight對(duì)象以及屬性，相對(duì)于后臺(tái)語(yǔ)言定義控件來(lái)說(shuō)，XAML提供了非常簡(jiǎn)潔的方式聲明控件，有時(shí)僅需一句代碼就可以完成一個(gè)控件的構(gòu)造。不僅如此，XAML還提供了一種便于擴(kuò)展和定位的語(yǔ)法來(lái)定義和程序邏輯分離的用戶界面，而這種實(shí)現(xiàn)方式和ASP.NET中的"代碼后置"模型非常類(lèi)似。這樣有效的分離了設(shè)計(jì)人員和開(kāi)發(fā)人員，在同一個(gè)項(xiàng)目中，對(duì)其進(jìn)行分工前臺(tái)程序界面設(shè)計(jì)和后臺(tái)邏輯設(shè)計(jì)，使項(xiàng)目到達(dá)協(xié)作開(kāi)發(fā)的目的。所以說(shuō)，XAML是Silverlight用戶界面設(shè)計(jì)的基礎(chǔ)，作為Silverlight設(shè)計(jì)人員，應(yīng)該對(duì)XAML語(yǔ)言熟練掌握，由于本系列是介紹Blend，這里對(duì)XAML語(yǔ)言不再進(jìn)行細(xì)述，如果需要系統(tǒng)化學(xué)習(xí)XAML語(yǔ)言，請(qǐng)?jiān)L問(wèn)本文后提供的參考學(xué)習(xí)資源。 對(duì)于XAML了一定的認(rèn)識(shí)，下面進(jìn)入本文正題，Silverlight控件入門(mén)。對(duì)于Silverlight控件，微軟進(jìn)行了簡(jiǎn)單分類(lèi)， 第一類(lèi)： Layout Controls（布局控件) 第二類(lèi)： Item?Controls （項(xiàng)目控件) 第三類(lèi)： User Interaction Controls（用戶交互控件) ? 在隨后的幾篇中我將介紹這些控件，首先我將介紹 布局控件，從名字上可以看出是控制用戶界面總體格式的一類(lèi)控件。通過(guò)這類(lèi)控件，可以很輕松的對(duì)用戶界面進(jìn)行編排，在這類(lèi)控件中，也可以放置其他的項(xiàng)目控件和用戶交互控件，達(dá)到控制其位置的目的。如果您有HTML的設(shè)計(jì)經(jīng)驗(yàn)，也可以簡(jiǎn)單的把布局控件理解為HTML中的Table標(biāo)簽。在任何一個(gè)Silverlight或者WPF項(xiàng)目中，都離不開(kāi)布局控件，這里我將細(xì)述布局控件。 在Silverlight標(biāo)準(zhǔn)控件中，包括以下四種布局控件： Grid控件 Canvas控件? StackPanel控件 Border控件 由于該控件在Silverlight和WPF項(xiàng)目開(kāi)發(fā)中占有非常重要地位，所以，我將詳細(xì)介紹Grid控件的使用和常用屬性： Grid控件 Grid控件可以認(rèn)為是Silverlight項(xiàng)目設(shè)計(jì)中，使用的最多的布局控件，在使用Blend或者Visual Studio 2008 SP1創(chuàng)建Silverlight項(xiàng)目的時(shí)候，默認(rèn)控件代碼中就包含了Grid. 1?<UserControl
2?????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3?????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4?????x:Class="SilverlightBlendDemo.MainPage"
5?????Width="640"?Height="480">
6?
7?????<Grid?x:Name="LayoutRoot"?Background="White"/>
8?</UserControl> 在我個(gè)人使用的經(jīng)驗(yàn)中理解，Grid控件和HTML的Table是最近似的。設(shè)計(jì)人員可以根據(jù)需要，自定義設(shè)置行數(shù)和列數(shù)，放置不同的內(nèi)容和控件到每行每列中。Blend對(duì)Grid的設(shè)計(jì)支持非常的直接和簡(jiǎn)單。這里我還是用上一篇?jiǎng)?chuàng)建的例程項(xiàng)目，SilverlightBlendDemo，如果你沒(méi)有該項(xiàng)目，可以在本文后面下載，或者按照上一篇介紹方法創(chuàng)建。 在Blend中創(chuàng)建行和列，只需要將鼠標(biāo)放在界面窗口上深藍(lán)色帶上，就可以看到黃色的分割線，鼠標(biāo)點(diǎn)擊后，行和列即可產(chǎn)生。 按照上面說(shuō)的方法，我將創(chuàng)建一個(gè)2行2列的效果如下： 創(chuàng)建完成后，會(huì)以藍(lán)色現(xiàn)條顯示在設(shè)計(jì)界面，而XAML代碼則會(huì)自動(dòng)生成， ?1?????<Grid?x:Name="LayoutRoot"?Background="White">
?2?????????<Grid.ColumnDefinitions>
?3?????????????<ColumnDefinition?Width="0.505*"/>
?4?????????????<ColumnDefinition?Width="0.495*"/>
?5?????????</Grid.ColumnDefinitions>
?6?????????<Grid.RowDefinitions>
?7?????????????<RowDefinition?Height="0.479*"/>
?8?????????????<RowDefinition?Height="0.521*"/>
?9?????????</Grid.RowDefinitions>
10?????</Grid> 這樣看來(lái)Grid設(shè)計(jì)相當(dāng)簡(jiǎn)單，在布局設(shè)計(jì)過(guò)程中，為了方便那些沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)的開(kāi)發(fā)人員，Blend提供了兩個(gè)布局設(shè)計(jì)模式： -?Canvas界面設(shè)計(jì)模式，該設(shè)計(jì)模式是默認(rèn)設(shè)計(jì)模式， -?Grid界面設(shè)計(jì)模式 點(diǎn)擊該按鈕，會(huì)自動(dòng)切換界面設(shè)計(jì)模式 在上圖中可以看到，在Grid Layout Mode下，每行和每列前都會(huì)顯示一個(gè)“鎖”狀圖標(biāo)，默認(rèn)是非鎖定狀態(tài)，點(diǎn)擊后，會(huì)鎖定該行或者列，從代碼中可以看出明顯變化。 當(dāng)我點(diǎn)擊鎖定一列，代碼將變化為： ?1?<Grid?x:Name="LayoutRoot"?Background="White">
?2?????????<Grid.ColumnDefinitions>
?3?????????????<ColumnDefinition?Width="323"/>
?4?????????????<ColumnDefinition/>
?5?????????</Grid.ColumnDefinitions>
?6?????????<Grid.RowDefinitions>
?7?????????????<RowDefinition?Height="0.479*"/>
?8?????????????<RowDefinition?Height="0.521*"/>
?9?????????</Grid.RowDefinitions>
10?</Grid> 這里可以看到ColumnDefinition的寬度變成了固定數(shù)字，后面不再有“*”號(hào)，這樣也就表明，該列不再根據(jù)內(nèi)容的改變而改變，一直以固定寬度顯示。相反，如果在數(shù)值后，有“*”號(hào)，該行或者列寬度將會(huì)跟著內(nèi)容的改變而改變。 再次點(diǎn)擊鎖定的列，會(huì)顯示自動(dòng)獲取寬度狀態(tài)圖標(biāo)： 代碼則自動(dòng)改變?yōu)?span style="color:#ff0000;">Width="Auto"： ?1?<Grid?x:Name="LayoutRoot"?Background="White">
?2?????????<Grid.ColumnDefinitions>
?3?????????????<ColumnDefinition?Width="Auto"?MinWidth="323"/>
?4?????????????<ColumnDefinition/>
?5?????????</Grid.ColumnDefinitions>
?6?????????<Grid.RowDefinitions>
?7?????????????<RowDefinition?Height="0.479*"/>
?8?????????????<RowDefinition?Height="0.521*"/>
?9?????????</Grid.RowDefinitions>
10?</Grid> 根據(jù)上文所述，Grid如同HTML中的Table，也就是說(shuō)我們可以按照使用Table的方法，設(shè)置Grid的內(nèi)容。 例如，我想放置四個(gè)TextBlock控件在Grid中，首先點(diǎn)擊左邊工具欄菜單 然后在設(shè)計(jì)界面進(jìn)行簡(jiǎn)單的繪制，創(chuàng)建四個(gè)TextBlock控件： 選中任一個(gè)TextBlock控件，在右邊“properties”屬性欄則會(huì)顯示出該控件的所有屬性，這里我們將關(guān)注Layout欄屬性 這里我們可以看出，Blend已經(jīng)自動(dòng)將控件繪制到相對(duì)應(yīng)的列和行中。通過(guò)該屬性設(shè)置，可以輕松的控制控件在Grid中的位置。這里我們看一下后臺(tái)代碼： ?1?<Grid?x:Name="LayoutRoot"?Background="White">
?2?????????<Grid.ColumnDefinitions>
?3?????????????<ColumnDefinition?Width="0.505*"/>
?4?????????????<ColumnDefinition?Width="0.495*"/>
?5?????????</Grid.ColumnDefinitions>
?6?????????<Grid.RowDefinitions>
?7?????????????<RowDefinition?Height="0.479*"/>
?8?????????????<RowDefinition?Height="0.521*"/>
?9?????????</Grid.RowDefinitions>
10?????????<TextBlock?Margin="46,71,73,90"?Text="第0行，第0列"?TextWrapping="Wrap"?FontSize="18.667"/>
11?????????<TextBlock?Margin="40,71,57,90"?Grid.Column="1"?Text="第0行，第1列"?TextWrapping="Wrap"?FontSize="18.667"/>
12?????????<TextBlock?Margin="46,73,73,110"?Grid.Row="1"?Text="第1行，第0列"?TextWrapping="Wrap"?FontSize="18.667"/>
13?????????<TextBlock?Margin="40,73,79,110"?Grid.Column="1"?Grid.Row="1"?Text="第1行，第1列"?TextWrapping="Wrap"?FontSize="18.667"/>
14?</Grid> 在以上代碼中可以看到，Blend省略了一些布局代碼，如果在布局控件中，如果控件不填寫(xiě)Grid.Column,Grid.Row,則默認(rèn)值為0.所以說(shuō)，第一個(gè)TextBlock的位置被默認(rèn)為： <TextBlock?Margin="46,71,73,90"?Text="第0行，第0列" Grid.Row="0"?Grid.Column="0"?TextWrapping="Wrap"?FontSize="18.667"/> 第二個(gè)Textblock位置則為： <TextBlock?Margin="40,71,57,90" ?Grid.Row="0"?Grid.Column="1"?Text="第0行，第1列"?TextWrapping="Wrap"?FontSize="18.667"/>
第三個(gè)TextBlock位置則為： <TextBlock?Margin="46,73,73,110"?Grid.Row="1" Grid.Column="0"?Text="第1行，第0列"?TextWrapping="Wrap"?FontSize="18.667"/> 第四個(gè)TextBlock位置代碼不變，是完整的。 也就是說(shuō)，從Xaml代碼部分，我們可以通過(guò)Grid.Column,Grid.Row兩個(gè)屬性控制控件的位置。 ? 對(duì)于Grid的布局，上面的方法是最通用而且最簡(jiǎn)單的。 但是在項(xiàng)目中，我們還會(huì)使用一些常見(jiàn)屬性，配合Grid控制布局，例如Margin，Horizontal Alignment，Vertical Alignment以及Group方法等。 熟悉CSS的設(shè)計(jì)人員，應(yīng)該知道Margin的作用，主要是控制控件內(nèi)部對(duì)應(yīng)布局控件的邊距的。該屬性的賦值方法在CSS中有詳解，這里不再贅述，簡(jiǎn)單的賦值，Margin = "0,1,2,3",表示： 對(duì)布局控件左邊的距離為0 對(duì)布局控件的頂端距離為1 對(duì)布局控件的右邊距離為2 對(duì)布局控件的下端距離為3 其中0，1，2，3是隨意設(shè)置的數(shù)值，這樣就控制了控件在布局控件中的具體位置。 ? 對(duì)于Horizontal Alignment，Vertical Alignment屬性，也是CSS中出現(xiàn)過(guò)的屬性，簡(jiǎn)單的說(shuō)是對(duì)齊屬性，水平對(duì)齊和垂直對(duì)齊。 這兩個(gè)屬性默認(rèn)有四個(gè)值： 左邊/頂端對(duì)齊 中間對(duì)齊 右邊/下端對(duì)齊 拉伸 ? 在上例的代碼中，我們可以看到Margin屬性都在改變，相對(duì)Grid對(duì)應(yīng)行和列的位置都有不同，你可以嘗試修改一下，相關(guān)數(shù)值，查看其位置更改情況。 <TextBlock?Margin="46,71,73,90"?Text="第0行，第0列" Grid.Row="0"?Grid.Column="0"?TextWrapping="Wrap"?FontSize="18.667"/> <TextBlock?Margin="40,71,57,90" ?Grid.Row="0"?Grid.Column="1"?Text="第0行，第1列"?TextWrapping="Wrap"?FontSize="18.667"/> <TextBlock?Margin="46,73,73,110"?Grid.Row="1" Grid.Column="0"?Text="第1行，第0列"?TextWrapping="Wrap"?FontSize="18.667"/> <TextBlock?Margin="40,73,79,110"?Grid.Column="1"?Grid.Row="1"?Text="第1行，第1列"?TextWrapping="Wrap"?FontSize="18.667"/> 在Blend中控制Margin，是點(diǎn)擊以下圖標(biāo)，然后在Properties屬性欄目中可以修改Margin數(shù)值。 在屬性欄可以修改其數(shù)值： 而對(duì)于Horizontal Alignment，Vertical Alignment屬性，同樣可以通過(guò)屬性欄進(jìn)行修改， 修改后，在Xaml代碼中也會(huì)自動(dòng)更新修改： <TextBlock?Margin="40,73,79,110"?Grid.Column="1"?Grid.Row="1"?Text="第1行，第1列"?TextWrapping="Wrap"?FontSize="18.667" HorizontalAlignment="Left"/> 在開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)面對(duì)不同分辨率的情況下，項(xiàng)目布局應(yīng)該隨之改變，自適應(yīng)客戶端的終端。Grid控件支持，設(shè)置“Auto”自動(dòng)屬性，該Grid將隨著內(nèi)部控件內(nèi)容的增加而改變，這樣有利于動(dòng)態(tài)適應(yīng)控件尺寸。說(shuō)到這里，有些人可能對(duì)布局控件的尺寸設(shè)計(jì)有一些困惑，這里我詳細(xì)描述一下，Grid的尺寸設(shè)置策略。默認(rèn)情況下，Grid支持三種尺寸設(shè)置策略， 第一種，絕對(duì)數(shù)值尺寸設(shè)置； 該設(shè)置是最簡(jiǎn)單的，但是是最不靈活的。例如上面例程代碼中，可以直接設(shè)置列寬度為絕對(duì)數(shù)值： ????????<Grid.ColumnDefinitions>
?????????????<ColumnDefinition?Width="100"/>
?????????????<ColumnDefinition?Width="50"/>
?????????</Grid.ColumnDefinitions> ? 第二種，自動(dòng)數(shù)值尺寸設(shè)置； 該設(shè)置對(duì)寬度和高度賦值“Auto”，該Grid尺寸將會(huì)隨著內(nèi)部?jī)?nèi)容的增加而增加，這個(gè)設(shè)置方法是最常用的一種； ????????<Grid.ColumnDefinitions>
?????????????<ColumnDefinition?Width="Auto"/>
?????????</Grid.ColumnDefinitions> ? 第三種，比例數(shù)值尺寸設(shè)置； 該設(shè)置對(duì)寬度和高度賦值"*"，或者"2*",Grid將按照設(shè)置的比例倍數(shù)進(jìn)行分割布局； ????????<Grid.ColumnDefinitions>
?????????????<ColumnDefinition?Width="*"/>
?????????????<ColumnDefinition?Width="3*"/>
?????????</Grid.ColumnDefinitions> 以上設(shè)置，將把Grid劃分為兩列，第二列寬度永遠(yuǎn)是第一列寬度的3倍。第一列永遠(yuǎn)是第二列的1/3寬度。 在實(shí)際項(xiàng)目中，如果需要復(fù)雜的項(xiàng)目布局，可以將以上三種尺寸設(shè)置方法綜合應(yīng)用，達(dá)到最靈活的應(yīng)用效果。 另外需要留意的是Grid支持無(wú)限的嵌入，也就是可以嵌套無(wú)限個(gè)布局控件，這樣也提供了非常靈活的布局方式，在Grid中嵌套不同控件。Silverlight和WPF項(xiàng)目設(shè)計(jì)中，可以使用Group功能，將控件嵌套在同一個(gè)布局下，方便開(kāi)發(fā)中控件的布局控制。 以上對(duì)Grid的描述，是Grid控件在開(kāi)發(fā)中常用的功能和屬性，如果想要靈活運(yùn)用，還需要更多的實(shí)踐，大家可以按照本文介紹的步驟和方法，多練習(xí)幾次，就能熟練掌握Grid布局控件。

總結(jié)

以上是生活随笔為你收集整理的Expression Blend实例中文教程(3) - 布局控件快速入门Grid的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。