Windows 8開發中的UI布局

來源:互聯網
上載者:User

這篇博文將給大家講解在Windows 8開發中的UI布局方面的知識。

布局                                                                                                                                                                                        

進行過開發的朋友都知道,布局系統是進行UI開發最基本的東西,也是開發出使用者體驗不錯的產品的必備知識。在Win8開發中,為了布局UI控制項,必須將控制項放置在Panel或者其它容器中,XAML架構提供了多種Panel控制項,比如:Canvas,StackPanel和Grid,這些就是容器,你可以將你的UI控制項放置其中。

絕對布局                                                                                                                                                                                

在XAML架構中,提供了Canvas來支援絕對布局。絕對布局不會考慮到螢幕的大小,對於螢幕尺寸多樣化的今天,這種布局的缺點盡顯。你需要為不同的螢幕尺寸提供不同的Page頁,或者提供放大機制。

動態布局                                                                                                                                                                                

在動態布局中,不管螢幕的尺寸如何變化,UI控制項總是能正確的出現在螢幕合適的位置。為了設定隨螢幕比例而變化的控制項大小,需要為Height和Width屬性賦予指定的值,以下幾點是在動態布局中需要設定的幾項:

  1. 設定Height和Width屬性值,或者設定為自動變化大小的。如果在Grid布局中放置控制項,控制項會填滿它所在的單元。在StackPanel和Grid布局中,是支援自動大小的。
  2. 對於包含字型的控制項,移除Height和Width屬性,而是設定MinHeight和MinWidth屬性值,這樣設定是為了在縮小時,而導致的字型出現不可讀的情況。當縮小比例太大時,會出現字型緊湊在一起,而導致字型無法閱讀的情況。
  3. 當在Grid布局中設定RowDefinition和ColumnDefinition屬性值時,請使用相對的Height和Width值。例如:指定一列是另一列的5倍大小時,使用“*”運算式,或者“5*”Widht值來設定ColumnDefinition屬性值。

Auto和“*”大小                                                                                                                                                                

當設定為auto的時候,此時允許控制項的大小去適應它們的內容,即使是內容大小變化了。“*”總是用來設定Grid布局中的行和列的大小。在XAML中,它的運算式為“*”或者"n*"。比如,一個Grid布局有4列,你可能會按照以下表格的情況進行布局:

Column_1 Auto 此時,這列的大小會隨它的布局的內容的變化而變化
Column_2 * 當第一列計算完了後,之後的所有列分剩下的寬度,這列會是第四列的一半大小
Column_3 Auto 同第一列
Column_4 * 當auto列計算完了後,這列獲得剩下的所有空間,這列會是第二列的2倍大小

 

 

 

 

 

 

Canvas                                                                                                                                                                               

以下是一些布局例子:

View Code

1 <Canvas>2         <Rectangle Canvas.Left="200"3                    Canvas.Top="100"4                    Fill="Red"5                    Width="350"6                    Height="500"/>7     </Canvas>

Canvas.Left="200"表示距離左邊距200pixel;

Canvas.Top="100"表示距離上邊距100pixel;

StackPanel                                                                                                                                                                       

StackPanel是一個簡單的布局管理。在StackPanel中的子項目都是按照豎直(預設)的,佔一行的形式進行排列。你可以使用Orientation屬性來改變子項目的排列方向。

View Code

1 <StackPanel Margin="20" Orientation="Horizontal">2         <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>3         <Rectangle Fill="Blue" Width="100" Height="100" Margin="10"/>4         <Rectangle Fill="Yellow" Width="100" Height="100" Margin="10"/>5         <Rectangle Fill="Gray" Width="100" Height="100" Margin="10"/>6         <Rectangle Fill="AliceBlue" Width="100" Height="100" Margin="10"/>7     </StackPanel>

Grid                                                                                                                                                                               

Grid支援將控制項安排在多行,多列的布局中。你可以通過使用RowDefinitions和ColumnDefinitions屬性來定義Grid的行和列。同時,你可以使用Grid.Column和Grid.Row屬性來將控制項布局在指定的行和列中。控制項也可以通過使用Grid.RowSpan和Grid.ColumnSpan屬性來佔用多行或者多列。

View Code

 1 <Grid> 2         <Grid.RowDefinitions> 3             <RowDefinition Height="auto"/> 4             <RowDefinition /> 5             <RowDefinition Height="auto"/> 6         </Grid.RowDefinitions> 7  8         <Grid.ColumnDefinitions> 9             <ColumnDefinition Width="*"/>10             <ColumnDefinition Width="*"/>11         </Grid.ColumnDefinitions>12         13         <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0"/>14         <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2"/>15         16         <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0"/>17         <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2"/>18     </Grid>

 

 

 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.