[Windows Store App] 使用程式碼建構Grid

2014-01-12

摘要:[Windows Store App] 使用程式碼建構Grid

在Windows Store App中，版面的配置通常會仰賴直接寫XAML來設定，

但是在某些情況下會有直接用程式碼的需求，

使用C#來建構加入Grid到頁面中的邏輯會跟使用XAML不太一樣，

就來看看要怎麼寫吧

通常在XAML我們會這樣寫一段Grid的配置code


<Grid x:Name="root">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="1" Height="150"/>
    </Grid>
</Grid>

加入一個使用三種不同大小配置方式的Grid，

分別設定為50pixel、Auto、star(*)

在Auto區塊中加入一個button

那如果是在C#中要怎麼寫呢？


Grid grid = new Grid();
RowDefinition row1 = new RowDefinition() { Height = new GridLength(50) };
RowDefinition row2 = new RowDefinition() { Height = GridLength.Auto };
RowDefinition row3 = new RowDefinition() { Height = new GridLength(2, GridUnitType.Star) };
RowDefinition row4 = new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) };
grid.RowDefinitions.Add(row1);
grid.RowDefinitions.Add(row2);
grid.RowDefinitions.Add(row3);
grid.RowDefinitions.Add(row4);
Grid.SetRow(button, 1);
grid.Children.Add(button);
root.Children.Add(grid);

如上面這段程式碼所示，

必須建構RowDefinition物件，然後設定它的Height屬性，類別是GridLength，

完成後加入到Grid的RowDefinitions集合裡，同理Colume的做法也是一樣。

裡面的子項目要設定Grid位置會比較沒那麼直觀，比如這個案例中裡的button

要使用Grid.SetRow()這個方法來設定，而不需要跟被加入的Grid有任何設定，被加進Children就會自動放在正確的位置上了

最後把建構好的Grid丟進想放的位置(這裡就用一個root Grid當例子)就完成了！

回首頁