Как создать иерархическое меню

@AII · Регистрация: 19.09.2016

Студворк — интернет-сервис помощи студентам

Уважаемые, гуру, застрял на создании иерархическом меню, помогите, а то голову сломал. Наверняка есть уже решение этого вопроса, чтобы не изобретать велосипед, подскажите способы создания иерархического меню.
Задача в следующем. Есть класс с товарами и есть класс с категориями товаров.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class Product
    {
        public int ProductId { get; set; }    
        public string ProductName { get; set; } // наименование
        public string Art { get; set; } // Артикул
 
        public int? CategoryId { get; set; }             // Категория
        public virtual Category Category { get; set; } /// Связь между классом  Product и Category один ко многим 
    }
 
public class Category
    {
        public int Id { get; set; }
        public int ParentId { get; set; }        //ID родительская категория
        public string CategoryTitle { get; set; }  //Наименование категории 
 
        public virtual ICollection<Product> Products { get; set; } ///  Связь между классом  Category и Product один ко многим                                                                   
      
        public Category()
        {
            Products = new List<Product>();
        }
    }

Данные храним в БД. Работа с БД осуществляется через EF через класс ModelContext.
Структура кода xaml в принципе проста. Имеется меню, и два рабочих поля, в левом разместил TreeView в котором и нужно получить иерархическое меню категорий товара. А а правом окне нужно выводить товары принадлежащие выделенному пункту категории иерархического меню.

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<Window x:Class="WPF_Wood.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:WPF_Wood"
        xmlns:VM="clr-namespace:WPF_Wood"
        xmlns:viewModel="clr-namespace:WPF_Wood.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
 
 
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
 
        <StackPanel Grid.ColumnSpan="2">
            <Menu>
                <MenuItem Header="Меню">
                    <MenuItem Header="Добавить категорию"></MenuItem>
                    <MenuItem Header="Изменить категорию"></MenuItem>
                    <MenuItem Header="Удалить категорию"></MenuItem>
                    <Separator />
                    <MenuItem Header="Добавить товар" Command="{Binding AddProductCommand}"></MenuItem>
                   
                    <MenuItem Header="Изменить товар" Command="{Binding EditProductCommand}"
                              CommandParameter="{Binding ElementName=prod_List, Path=SelectedItem}"
                              ></MenuItem>
 
                    <MenuItem Header="Удалить товар" 
                              Command="{Binding DeleteProductCommand}"
                          CommandParameter="{Binding ElementName=prod_List, Path=SelectedItem}">
                        
                    </MenuItem>
                </MenuItem>
            </Menu>
        </StackPanel>
 
        <StackPanel Grid.Row="1">
            <TreeView x:Name="MainTreeView" 
                      HorizontalAlignment="Stretch" Margin="10" 
                      VerticalAlignment="Stretch"
                      ItemsSource="{Binding CategoryParents}">
 
                <TreeView.ItemTemplate>
 
                    <!--Тут биндим категории товаров у которых ParentId => 0 -->
                    <HierarchicalDataTemplate ItemsSource="{Binding Positions}" 
                                              DataType="{x:Type viewModel:CategoryParent}" >
 
                        <Label Content="{Binding CategoryParentName}"/>
 
                        <HierarchicalDataTemplate.ItemTemplate>
                            <!--Тут биндим категории товаров у которых ParentId  -->
                            <HierarchicalDataTemplate ItemsSource="{Binding CategoryVM}" >
 
                                <Label Content="{Binding CategoryTitle}"/>
 
                                <!--Тут биндим категории товаров у которых ParentId  -->
                                <HierarchicalDataTemplate.ItemTemplate>
                                    <DataTemplate >
                                        <Label Content="{Binding EmployeeName}"/>
                                    </DataTemplate>
 
                                </HierarchicalDataTemplate.ItemTemplate>
 
                            </HierarchicalDataTemplate>
                        </HierarchicalDataTemplate.ItemTemplate>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>
 
        </StackPanel>
 
        <ScrollViewer Grid.Row="1" Grid.Column="1" Margin="10" VerticalScrollBarVisibility="Auto">
 
            <ListView x:Name="prod_List" ItemsSource="{Binding ProductVM}" >
                <ListView.View>
                    <GridView>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=ProductId}" Width="80">Id Товара</GridViewColumn>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=ProductName}" Width="100">Наименование товара</GridViewColumn>
                        <GridViewColumn DisplayMemberBinding="{Binding Path= Art}" Width="80">Артикул</GridViewColumn>
                        <GridViewColumn DisplayMemberBinding="{Binding Path= CategoryName}" Width="80">Категория</GridViewColumn>
                    </GridView>
                </ListView.View>
               
            </ListView>
 
        </ScrollViewer>
 
        <StackPanel Grid.Row="2" Grid.ColumnSpan="2" Height="30">
            <ToolBarPanel />
        </StackPanel>
 
    </Grid>
