WPF HierarchicalDataTemplate 표현에 대해 질문 드립니다.

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

WPF질문 입니다.

대략 다음과 같은 XML구조를 Deserialize 했습니다.

Group노드가 중첩된 XML 형태 입니다.

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <group name="Group1">
        <process name="Process1">
            <item name="item1"/>
            <item name="item2"/>
            <item name="item3"/>
        </process>

        <process name="Process2">
            <item name="item1"/>
            <item name="item2"/>
            <item name="item3"/>
        </process>        
    </group>

    <group name="Group2">
        <process name="Process2">
            <item name="item1"/>
            <item name="item2"/>
        </process>

        <!--group 안에 group 중첩-->
        <group name="Group2_1">
            <process name="Process2">
                <item name="item1"/>
                <item name="item2"/>
            </process>
            
            <!--group 안에 또 group안에 group 중첩-->
            <group name="Group2_1_1">
                <process name="Process2">
                    <item name="item1"/>
                    <item name="item2"/>
                </process>
            </group>
        </group>
    </group>
    
    <group name="Group3">
        <process name="Process2">
            <item name="item1"/>
            <item name="item2"/>
        </process>

        <!--group 안에 group 중첩-->
        <group name="Group3_1">
            <process name="Process2">
                <item name="item1"/>
                <item name="item2"/>
            </process>
        </group>
    </group>
</root>

Deserialize 하기 위해 다음과 같이 클래스를 구현했습니다.

public class Root
{
        public List<Group>? Groups { get; set; }
}

public class Group
{
        [XmlAttribute("name")]
        public string? Name { get; set; }

        [XmlElement("process")]
        public List<Process>? Processes { get; set; }

        /// <summary>
        /// 중첩 그룹
        /// </summary>
        [XmlElement("group")]
        public List<Group>? NestedGroup { get; set; }
}

public class Process
{
        [XmlAttribute("name")]
        public string? Name { get; set; }

        [XmlElement("item")]
        public List<Item>? Items { get; set; }
}

public class Item
{
        [XmlAttribute("name")]
        public string? Name { get; set; }
}

트리뷰로 표현하기 위해

<!--Root Group node (1 Depth)-->
        <HierarchicalDataTemplate DataType="{x:Type model:Group}" ItemsSource="{Binding NestedGroup}">
            <!--Group1 node-->
            <TextBlock Foreground="Green" Text="{Binding Name}" />

            <!--2 Depth Group node-->
            <HierarchicalDataTemplate.ItemTemplate>


                <HierarchicalDataTemplate DataType="{x:Type model:Group}" ItemsSource="{Binding NestedGroup}">
                    <!--Group2 node-->
                    <TextBlock Foreground="Blue" Text="{Binding Name}" />

                    <!--3 Depth Group node-->
                    <HierarchicalDataTemplate.ItemTemplate>


                        <HierarchicalDataTemplate DataType="{x:Type model:Group}" ItemsSource="{Binding Processes}">
                            <!--Group3 node-->
                            <TextBlock Foreground="Aquamarine" Text="{Binding Name}" />

                            <!--Process items-->
                            <HierarchicalDataTemplate.ItemTemplate>


                                <HierarchicalDataTemplate DataType="{x:Type model:Process}" ItemsSource="{Binding Items}">
                                    <!--Process node info-->
                                    <TextBlock Foreground="Red" Text="{Binding Name}" />

                                    <!--Item items-->
                                    <HierarchicalDataTemplate.ItemTemplate>
                                        <DataTemplate DataType="{x:Type model:Item}">
                                            <!--Item node info-->
                                            <TextBlock Foreground="Chocolate" Text="{Binding Name}" />
                                        </DataTemplate>
                                    </HierarchicalDataTemplate.ItemTemplate>


                                </HierarchicalDataTemplate>


                            </HierarchicalDataTemplate.ItemTemplate>


                        </HierarchicalDataTemplate>


                    </HierarchicalDataTemplate.ItemTemplate>


                </HierarchicalDataTemplate>


            </HierarchicalDataTemplate.ItemTemplate>


        </HierarchicalDataTemplate>

<TreeView Grid.Row="1"
                  ItemsSource="{Binding Root.Groups}" />

요로케 다소 복잡한 HierarchicalDataTemplate 구조가 나왔습니다.
복잡한건 둘째 치고 잘 나오길 바랬는데
뎁스 3레벨의 노드들만 표시되고,
나머지는 표시가 안되고 있는 상황 입니다.

HierarchicalDataTemplate 구조가 뎁스3 까지 표현 되어 그 이하 레벨에 있는 노드들은 아예 표시가 안되고 있는데 HierarchicalDataTemplate 구조를 어떻게 표현 해야 할까요 ?

3개의 좋아요
2

조금 검색해보고 완전한 답은 아니지만 참고가 되시라고 공유 합니다(스타일이 미완입니다)

| xaml

...
    <TreeView ItemsSource="{Binding Root.Groups}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:Group}" ItemsSource="{Binding Children}">
                <TextBlock Foreground="Green" Text="{Binding Name}" />
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:Process}" ItemsSource="{Binding Items}">
                <TextBlock Foreground="Red" Text="{Binding Name}" />
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:Item}">
                <TextBlock Foreground="Chocolate" Text="{Binding Name}" />
            </HierarchicalDataTemplate>
        </TreeView.Resources>
    </TreeView>
...

| cs, Group

...
public class Group
{
    [XmlAttribute("name")]
    public string? Name { get; set; }

    [XmlElement("process")]
    public List<Process>? Processes { get; set; }

    /// <summary>
    /// 중첩 그룹
    /// </summary>
    [XmlElement("group")]
    public List<Group>? NestedGroup { get; set; }

    public CompositeCollection Children
    {
        get
        {
            return new CompositeCollection()
            {
                new CollectionContainer() { Collection = Processes },
                new CollectionContainer() { Collection = NestedGroup }
            };
        }
    }
}
...

CompositeCollection을 사용해서 서로 다른 타입 목록을 하나의 목록에 합쳤습니다.

| 출력
image

5개의 좋아요
3

오호 답변 감사합니다.
월요일에 언능 확인 해보고 피드백 하겠습니다.

CompositeCollection 클래스를 이용해서 합쳐볼 생각은 못했군요!

:+1:

3개의 좋아요