Search code examples
c#wpfvisual-studio

WPF nested list view in list item template


What I have here is a ListView that shows as an item another ListView with some more items. So ill try to explain better. For every lines of the ListViewMother I want a Listview linked to the datasource of lines. So what i want to try later is to link the Page to a particular template given by a string called templatestyle that will be given to the ListviewMother to select the different ListStyle. So my question is how to I link a datasource to a templated Listview?

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
   Title = "MainWindow" Height = "350" Width = "604">

    <Grid>
        <ListView Name="ListviewMother">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="20">
                        <TextBlock Text="aaaaaaa"></TextBlock>
                        <ListView ItemsSource="{Binding lines}" Background="red"> (listitemson)
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Margin="20" >
                                        <TextBox Text="aaaaaaaaaa" Margin="20"/>
                                        <TextBox Text="{Binding linenumber}" />
                                    </Grid>

                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </DataTemplate>
            
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

</Window> 

The c# code

namespace WpfApp2
{

    public partial class MainWindow : Window
    {
        public ObservableCollection<Page> pages = new ObservableCollection<Page>();
        public ObservableCollection<line> lines { get; set; } = new ObservableCollection<line>();
        public MainWindow()

        {
            lines.Add(new line() { linenumber = "tsadssdest" });
            lines.Add(new line() { linenumber = "tedsfdsfdsst" });
            pages.Add(new Page() { Title = "asdsad"});
            pages.Add(new Page() { Title = "sdsadad"});
            pages.Add(new Page() { Title = "gggdfgs"});
            InitializeComponent();
            ListviewMother.ItemsSource = pages;



        }
    }
}
public class Page
{
    public string Title { get; set; }
    public string TemplateStyle { get; set; }


}

public class line
{
    public string linenumber { get; set; }

}

Solution

  • You need to put the collection of lines in your Page class.I do some modification for your code to show the ListView inside in ListView.

    The xaml code is:

    <Grid>
        <ListView Name="ListviewMother">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="20">
                        <TextBlock Text="{Binding Title}"></TextBlock>
                        <ListView ItemsSource="{Binding lines}" Background="red">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Margin="2" >
                                        <TextBox Text="{Binding linenumber}" />
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
    

    The cs code is:

    public partial class MainWindow : Window
    {
        public ObservableCollection<Page> pages = new ObservableCollection<Page>();
        public MainWindow()
        {
            pages.Add(new Page() { Title = "Page1",lines=new ObservableCollection<line>() { new line() { linenumber="Line1_1"}, new line() { linenumber = "Line1_2" }, new line() { linenumber = "Line1_3" } } });
            pages.Add(new Page() { Title = "Page2",lines=new ObservableCollection<line>() { new line() { linenumber="Line2_1"}, new line() { linenumber = "Line2_2" }, new line() { linenumber = "Line2_3" } } });
            pages.Add(new Page() { Title = "Page3" });
            InitializeComponent();
            ListviewMother.ItemsSource = pages;
        }
    }
    public class Page
    {
        public string Title { get; set; }
        public string TemplateStyle { get; set; }
        public ObservableCollection<line> lines { get; set; } = new ObservableCollection<line>();
    
    }
    
    public class line
    {
        public string linenumber { get; set; }
    }
    

    The result picture is like this: enter image description here