C# Windows 8,Windows Phone 8 WP8,使用程式碼動態產生Grid。

  • 1762
  • 0
  • C#
  • 2015-06-10

一般我們在撰寫Windows Store App 或是 Windows Phone App時很常使用Grid來排版應用程式的畫面,因為Grid可以明確地將應用程式畫面切割,如此一來我們可以得到較美觀的畫面,但是若我們在撰寫APP時需要顯示許多不固定個數或是不固定的資料呈現方式時,該怎麼辦呢?!這時就可以透過動態產生Grid來排版。

本篇文章將引導您使用程式碼動態產生Grid。

一般我們在撰寫Windows Store App 或是 Windows Phone App時很常使用Grid來排版應用程式的畫面,因為Grid可以明確地將應用程式畫面切割,如此一來我們可以得到較美觀的畫面,但是若我們在撰寫APP時需要顯示許多不固定個數或是不固定的資料呈現方式時,該怎麼辦呢?!這時就可以透過動態產生Grid來排版。

 

本篇文章將引導您使用程式碼動態產生Grid。

 

假設我們想要排版排成像這個樣子:

 

未命名

 

首先這是我們常在Xaml中排版所用的方法

 

   1:  <Grid x:Name="LayoutRoot" Background="Transparent">
   2:      <Grid.RowDefinitions>
   3:          <RowDefinition Height="Auto"/>
   4:          <RowDefinition Height="2*"/>
   5:          <RowDefinition Height="3*"/>
   6:          <RowDefinition Height="200"/>
   7:      </Grid.RowDefinitions>
   8:      <Grid x:Name="Layout_Level1" Grid.Row="0">
   9:          <Grid.ColumnDefinitions>
  10:              <ColumnDefinition Width="*"/>
  11:              <ColumnDefinition Width="*"/>
  12:          </Grid.ColumnDefinitions>
  13:          <StackPanel x:Name="Level1_A" Grid.Column="0"/>
  14:          <StackPanel x:Name="Level1_B" Grid.Column="1"/>
  15:      </Grid>
  16:      <StackPanel x:Name="Layout_Level2" Grid.Row="1" />
  17:      <StackPanel x:Name="Layout_Level3" Grid.Row="2" />
  18:      <StackPanel x:Name="Layout_Level4" Grid.Row="3" />
  19:  </Grid>

 

在C#產生動態程式碼時,有一點非常重要,因為我們會指定某個控制項的Grid.row或Grid.Column,

我們必須先Set.Row之後再把開控制將加入倒Grid底下,在C#中應該這樣寫 :

 

   1:  Grid Layout_Root=new Grid();
   2:  Layout_Root.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1,GridUnitType.Auto) });//切割Grid
   3:  Layout_Root.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(2, GridUnitType.Star) });//切割Grid
   4:  Layout_Root.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(3,GridUnitType.Star) });//切割Grid
   5:  Layout_Root.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(200, GridUnitType.Pixel) });//切割Grid
   6:   
   7:  Grid Layout_Level1=new Grid();
   8:  Layout_Level1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1,GridUnitType.Star) });//切割Grid
   9:  Layout_Level1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });//切割Grid
  10:   
  11:  StackPanel Level1_A=new StackPanel();
  12:  StackPanel Level1_B=new StackPanel();
  13:   
  14:  Grid.SetColumn(Level1_A,0);//設定Grid.Column屬性
  15:  Grid.SetColumn(Level1_A,1);//設定Grid.Column屬性
  16:  Layout_Level1.Children.Add(Level1_A);//將Level1_A加入至Layout_Level1底下
  17:  Layout_Level1.Children.Add(Level1_B);//將Level1_B加入至Layout_Level1底下
  18:   
  19:  StackPanel Layout_Level2=new StackPanel();
  20:  StackPanel Layout_Level3=new StackPanel();
  21:  StackPanel Layout_Level4=new StackPanel();
  22:   
  23:  Grid.SetRow(Layout_Level1,0);//設定Grid.Row屬性
  24:  Grid.SetRow(Layout_Level2,1);//設定Grid.Row屬性
  25:  Grid.SetRow(Layout_Level3,2);//設定Grid.Row屬性
  26:  Grid.SetRow(Layout_Level4,3);//設定Grid.Row屬性
  27:   
  28:  Layout_Root.Children.Add(Layout_Level1);//將Layout_Level1加入至Layout_Root底下
  29:  Layout_Root.Children.Add(Layout_Level2);//將Layout_Level2加入至Layout_Root底下
  30:  Layout_Root.Children.Add(Layout_Level3);//將Layout_Level3加入至Layout_Root底下
  31:  Layout_Root.Children.Add(Layout_Level4);//將Layout_Level4加入至Layout_Root底下

 

如此一來我們就動態的產生Grid囉!

 

References : 建立Grid項目

 

文章中的敘述如有觀念不正確錯誤的部分,歡迎告知指正 謝謝
轉載請註明出處,並且附上本篇文章網址 !  感謝。

SUKI

HOLIESTAR