[WP 7.5] 用C#動態安插控制項到Grid

2012-05-11

[WP 7.5]用C#動態排列Grid

最近遇到需要透過動態的方式排列Grid

需求為有N個物件必須排列出每排有M個物件的排列樣式

在這裡筆記一下方式

我的作法如下

1.首先先在畫面上定義一個Grid，舉例來說每個Row定義6個Column，

所以就先在Grid定義6個ColumnDefinition


<Grid x:Name="GridObj" Width="480">
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>        
    </Grid.ColumnDefinitions>
</Grid>

2.接著先將要附加進入Grid的物件準備好，這個例子主要傳入10張圖片


int ImgCount = 10;
for (int i = 1; i <= ImgCount; i++)
{
    Image img = new Image();
    BitmapImage bitImg = new BitmapImage(new Uri(string.Format("/Images/{0}.png",i.ToString("0#")),UriKind.Relative));
    img.Source = bitImg;
    img.Width = ImgWidth;    
    this.SetToGrid(img, i, ImgCount);
 }

3.因為Column已經確定，所以接下來將所有物件依序插入Grid中


 private void SetToGrid(Image img,int index, int imgCount)
{           
    int GridColNum = this.GridImage.ColumnDefinitions.Count;
    
    //當RowDefinition尚未建立或者是已經到Column數量就創立新的RowDefinition
    if (this.GridImage.RowDefinitions.Count == 0 || index % GridColNum == 0)
    {
        this.GridImage.RowDefinitions.Add(new RowDefinition { Height = new GridLength(img.ActualHeight + 50) });                
     }
     //將Image物件丟入Grid           
     this.GridImage.Children.Add(img);            
     //計算要安插的位置
     int RowInd = index <= GridColNum ? 0 : index % GridColNum != 0 ? index / GridColNum : index / GridColNum - 1;
     int Columeind = index % GridColNum == 0 ? GridColNum - 1 : index % GridColNum - 1;
     //設定第幾列
     Grid.SetRow(img, RowInd);            
    //設定第幾行
     Grid.SetColumn(img, Columeind);
}

回首頁