According to count of columns, generate columns

[Kelum]

I have a requirement to generate columns once define column count on top of the grid, how can I achieve this, 
attached image file I depict the way I'm expecting this.

[Kelum]

for this task I did something like this 

this grid contains some predefined columns, and I'm binding data to that predefined columns initial load of this grid.
in this same grid I have button to add dynamic columns

for the button click I'm trying to add 3 dynamic columns to the existing grid.like following

private void btnAddGridColumn_Click(object sender, RoutedEventArgs e)
{
    int NumberOfColumns= 3;
    GridViewDataColumn column = new GridViewDataColumn();
    List<GridViewDataColumn> columnCollection = new List<GridViewDataColumn>();

    if (cols > 0)
    {
        for (int i = 0; i <= cols; i++)
        {
            column.Header = "ColumnName" + i;
            column.UniqueName = "ColumnName" + i;                   
            columnCollection.Add(column);

            column.DataMemberBinding = new Binding("ColumnName"+i);
            gridName.AutoGenerateColumns = false;
        }
              
        gridName.Columns.AddRange(columnCollection);

    }
}

but this is creating "ColumnName3" only others dont have Header name just existing space for that columns.