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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。