Список внутри списка в WPF C#

Question

Пытаюсь реализовать список внутри списка, что-то типа такого(одного уровня вложенности мне хватит):

Хочется отметить, что сам список заполняется по нажатию кнопки. С помощью ListBox так и не получилось, через bind(делаю программно через ItemSource) удается только один корневой уровень. На XAML выглядит так:

<ListBox x:Name="listObjects" Margin="10,10,779,133" SelectionMode="Multiple">
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Background" Value="LightSteelBlue"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="brd" Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <CheckBox Focusable="False" Margin="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}"
                                IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                <ContentPresenter/>
                            </CheckBox>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="LimeGreen"/>
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="BorderThickness" Value="1"/>
                                <Setter Property="BorderBrush" Value="Black"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Соответственно один уровень добавляется условно так(не буду вдаваться в подробности заполнения списка):

private void Load_Click(object sender, RoutedEventArgs e)
{
    var list = new List<string>();
    ls.Add("qwerty");
    ls.Add("asdfgh");
    listObjects.ItemsSource = list;
}

Вопрос, собственно, заключается в том, как реализовать многоуровневый список с привязкой к коллекциям. Готов разобраться и переписать заново, если поможете своим кодом и т.п.

Answer 1

И так, для реализации данной задачи нам следует сначала обзавестись неким классом, который мы укажем нашему приложения как некий источник данных для привязки (DataContext), пусть на данный момент это будет пустой класс с названием MyDataClass:

public class MyDataClass
{

}

Хорошо. Далее нам надо создать простейший класс для одного элемента в нашем списке. Пусть он содержит некую string переменную с именем Name и некую коллекцию List<string> с именем Films. Сам класс назовем Category:

public class Category
{
    public string Name { get; set; }
    public List<string> Films { get; set; }
}

Хорошо! Теперь можно создать в ранее созданном классе MyDataClass пустую (на данный момент) ObservableCollection<>. Назовем ее MyCategory и пусть она изначально инициализируется. Наш класс станет таким:

public class MyDataClass
{
    public ObservableCollection<Category> MyCategory { get; set; } = new ObservableCollection<Category>();
}

Ок, пол пути пройдено, осталось дизайн элементов и все это связать. Давайте для начала свяжем! В MainWindow в самом начале создадим наш MyDataClass:

public partial class MainWindow : Window
{
    private MyDataClass MyData;
}

Затем после InitializeComponent(); нам нужно этот класс инициализировать и задать как DataContext. Также давайте сразу и заполним все это некими данными для теста:

public MainWindow()
{
    InitializeComponent();
    MyData = new MyDataClass();
    DataContext = MyData;

    MyData.MyCategory.Add(new Category
    {
        Name = "Боевики",
        Films = new List<string> { "Фильм 1", "Фильм 2", "Фильм 3" }
    });

    MyData.MyCategory.Add(new Category
    {
        Name = "Комедии",
        Films = new List<string> { "Фильм 1", "Фильм 2", "Фильм 3" }
    });
}

Ну, уже почти финиш. Осталось создать элемент отображения. В WPF считай каждый элемент может содержать в себе кучу других (к примеру мы можем в кнопку засунуть картинку, текст или что нибудь еще). В нашем случае мы можем переопределить шаблон элемента у ListBox на тот, который содержал бы в себе текстовое поле и еще один ListBox:

<ListBox ItemsSource="{Binding MyCategory}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}"/>
                <ListBox ItemsSource="{Binding Films}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Заметьте, я выше уже указал данные для привязки, а именно:

• У основного ListBox указал ItemsSource="{Binding MyCategory}", что связало его с данными в нашей коллекции MyCategory
• TextBlock - ему указал место, от куда он должен брать текст Text="{Binding Name}". То есть привязанная коллекция MyCategory содержит в себе элементы типа Category (наша созданная коллекция для одного элемента), вот там мы указывали Name и к нему в итоге и привязались.
• Внутренний ListBox - ну тут уже ясно, мы ему указали данные к нашему списку Films.

Ну что, давайте запустим. Результат должен быть следующим:

---

Если вы перейдете все же на Binding, то в данному случае при изменение в коллекции каких либо элементов у вас скорей всего не обновятся данные визуально. Многих это пугает (лично у меня многих знакомых этот факт отталкивает от Binding'a.) По этому напишу сразу как бороться! Тут все просто, нужно реализовать INotifyPropertyChanged там, где что то может измениться. В нашем случае, это класс Category. Допишем в него пару строк:

public class Category: INotifyPropertyChanged
{
    public string Name { get; set; }
    public List<string> Films { get; set; }


    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

Теперь нам осталось переписать то, что может обновится, например имя:

private string name;
public string Name
{
    get => name;
    set
    {
        name = value;
        OnPropertyChanged("Name");
    }
}

Вот и все, теперь наш интерфейс будет обновлять поле "Имя" (Name) в соответствие с изменениями в коллекции MyCategory. Для списков лучше использовать ObservableCollection так, как она умеет оповещать об изменение данных.

---

То, что вам надо - это всего лишь пример того, как разместить ListBox внутри другого ListBox, но я посчитал, что вам будет полезно узнать, как в итоге все данные привязать и как этим пользоваться, ведь это основы и самый "сок" WPF. Пытался как можно подробней все расписать для наглядности. Надеюсь помог. Удачи!

Answer 2

Если в ходе обдумывания интерфейса представляется многоуровневый список с одним уровнем вложенности, то вероятно здесь стоит остановится и задуматься над тем, что, возможно, вам всего-лишь нужно сгруппировать данные по определенному ключу.

Для группировки удобно использовать стандартные средства (CollectionViewSource).

Например, вы хотите сгруппировать данные по свойству жанр (Genre):

<CollectionViewSource x:Key="cvs" Source="{Binding Data}">
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Genre" />
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

где Data - список ваших объектов.

В ListView шаблон заголовка задается в GroupStyle.HeaderTemplate

<ListView.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>

Простой пример реализации такого подхода по ссылке