简体   繁体   中英

Listview win8 xaml how to create columns?

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.

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;

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?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM