Bind a model to grid dynamically (UWP)

Question

I am trying to create a Grid dynamically and bind it inside a List view. My code looks like this I have a XAML main page.

<ListView x:Name="lvmain" ItemsSource="{Binding Path=columndetails}" 
            HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Gray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <uctrl:TableHeader></uctrl:TableHeader>
                </Grid>
            </DataTemplate>
        </ListView.HeaderTemplate>
    </ListView>

Code behind

    public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContext = new MainViewModel();
    }
}
public class columndetail
{
    public string ColumnName { get; set; }
    public int ColumnId { get; set; }
}
public class MainViewModel
{
    private List<columndetail> _ColumnDetails = new List<columndetail>();
    public List<columndetail> ColumnDetails
    {
        get { return _ColumnDetails; }
        set { _ColumnDetails = value; }
    }
    public MainViewModel()
    {
        binddata();
    }
    public void binddata()
    {
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "Col1" });
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "Col2" });
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "Col3" });
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "col4" });
    }
}

My Usercontrol (uctrl:TableHeader)

    <Grid x:Name="grdtblheader">
</Grid>

Code behind

   public sealed partial class TableHeader : UserControl
{
    public TableHeader()
    {
        this.InitializeComponent();
        DataContextChanged += (s, e) =>
        {
            if ((DataContext != null) && (DataContext is MainViewModel))
            {
                var cust = DataContext as MainViewModel;
                int col = 0;

                foreach (var colDet in cust.ColumnDetails)
                {
                    var colWidth = GridLength.Auto;
                    grdtblheader.ColumnDefinitions.Add(new ColumnDefinition() { Width = colWidth });
                    var tb = new TextBlock();
                    tb.Text = colDet.ColumnName;
                    Grid.SetColumn(tb, col);
                    grdtblheader.Children.Add(tb);
                    col++; 
                }
            }
        };
    }
}

I am expecting a 4 column header as given in my viewmodel data. But I am getting a 9 column header as DataContextChanged event is fired 4 times. How can i overcome this issue? I just want a 4 column header for my list-view as shown in code above.

Answer 1

Just clear ColumnDefinitions and Children in the event handler.

var cust = DataContext as MainViewModel;
int col = 0;

grdtblheader.ColumnDefinitions.Clear();
grdtblheader.Children.Clear();

foreach (var colDet in cust.ColumnDetails)
{
    var colWidth = new GridLength(1, GridUnitType.Star);// GridLength.Auto;
    grdtblheader.ColumnDefinitions.Add(new ColumnDefinition() { Width = colWidth });
    var tb = new TextBlock();
    tb.Text = colDet.ColumnName;
    Grid.SetColumn(tb, col);
    grdtblheader.Children.Add(tb);
    col++;
}