</Window>

Я понимаю что нужно составить иерархическое дерево, для привязки его к TreeView, но как это сделать не могу врубиться. Примеров много пересмотрел, а вот идеи как лучше сделать не нашел.

@AII · 26.12.2019, 11:44 **[ТС]**

Элд_Хасп, добрый день! Огромное спасибо за помощь. Наконец то я увидел способ написания кода и подхода, к чему нужно стремиться в своих познаниях. А то я топтался на месте и не мог понять что и как делать. Я думаю начинающим, таким как я, и наверное многим другим было бы полезно узнать, а самое главное увидеть и поучавствовать в разработке рабочего приложения. Потому что учась по статьям и книгам не складывается та структура приложения, которая должна прослеживаться в принципе любого проекта на MVVM.
В данном случае, в исправленном Вами файле я еще не разобрался, но каркас структуры проекта сразу видно класс.

Сообщение от Элд Хасп

То есть первый шаг - как создавать и отображать дерево вы, наверное, уже поняли.

Как создавать и отображать дерево я конечно понял. Очень круто и интересно, самостоятельно я бы до такого не додумался. Урок мне Ваш очень понравился. Конечно хотелось бы пройти путь с нуля и до самого конца, сделать какое-то типовое приложение, чтобы можно было проследить все этапы работы и правильно создать структуру взаимодействия в приложении. Я думаю Вы давно работаете с написанием приложений, и у Вас уже есть определенный накопленный опыт, отработанный шаблон, или отработанная структура. Вот эти бы знания и опыт вложить в какой-то урок написания приложения. Было бы мне кажется интересно не только мне, а многим начинающим. )))

@Элд Хасп · 26.12.2019, 11:52

AII, немного разочарую вас.
Я начинающий любитель.
C# начал изучать менее полутора лет назад.
WPF (о котором даже названия не знал) чуть позже.
Программирование для меня хобби и занимаюсь изучением в свободное время и если нет более интересных занятий.

Что касается создания создания полностью с нуля приложения с нужной вам функциональностью, то это можно сделать.
НО... на носу НГ!
Если проявите инициативу, то можно создать новую тему с решением на GitHub.
И пошагово, комментируя каждый шаг, создавать готовое решение.
Начинать надо с формирования ТЗ и проектирования решения в целом и к каждой его части.
Без этого получается бесконечный бег по кругу с созданием кучи костылей.

Если есть желание - возьмёмся.

@AII · 26.12.2019, 12:22 **[ТС]**

Отлично! )) Я вообще не программист, и взялся за изучения, как хобби. Работая в компании по продаже оборудования, решил изучить программирование, и совместить полезное с приятным.
Конечно сейчас предновогодняя суета отнимает очень много времени, но у меня есть огромное желание научиться программировать.

Сообщение от Элд Хасп

Если проявите инициативу, то можно создать новую тему с решением на GitHub.

Это было бы очень круто и полезно. Давно смотрел я на этот GitHub, но пользоваться я не пользовался, за одно можно изучить и это ))). Что для того нужно?

Добавлено через 16 минут
Как Вам удобно общаться? На форуме создав какую-то тему, или в личке? Например WhatsApp?

@Элд Хасп · 26.12.2019, 12:42

Сообщение от AII

Как Вам удобно общаться? На форуме создав какую-то тему, или в личке? Например WhatsApp?

Наша же цель Было бы мне кажется интересно не только мне, а многим начинающим.
Поэтому создайте новую тему.
Допустим, название "Каталог товаров с многопользовательской БД".
И сначала надо привести и обсудить требую функциональность, спроектировать архитектуру.
После этого будет учиться пользоваться GitHub и начнём создание решения.

@AII · 26.12.2019, 12:59 **[ТС]**

Создал тему. Ссылка

@AII · 18.12.2020, 19:34 **[ТС]**

