locked
ListBox Design Help

    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 05, 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 06, 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 06, 2014 11:28 AM

All replies

  • Post what you have now so we can help you
    Friday, September 05, 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 06, 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 06, 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 06, 2014 11:28 AM