locked
Dynamically adding columns to the ListView in wondows store app using XAML

    Question

  • Dynamically adding columns to the ListView in wondows store app using XAML 

    Thanks,

    Rajeev

    • Moved by CoolDadTxMVP Thursday, August 28, 2014 7:33 PM WinStore related
    Thursday, August 28, 2014 4:09 PM

Answers


  • That's going to be pretty tricky because it's not a datagrid with a column collection.

    Consider this:

        <Grid x:Name="ListViewHeaders" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition  />
                <ColumnDefinition  />
                <ColumnDefinition  />
                <ColumnDefinition  />
                <ColumnDefinition  />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="Title Col 1" />
            <TextBlock Grid.Column="1" Text="Title Col 2" />
            <TextBlock Grid.Column="2" Text="Title Col 3" />
            <TextBlock Grid.Column="3" Text="Title Col 4" />
            <TextBlock Grid.Column="4" Text="Title Col 5" />
        </Grid>
        <ListView x:Name="myTable" Grid.Row="1" ItemsSource="{Binding SomeCollection}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Width="{Binding ElementName=myTable, Path=ActualWidth}" x:Name="Details" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Text="{Binding ItemProperty1}" />
                        <TextBlock Grid.Column="1" Text="{Binding ItemProperty2}" />
                        <TextBlock Grid.Column="2" Text="{Binding ItemProperty3}" />
                        <TextBlock Grid.Column="3" Text="{Binding ItemProperty4}" />
                        <TextBlock Grid.Column="4" Text="{Binding ItemProperty5}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

    You need to get a reference to the headers columndefinitions and add a columndefinition

    ColumnDefinition c6 = new ColumnDefinition();
    c6.Width = new GridLength(1, GridUnitType.Star);
    ListViewHeaders.ColumnDefinitions.Add(c6);
    Next a TextBlock in that.
    TextBlock tb6 = new TextBlock;
    Grid.SetColumn(txt6, 5);
    grid.Children.Add(txt6);

    Hope that helps
    Please don't forget to up vote answers you like or which help you and mark one(s) which answer your question.


    Thursday, August 28, 2014 4:30 PM
  • Damn thus site is a nuisance.

    You then need to also add a binding which'll  look something like:

      MyData myDataObject = new MyData(DateTime.Now);      
      Binding myBinding = new Binding("MyDataProperty");
      myBinding.Source = myDataObject;
      myText.SetBinding(TextBlock.TextProperty, myBinding);

    and so on


    Hope that helps
    Please don't forget to up vote answers you like or which help you and mark one(s) which answer your question.

    Thursday, August 28, 2014 4:32 PM

All replies


  • That's going to be pretty tricky because it's not a datagrid with a column collection.

    Consider this:

        <Grid x:Name="ListViewHeaders" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition  />
                <ColumnDefinition  />
                <ColumnDefinition  />
                <ColumnDefinition  />
                <ColumnDefinition  />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="Title Col 1" />
            <TextBlock Grid.Column="1" Text="Title Col 2" />
            <TextBlock Grid.Column="2" Text="Title Col 3" />
            <TextBlock Grid.Column="3" Text="Title Col 4" />
            <TextBlock Grid.Column="4" Text="Title Col 5" />
        </Grid>
        <ListView x:Name="myTable" Grid.Row="1" ItemsSource="{Binding SomeCollection}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Width="{Binding ElementName=myTable, Path=ActualWidth}" x:Name="Details" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                            <ColumnDefinition  />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Text="{Binding ItemProperty1}" />
                        <TextBlock Grid.Column="1" Text="{Binding ItemProperty2}" />
                        <TextBlock Grid.Column="2" Text="{Binding ItemProperty3}" />
                        <TextBlock Grid.Column="3" Text="{Binding ItemProperty4}" />
                        <TextBlock Grid.Column="4" Text="{Binding ItemProperty5}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

    You need to get a reference to the headers columndefinitions and add a columndefinition

    ColumnDefinition c6 = new ColumnDefinition();
    c6.Width = new GridLength(1, GridUnitType.Star);
    ListViewHeaders.ColumnDefinitions.Add(c6);
    Next a TextBlock in that.
    TextBlock tb6 = new TextBlock;
    Grid.SetColumn(txt6, 5);
    grid.Children.Add(txt6);

    Hope that helps
    Please don't forget to up vote answers you like or which help you and mark one(s) which answer your question.


    Thursday, August 28, 2014 4:30 PM
  • Damn thus site is a nuisance.

    You then need to also add a binding which'll  look something like:

      MyData myDataObject = new MyData(DateTime.Now);      
      Binding myBinding = new Binding("MyDataProperty");
      myBinding.Source = myDataObject;
      myText.SetBinding(TextBlock.TextProperty, myBinding);

    and so on


    Hope that helps
    Please don't forget to up vote answers you like or which help you and mark one(s) which answer your question.

    Thursday, August 28, 2014 4:32 PM
  • How to bind the column to "myTable" ListView,  the ListViewHeaders class is not exist in the window store app XAML class. I am getting build error.

    THanks,

    Rajeev

    Thursday, August 28, 2014 5:48 PM
  • the above code not compile in window store app XAML file.
    Thursday, August 28, 2014 5:49 PM
  • This stuff is code.

    As in c# rather than XAML.

    You cannot dynamically add columns just in XAML.

    .

    In code.

    I think the syntax is very similar between wpf, Silverlight and windows app store

    from:

    http://msdn.microsoft.com/en-gb/library/windows/apps/br244257.aspx

    there is this:

    // Create the source string.
    string s = "Hello";
    
    // Create the binding description.
    Binding b = new Binding();
    b.Mode = BindingMode.OneTime;
    b.Source = s;
    
    // Attach the binding to the target.
    MyText.SetBinding(TextBlock.TextProperty, b);

    That code is to a fixed string.

    If you set itemssource and there's a property to bind to from the object in the collection I think it'd be more like:

      var binding = new Binding {Path = new PropertyPath("propertytobindtoname"), Mode = BindingMode.OneWay};


    Hope that helps
    Please don't forget to up vote answers you like or which help you and mark one(s) which answer your question.


    • Edited by Andy ONeill Thursday, August 28, 2014 6:36 PM
    Thursday, August 28, 2014 6:34 PM