locked
ListBox Design Help RRS feed

  • Question

  • Hello again,

    I want to show 3 columns in ListView and I want to bing items foreach columns. I need help for XAML code.

    Thanks, Beray

    Beray Benteşen

    Friday, September 5, 2014 9:05 AM

Answers

  • You can do this without using the MVVM pattern.   You will need a class which holds the data that you fill and set to the listboxes itemssource in the code behind. 
    Saturday, September 6, 2014 10:25 AM
  • You need to define the Grid yourself in the ItemTemplate of the ListView, i.e. there is no equivalent to the DataGrid Control or GridView in WPF.

    1. Create a class with three properties to hold the column values for each row in the ListView:

    class MyItem
        {
            public string Column1 { get; set; }
            public string Column2 { get; set; }
            public string Column3 { get; set; }
        }

    2. Set the ItemsSource property to a collection of instances of this class:

    List<YourItem> items = new List<YourItem>();
                for (int i = 0; i < 3; ++i)
                {
                    items.Add(new YourItem() { Column1 = i.ToString(), Column2="X", Column3="X" });
                }
                lv.ItemsSource = items;

    3. Define the appearance of each item in XAML by specifying an ItemTemplate for the ListView:

    <ListView Name="lv">
                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0">1</TextBlock>
                            <TextBlock Grid.Column="1">2</TextBlock>
                            <TextBlock Grid.Column="2">3</TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
    
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
    
    
                            <TextBlock Grid.Column="0" Text="{Binding Column1}" />
                            <TextBlock Grid.Column="1" Text="{Binding Column2}" />
                            <TextBlock Grid.Column="2" Text="{Binding Column2}" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    

    Saturday, September 6, 2014 11:28 AM

All replies

  • Post what you have now so we can help you
    Friday, September 5, 2014 11:12 PM
  • Hey,

    You cannot do this without implementing MVVM first implement MVVM then bind listbox to items and then make columns and in each column bind data whatever you want to bind.

    Muhammad Asad

    Saturday, September 6, 2014 7:05 AM
  • You can do this without using the MVVM pattern.   You will need a class which holds the data that you fill and set to the listboxes itemssource in the code behind. 
    Saturday, September 6, 2014 10:25 AM
  • You need to define the Grid yourself in the ItemTemplate of the ListView, i.e. there is no equivalent to the DataGrid Control or GridView in WPF.

    1. Create a class with three properties to hold the column values for each row in the ListView:

    class MyItem
        {
            public string Column1 { get; set; }
            public string Column2 { get; set; }
            public string Column3 { get; set; }
        }

    2. Set the ItemsSource property to a collection of instances of this class:

    List<YourItem> items = new List<YourItem>();
                for (int i = 0; i < 3; ++i)
                {
                    items.Add(new YourItem() { Column1 = i.ToString(), Column2="X", Column3="X" });
                }
                lv.ItemsSource = items;

    3. Define the appearance of each item in XAML by specifying an ItemTemplate for the ListView:

    <ListView Name="lv">
                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0">1</TextBlock>
                            <TextBlock Grid.Column="1">2</TextBlock>
                            <TextBlock Grid.Column="2">3</TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
    
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
    
    
                            <TextBlock Grid.Column="0" Text="{Binding Column1}" />
                            <TextBlock Grid.Column="1" Text="{Binding Column2}" />
                            <TextBlock Grid.Column="2" Text="{Binding Column2}" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    

    Saturday, September 6, 2014 11:28 AM