Day 15: WPF 리스트뷰와 트리뷰 구현

리스트뷰(ListView)

WPF에서 리스트뷰는 데이터 목록을 표시하는 컨트롤입니다. 이를 통해 사용자는 데이터를 보거나 편집할 수 있습니다. 리스트뷰는 데이터 템플릿(DataTemplate)을 사용하여 데이터 항목을 표시합니다.

먼저, 리스트뷰에 항목을 추가하는 방법을 살펴보겠습니다. 아래 코드는 리스트뷰에 Wafer 객체를 추가하는 예제입니다.

<ListView x:Name="waferListView">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}"/>
            <GridViewColumn Header="Size" DisplayMemberBinding="{Binding Size}"/>
            <GridViewColumn Header="Thickness" DisplayMemberBinding="{Binding Thickness}"/>
        </GridView>
    </ListView.View>
</ListView>

위 코드에서는 ListView의 View를 GridView로 설정하였습니다.(다른 View들에 관한 설명은 ListView아래 쪽에 설명해놓았습니다.) GridView는 각 열의 Header와 그에 해당하는 데이터를 나타내는 DisplayMemberBinding을 가집니다. GridViewColumn 태그 내에 Header와 DisplayMemberBinding을 설정하여 각 열의 제목과 데이터를 설정할 수 있습니다.

728x90

이제 코드-behind 파일에서 Wafer 데이터를 ListView에 추가하는 방법을 살펴보겠습니다.

public class Wafer
{
    public int ID { get; set; }
    public double Size { get; set; }
    public double Thickness { get; set; }
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        var wafers = new List<Wafer>
        {
            new Wafer { ID = 1, Size = 200, Thickness = 10 },
            new Wafer { ID = 2, Size = 300, Thickness = 20 },
            new Wafer { ID = 3, Size = 400, Thickness = 30 }
        };
        waferListView.ItemsSource = wafers;
    }
}

위 코드에서는 Wafer 클래스를 정의하고 MainWindow 클래스의 생성자에서 Wafer 객체를 생성하여 ListView의 ItemsSource에 할당합니다. 이렇게 하면 Wafer 객체가 ListView에 표시됩니다.

---

*WPF에서 ListView는 다양한 뷰를 제공합니다. GridView 외에도 다음과 같은 뷰를 사용할 수 있습니다.

• StackPanel: 각 항목을 수직으로 쌓아 올린 뷰입니다. 매우 단순한 레이아웃을 사용하며 각 항목을 순서대로 표시합니다.
• WrapPanel: 항목을 수평으로 쌓아 올린 뷰입니다. 항목은 높이가 다르더라도 다음 행으로 이동할 수 있습니다.
• UniformGrid: 일정한 크기의 셀을 가진 격자 형태의 뷰입니다. 각 셀에 하나의 항목이 포함됩니다. 모든 셀의 크기가 같으며, 셀의 수가 자동으로 조정됩니다.
• GridView: 이전에 설명한 것처럼, 데이터를 열과 행으로 구성된 테이블 형태로 표시하는 뷰입니다. 그러나 GridView의 다양한 기능을 사용하여 열의 크기와 콘텐츠의 정렬 등을 지정할 수 있습니다.
• TileView: Metro 스타일의 인터페이스에서 많이 사용되는 뷰입니다. 타일 형태로 항목을 표시하며, 각 항목은 작은 이미지와 텍스트를 포함합니다.
• 다른 뷰: 이 외에도 WPF는 여러 가지 뷰를 제공합니다. 예를 들어, CoverFlowView는 앨범 아트를 포함한 항목을 감추고, 선택한 항목만 보여주는 뷰입니다.
  
  

이러한 다양한 뷰 중에서 사용자 인터페이스에 가장 적합한 뷰를 선택할 수 있습니다.

---

트리뷰(TreeView)

트리뷰(TreeView)는 항목을 계층적으로 구성하여 트리 구조로 나타내는 컨트롤입니다. 일반적으로 파일 시스템 구조나 조직도 등을 나타내는 데 사용됩니다.

WPF에서는 TreeView 컨트롤을 사용하여 트리 구조를 나타낼 수 있습니다. TreeView 컨트롤은 각 항목이 노드(node)라고 부르며, 각 노드는 자식 노드를 가질 수 있습니다. 이러한 자식 노드를 가지고 있는 노드를 부모 노드라고 합니다.

*자료구조에 대해 알고싶으신 분은 아래글을 참고해주세요.

2022.12.18 - [Languages/C++] - 자료구조 - 트리

자료구조 - 트리

TreeView 컨트롤은 데이터를 바인딩하여 사용할 수 있습니다. 데이터 바인딩을 사용하면 트리 구조를 동적으로 생성할 수 있으며, 데이터를 변경하면 트리뷰도 함께 변경됩니다.

다음은 간단한 예제 코드입니다. 이 예제에서는 반도체 제조 공정에서 사용되는 장비 구성을 트리 구조로 나타내는 방법을 보여줍니다.