Элд Хасп, здравствуйте! Прошло много времени с тех пор как Вы помогли мне понять работу с иерархической структурой меню. Но вот опять я обращаюсь к Вам с просьбой вернуться к этому примеру и объяснить если это возможно, следующую проблему.
Я вернулся к этому примеру и решил доделать пример и столкнулся с тем, что при добавлении товара или его редактировании, не происходит обновления и показа в MainWindow() нового (добавленного) товара или отредактированного. Подскажите что и где нужно прописать, почему то у меня ничего не получается.

Добавлю файл.

@Элд Хасп · 18.12.2020, 21:52

AII, когда создаёте архив Решения не включайте в него папки начинающиеся с точки и папки: packages, bin, obj.

Добавлено через 16 минут
AII, у вас нет одного важного компонента из MVVM.
VM не хранит исходные данные.
Она только предоставляет данные Model в удобном для View виде.
А из этого следует, что в случае изменения Данных в Модели VM должна обновить свои данные предоставляемые для View.
Но что бы обновить свои данные VM должна как-то узнать, что изменилось состояние Модели.
И наиболее удобный и типичный в Net для этого способ - это события.
Вам нужно в Модели объявить события.
VM должна на них подписаться.
И при получения события VM обновляет свои данные согласно параметров события.

Добавлено через 43 секунды
В простейшем случае: INPC (INotifyPropertyChanged) и получение данных из Модели [WPF, Элд Хасп]

Добавлено через 5 минут
Более сложный пример: Создание приложения "Штатное Расписание" в паттерне MVVM [WPF, Элд Хасп]
Обратите внимание на StaffingModel - Event.cs:.

@AII · 19.12.2020, 08:36 **[ТС]**

Спасибо за ответ. Примерно понял, куда копать.

Новые блоги и статьи Все статьи Все блоги /
Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ" Adler 06.10.2026 Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .

@Элд Хасп Модератор 16166 / 11286 / 2892 Регистрация: 21.04.2018 Сообщений: 33,176 Записей в блоге: 2
	26.12.2019, 11:52
	AII, немного разочарую вас. Я начинающий любитель. C# начал изучать менее полутора лет назад. WPF (о котором даже названия не знал) чуть позже. Программирование для меня хобби и занимаюсь изучением в свободное время и если нет более интересных занятий. Что касается создания создания полностью с нуля приложения с нужной вам функциональностью, то это можно сделать. НО... на носу НГ! Если проявите инициативу, то можно создать новую тему с решением на GitHub. И пошагово, комментируя каждый шаг, создавать готовое решение. Начинать надо с формирования ТЗ и проектирования решения в целом и к каждой его части. Без этого получается бесконечный бег по кругу с созданием кучи костылей. Если есть желание - возьмёмся. 0

@AII 3 / 4 / 0 Регистрация: 19.09.2016 Сообщений: 91
	26.12.2019, 12:59 [ТС]
	Создал тему. Ссылка 0

@Элд Хасп Модератор 16166 / 11286 / 2892 Регистрация: 21.04.2018 Сообщений: 33,176 Записей в блоге: 2
	18.12.2020, 21:52
	AII, когда создаёте архив Решения не включайте в него папки начинающиеся с точки и папки: packages, bin, obj. Добавлено через 16 минут AII, у вас нет одного важного компонента из MVVM. VM не хранит исходные данные. Она только предоставляет данные Model в удобном для View виде. А из этого следует, что в случае изменения Данных в Модели VM должна обновить свои данные предоставляемые для View. Но что бы обновить свои данные VM должна как-то узнать, что изменилось состояние Модели. И наиболее удобный и типичный в Net для этого способ - это события. Вам нужно в Модели объявить события. VM должна на них подписаться. И при получения события VM обновляет свои данные согласно параметров события. Добавлено через 43 секунды В простейшем случае: INPC (INotifyPropertyChanged) и получение данных из Модели [WPF, Элд Хасп] Добавлено через 5 минут Более сложный пример: Создание приложения "Штатное Расписание" в паттерне MVVM [WPF, Элд Хасп] Обратите внимание на StaffingModel - Event.cs:. 0

@AII 3 / 4 / 0 Регистрация: 19.09.2016 Сообщений: 91
	19.12.2020, 08:36 [ТС]
	Спасибо за ответ. Примерно понял, куда копать. 0