5

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.

2

2 Answers 2

8

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;
1
  • 1
    Your solution is unable to adjust column size by Auto. Jun 5, 2016 at 9:36
4

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.