<TreeView ItemsSource="{Binding EquipmentList}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding SubEquipments}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

이 코드에서는 EquipmentList라는 ObservableCollection<Equipment> 객체를 데이터 컨텍스트로 설정하고 있습니다. 이 컬렉션은 장비(Equipment) 객체를 포함하고 있으며, 각 장비 객체는 하위 장비(SubEquipments)를 가지고 있습니다.

*컬렉션에 관한 설명이 필요하신분은 아래글을 참고해주세요.

2023.04.11 - [Languages/C#] - C# 컬렉션 & 제네릭 컬렉션(Collection & Generic Collection)

C# 컬렉션 & 제네릭 컬렉션(Collection & Generic Collection)

TreeView 컨트롤에서는 HierarchicalDataTemplate을 사용하여 자식 노드를 가지는 노드를 나타냅니다. 이 템플릿에서는 TextBlock을 사용하여 각 노드의 이름을 표시합니다.

이외에도 ItemContainerStyle나, ItemTemplate을 사용해서도 데이터를 구성할 수 있습니다.

• ItemContainerStyle은 TreeViewItem 컨트롤의 스타일을 정의합니다. 이 컨트롤은 TreeView 내에서 TreeViewItem을 나타내는 데 사용됩니다. TreeViewItem은 자체적으로 IsExpanded, IsSelected 등의 속성을 가지며, 이러한 속성을 설정하기 위해서는 ItemContainerStyle을 사용할 수 있습니다.
• ItemTemplate은 TreeViewItem의 Content 속성에 대한 데이터 템플릿입니다. 이 템플릿은 TreeViewItem 내의 요소에 대한 레이아웃을 정의합니다.

이 예제에서는 간단한 데이터 구조를 사용하였지만, 실제 프로그램에서는 데이터 구조가 더 복잡해질 수 있습니다. 이 경우 HierarchicalDataTemplate을 적절하게 사용하여 트리 구조를 나타낼 수 있습니다.

해당 코드는 EquipmentList와 SubEquipments 속성이 포함된 EquipmentViewModel 클래스를 전제로 합니다. 아래는 비하인드 코드의 예시입니다.

public class EquipmentViewModel
{
    public string Name { get; set; }
    public ObservableCollection<EquipmentViewModel> SubEquipments { get; set; }
    public ObservableCollection<EquipmentViewModel> EquipmentList { get; set; }

    public EquipmentViewModel()
    {
        // EquipmentList 초기화 및 하위 노드 추가
        EquipmentList = new ObservableCollection<EquipmentViewModel>();
        var category1 = new EquipmentViewModel() { Name = "카테고리1" };
        var subEquip1 = new EquipmentViewModel() { Name = "카테고리1-1" };
        var subEquip2 = new EquipmentViewModel() { Name = "카테고리1-2" };
        category1.SubEquipments.Add(subEquip1);
        category1.SubEquipments.Add(subEquip2);
        EquipmentList.Add(category1);

        var category2 = new EquipmentViewModel() { Name = "카테고리2" };
        var subEquip3 = new EquipmentViewModel() { Name = "카테고리2-1" };
        var subEquip4 = new EquipmentViewModel() { Name = "카테고리2-2" };
        category2.SubEquipments.Add(subEquip3);
        category2.SubEquipments.Add(subEquip4);
        EquipmentList.Add(category2);
    }
}

위 코드는 간단한 예시용으로 하드코딩을 이용해 EquipmentList와 SubEquipments 속성을 초기화합니다. 하지만 실제 프로젝트에서는 이 속성들을 데이터베이스나 파일 등에서 로드하거나 사용자 입력에 따라 동적으로 생성해야 합니다.

데이터베이스를 연결하는 방법을 알고싶으신분은 MongoDB를 Visual Studio에 연결하는 이전 Post를 확인해주세요.

2023.04.12 - [Languages/C#] - Day 11: 데이터베이스 연동 - MongoDB 설치 및 연결

Day 11: 데이터베이스 연동 - MongoDB 설치 및 연결

이상으로 WPF의 ListView와 TreeView를 활용한 데이터 표시 방법에 대해 알아보았습니다.

ListView와 TreeView는 각각 다양한 방법으로 데이터를 표시할 수 있는데, GridView를 이용하면 간단하게 컬럼을 정의하여 데이터를 표시할 수 있고, 다른 방법으로는 DataTemplate을 이용해 복잡한 UI를 구성할 수도 있습니다. 또한, TreeView는 HierarchicalDataTemplate을 이용하여 부모-자식 구조의 데이터를 표현할 수 있습니다.

WPF는 다양한 컨트롤과 기능들을 제공하며, 이를 활용하면 다양한 UI를 구성할 수 있습니다. 이번 시리즈를 통해 WPF의 다양한 기능들을 살펴보면서 WPF를 더욱 깊이 이해하고 다양한 애플리케이션을 개발할 수 있게 되기를 바랍니다