Expand 버튼 Command 처리 방법

[jamesnet214]

TreeViewItem 안에 포함된 ExpandButton(ToggleButton)의 클릭 이벤트는 버블링을 통해 TreeViewItem으로 이벤트가 전달되지 않는 특성을 가지기 때문에 아이디어가 필요합니다.

본 예제의 설계 구조에서는 Command를 통해 다음과 같이 간단하게 해결할 수 있습니다.

MainViewModel

// 생략
public ICommand ExpandCommand { get; }

public MainContentViewModel(FileService fileService, NavigatorService navigatorService) 
{
    _fileService = fileService;
    _navigatorService = navigatorService;
    _navigatorService.LocationChanged += _navigatorService_LocationChanged;

    Roots = fileService.GenerateRootNodes();
    Files = new();
    Locations = new();

    ExpandCommand = new RelayCommand<ToggleButton>(OnExpand);
}

private void OnExpand(ToggleButton expand)
{
    if (expand.IsChecked == true)
    {
        Folderinfo selected = (Folderinfo)expand.DataContext;

        _fileService.RefreshSubdirectories(selected);
        _navigatorService.ChangeLocation(selected);
    }
}
// 생략

FolderTreeItem.xaml

// 생략
<units:ExpandButton x:Name="expand"
        Command="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=DataContext.ExpandCommand}"
        CommandParameter="{Binding RelativeSource={RelativeSource Self}}"
        Foreground="{TemplateBinding Foreground}"
        IsChecked="{Binding IsFolderExpanded, Mode=OneWay}"/>
// 생략

그밖에 다양한 방법으로 시도해 보시기 바랍니다.

[dotlynee]

@jamesnet214 감사합니다! 다음 코드로 변경해서 성공했습니다. 😄

[MainContentViewModel.cs]

using CommunityToolkit.Mvvm.Input;
using Jamesnet.Wpf.Mvvm;
using System.Windows.Controls.Primitives;
using WpfExplorer.Support.Local.Helpers;
using WpfExplorer.Support.Local.Models;

namespace WpfExplorer.Main.Local.ViewModels
{
    public partial class MainContentViewModel : ObservableBase
    {
        private readonly FileService _fileService;

        public List<FolderInfo> Roots { get; init; }

        public MainContentViewModel(FileService fileService)
        {
            _fileService = fileService;
            Roots = _fileService.GenerateRootNodes();
        }

        [RelayCommand]
        private void Expand(ToggleButton expand)
        {
            if (expand.IsChecked == true)
            {
                FolderInfo selected = (FolderInfo)expand.DataContext;
                _fileService.RefreshSubdirectories(selected);
            }
        }
    }
}

[FolderTreeItem.xaml]

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:units="clr-namespace:WpfExplorer.Main.UI.Units" 
                    xmlns:cnvts="clr-namespace:WpfExplorer.Support.Local.Converters;assembly=WpfExplorer.Support">

    <Style TargetType="{x:Type units:FolderTreeItem}">
        <Setter Property="ItemsSource" Value="{Binding Children}"/>
        <Setter Property="IsExpanded" Value="{Binding IsFolderExpanded, Mode=TwoWay}"/>
        <Setter Property="IsSelected" Value="{Binding IsFolderSelected}"/>
        <Setter Property="Foreground" Value="#FFFFFF"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type units:FolderTreeItem}">
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <units:ExpandButton x:Name="expand"
                                                Command="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=DataContext.ExpandCommand}"
                                                CommandParameter="{Binding RelativeSource={RelativeSource Self}}"
                                                Foreground="{TemplateBinding Foreground}"
                                                IsChecked="{Binding IsFolderExpanded, Mode=OneWay}"
                                                />

                            <TextBlock Text="{Binding Name}"/>
                        </StackPanel>
                        <ItemsPresenter x:Name="items"
                                        Visibility="Collapsed"
                                        Margin="{Binding Depth, Converter={cnvts:DepthConverter}}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="items" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <DataTrigger Binding="{Binding ElementName=expand, Path=IsChecked}" Value="True">
                            <Setter TargetName="items" Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=expand, Path=IsChecked}" Value="False">
                            <Setter TargetName="items" Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter> 
    </Style>

</ResourceDictionary>

실행결과

[dotlynee]

위의 코드에 보완할 부분이 추가되어 댓글드립니다.

아래 코드와 같이 selected.IsFolderExpanded = ... 로 폴더 확장 여부를 나타내는 ObservableProperty 필드 값을 업데이트 해주어야 합니다.

그래야 6.23.1 TreeViewItem.xaml 고도화 부분에서 폴더를 접었다 펼쳤을때 폴더모양이 제대로 표시되게 됩니다. 😄

        [RelayCommand]
        private void Expand(ToggleButton expand)
        {
            FolderInfo selected = (FolderInfo)expand.DataContext;
            if (expand.IsChecked == true)
            {
                selected.IsFolderExpanded = true; // 추가된 부분
                _fileService.RefreshSubdirectories(selected);
            } else
            {
                selected.IsFolderExpanded = false; // 추가된 부분 
            }
        }

코드 추가 전

코드 추가 후