WPF TreeView 선택 상태 저장 및 복원

💾 WPF TreeView 선택 상태 저장 및 복원

이번 포스트에서는 WPF의 TreeView에서 선택된 노드의 상태를 저장하고 복원하는 방법을 다룹니다.
MVVM 구조로 IsSelected 바인딩을 구현하고, 선택된 항목을 JSON으로 저장해 앱 재실행 시 자동 복원하는 예제를 소개합니다.

목차

• 1. Category 모델에 IsSelected 추가
• 2. ViewModel에서 선택 항목 추적 및 저장
• 3. XAML에서 TreeViewItem 스타일 정의
• 4. 선택 항목 JSON 저장 및 복원
• 5. 마무리 및 다음 편 예고

1. Category 모델에 IsSelected 추가

public class Category : INotifyPropertyChanged
{
    public string Name { get; set; }
    public ObservableCollection<Category> Children { get; set; } = new();

    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set { _isSelected = value; OnPropertyChanged(nameof(IsSelected)); }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

2. ViewModel에서 선택 항목 추적 및 저장

public class MainViewModel
{
    public ObservableCollection<Category> Categories { get; set; }

    public MainViewModel()
    {
        Categories = LoadFromJson();
    }

    public List<string> GetSelectedPaths()
    {
        List<string> selected = new();
        Traverse(Categories, "", selected);
        return selected;
    }

    private void Traverse(IEnumerable<Category> list, string path, List<string> selected)
    {
        foreach (var item in list)
        {
            string currentPath = string.IsNullOrEmpty(path) ? item.Name : $"{path}/{item.Name}";

            if (item.IsSelected)
                selected.Add(currentPath);

            Traverse(item.Children, currentPath, selected);
        }
    }

    public void SaveSelection()
    {
        var selected = GetSelectedPaths();
        File.WriteAllText("selection.json", JsonSerializer.Serialize(selected));
    }

    public ObservableCollection<Category> LoadFromJson()
    {
        var categories = new ObservableCollection<Category>
        {
            new Category
            {
                Name = "프로그래밍",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "C#" },
                    new Category { Name = "Java" }
                }
            },
            new Category
            {
                Name = "데이터베이스",
                Children = new ObservableCollection<Category>
                {
                    new Category { Name = "Oracle" },
                    new Category { Name = "MySQL" }
                }
            }
        };

        if (File.Exists("selection.json"))
        {
            var saved = JsonSerializer.Deserialize<List<string>>(File.ReadAllText("selection.json"));
            ApplySelection(categories, "", saved);
        }

        return categories;
    }

    private void ApplySelection(IEnumerable<Category> list, string path, List<string>? selected)
    {
        foreach (var item in list)
        {
            string currentPath = string.IsNullOrEmpty(path) ? item.Name : $"{path}/{item.Name}";
            if (selected?.Contains(currentPath) == true)
                item.IsSelected = true;

            ApplySelection(item.Children, currentPath, selected);
        }
    }
}

3. XAML에서 TreeViewItem 스타일 정의

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

  <TreeView.ItemContainerStyle>
    <Style TargetType="TreeViewItem">
      <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
    </Style>
  </TreeView.ItemContainerStyle>
</TreeView>

<Button Content="선택 저장" Command="{Binding SaveCommand}" Margin="10" />

TreeViewItem의 IsSelected 속성을 바인딩하면 MVVM 구조에서도 선택 상태를 제어할 수 있습니다.

4. 선택 항목 JSON 저장 및 복원

• 선택 항목은 경로(path) 형태로 저장됨
• 예시: "프로그래밍/C#", "데이터베이스/Oracle"
• 저장된 JSON 파일을 통해 앱 재실행 시 상태 복원

실제 저장 예시 (selection.json):

[
  "프로그래밍/C#",
  "데이터베이스/Oracle"
]

5. 마무리 및 다음 편 예고

TreeView의 선택 상태 저장 기능은 UX 측면에서 중요한 역할을 합니다.
사용자의 선택을 기억하고 복원하는 기능은 앱의 완성도를 높여줍니다.

• MVVM 구조로도 IsSelected 바인딩 가능
• 경로 기반 저장으로 트리 구조 전체 지원
• JSON 파일을 통해 간편한 복원 처리

다음 편에서는 TreeView 드래그 앤 드롭(Drag & Drop) 기능을 구현해보겠습니다! 🖱️ 노드 위치를 직접 바꾸는 유저 인터랙션을 다뤄보아요.