Listview win8 xaml how to create columns?

Question

Hi I am trying to create 3 columns in a ListView.

I read this but I want to set the data in each column programtically in C#:

how to display data in rows and columns XAML windows 8

For example I want artist name, song name and artist.

How about implementing the solution from "http://stackoverflow.com/questions/10869715/how-to-display-data-in-rows-and-columns-xaml-windows-8" ans setting the ItemSource from the code-behind? — Seb Boulet, Oct 10 '12 at 22:15
Thats the bit I am struggling with how do I set that from code — user673906, Oct 10 '12 at 22:30

Seb Boulet · Accepted Answer · 2012-10-11T00:06:38.617

Assuming you have something like this to store your data:

public class SongDetails
{
    public string ArtistName {get; set;}
    public string SongName {get; set;}
    public string Artist {get; set;}
}

And a ListView with a DataTemplate defined (as in the link you provided), just give your ListView a name:

<ListView Name="ListViewSongs">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Width="500" VerticalAlignment="Center">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="150" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Text="{Binding Artist}" />
                <TextBlock Grid.Column="1" Text="{Binding ArtistName}" />
                <TextBlock Grid.Column="2" Text="{Binding SongName}" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Then, from the code-behind, it's just a case of:

var songDetails = new[]
    {
        new SongDetails {Artist = "a1", ArtistName = "a2", SongName = "a3"},
        new SongDetails {Artist = "b1", ArtistName = "b2", SongName = "b3"}
    };

ListViewSongs.ItemsSource = songDetails;

Your solution is unable to adjust column size by Auto. – Maciej Klemarczyk Jun 05 '16 at 09:36 — Maciej Klemarczyk, Jun 05 '16 at 09:36

score 4 · Answer 2 · edited May 23 '17 at 11:51

Improved XAML of Seb Boulet's answer if you don't want to hard code the Width of the Item/Grid (responsive design):

<ListView Name="ListViewSongs">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="150" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding Artist}" />
                <TextBlock Grid.Column="1" Text="{Binding ArtistName}" />
                <TextBlock Grid.Column="2" Text="{Binding SongName}" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Related topic: How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox?

Listview win8 xaml how to create columns?

2 Answers2

Linked