WPF - XML 데이터 / 파일의 TreeView 동적 출력

XML 데이터는 일반적으로 계층형을 띄고 있습니다.

깊이가 그렇게 깊지 않은 경우나 복잡하지 않은 때에는 파일을 그냥 보고 분석해도 관계가 없지만

복잡해지는 경우 머리가 뻐근해지죠.

이런 경우에 TreeView로 정리가 되면 아주 깔끔하게 알아볼 수 있습니다.

WPF가 주력언어가 되어버린 탓에 WPF를 기준으로 설명을 하겠습니다.

C# Winform 쪽은 테스트는 안해봤지만 비슷한 양상을 보일것 같네요.

 

우선 using system.xml;을 추가해주시는 것 알아주시기 바랍니다.

 

다음은 소스입니다.

 

            XmlDataProvider dataProvider = this.FindResource("xmlDataProvider") as XmlDataProvider;
            XmlDocument doc = new XmlDocument();
            doc.Load(@"C:\" + "test.xml");
            dataProvider.Document = doc;

 

아주 간단합니다. 필요한 함수 내에 위의 소스 4줄을 적어주시면 됩니다.

보시면 아시겠지만 저같은 경우는 xml 파일을 통째로 읽어왔는데 웹페이지에서도 적용이 가능할겁니다. 아마..-ㅅ-;;;

 

아무튼 코드에서는 위와 같구요.

xaml 파트를 한번 살펴보겠습니다.

우선 window.resource를 추가해주셔야됩니다.

 

    <Window.Resources>
        <HierarchicalDataTemplate x:Key="NodeTemplate">
            <TextBlock x:Name="text" Text="?" />
            <HierarchicalDataTemplate.ItemsSource>
                <Binding XPath="child::node()" />
            </HierarchicalDataTemplate.ItemsSource>
            <HierarchicalDataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
                    <Setter TargetName="text" Property="Text" Value="{Binding Path=Value}"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
                    <Setter TargetName="text" Property="Text" Value="{Binding Path=Name}"></Setter>
                </DataTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
        <XmlDataProvider x:Key="xmlDataProvider"></XmlDataProvider>
    </Window.Resources>

 

단순히 추가만 해주시면 됩니다. <Window  ~~~~> 밑에 넣어주시면 되겠죠.

 

다음에는 화면에 treeview 컨트롤을 하나 추가해주시고 컨트롤 내 소스를 다음과 같이 수정해줍니다.

<TreeView Canvas.Left="30" Canvas.Top="72" Height="430" Name="treeView1" Width="380" Background="AliceBlue"
              ItemsSource="{Binding Source={StaticResource xmlDataProvider}, XPath=*}" ItemTemplate= "{StaticResource NodeTemplate}"/>

 

저 같은 경우는 캔버스 내에 넣어서 소스가 저렇게 되었는데... WPF 만져보신분들은 다 아시리라 믿고 넘어가겠습니다. 중요한 부분은 바로 빨간색으로 색칠된 부분이겠죠?

 

위와 같이 설정을 하시고 실행시켜보시면 아름답게 출력되는 Treeview를 확인하실수 있습니다.

 

아. 추가로 한가지 더 살펴볼 것은 트리뷰에서는 가끔 모두 펼쳐져야 할때가 있습니다. 이럴 때 사용하는 소스는 다음과 같습니다.

 

                <TreeView.ItemContainerStyle>
                    <Style TargetType="TreeViewItem">
                        <Setter Property="TreeViewItem.IsExpanded" Value="true"/>                         
                        <!-- 트리뷰 데이터 출력시 모두 펼치기 하려면 value를 true로 설정-->
                    </Style>
                          
                </TreeView.ItemContainerStyle>

 

위치는 treeview의 내부에 넣으시면 되고 모두 펼치려면 value 값을 true로 하지 않으려면 false로 설정하시면 됩니다.