TreeView에서 사용자 정의 DataTemplate 강조 표시

Question

DataTemplate을 사용자 정의하려는 간단한 TreeView이 있습니다. 원하는대로 표시되지만 TreeViewItem을 선택할 때 TreeView의 텍스트를 클릭하면 강조 표시가 작동하지 않습니다.

소스가 똑바로 앞으로 꽤, 그래서 난 그냥 스타일링 연결 누락 같은데요 : 내가 텍스트의 왼쪽에 단지 선택한다면, 그것은 작동

을 XAML

<TreeView x:Name="treeView" 
      ItemsSource="{Binding TreeViewItems}" 
      Grid.Row="0"> 
     <TreeView.ItemTemplate> 
     <HierarchicalDataTemplate ItemsSource="{Binding Path=MenuItems}"> 
      <TreeViewItem Header="{Binding Header}"> 
       <TreeViewItem.InputBindings> 
        <MouseBinding MouseAction="LeftClick" 
           Command="{Binding Command}" /> 
       </TreeViewItem.InputBindings> 
      </TreeViewItem> 
     </HierarchicalDataTemplate> 
     </TreeView.ItemTemplate> 
    </TreeView> 

은 내가 XAML이 추가 시도했다, 그러나 그것은 도움이 일부러 :

 <TreeView.ItemContainerStyle> 
     <Style TargetType="{x:Type TreeViewItem}" 
       BasedOn="{StaticResource {x:Type TreeViewItem}}" /> 
     </TreeView.ItemContainerStyle> 

를

TreeViewModel TreeView는 ItemsSource의 각 항목에 대한 TreeViewItem을 만드는, 그래서 TreeView가 이미 당신을 위해 만든 하나에 있지 둥지 또 다른 TreeViewItem을 할 수있다

public class MenuItemViewModel : BaseNotifyModel 
    { 
     public MenuItemViewModel() 
     { 
     MenuItems = 
      new ObservableCollection<MenuItemViewModel>(); 
     } 

     public String Header 
     { 
     get 
     { 
      return Get<String>(); 
     } 
     set 
     { 
      Set(value); 
     } 
     } 

     public ICommand Command 
     { 
     get 
     { 
      return Get<ICommand>(); 
     } 
     set 
     { 
      Set(value); 
     } 
     } 

     public ObservableCollection<MenuItemViewModel> MenuItems 
     { 
     get 
     { 
      return Get<ObservableCollection<MenuItemViewModel>>(); 
     } 
     set 
     { 
      Set(value); 
     } 
     } 
    } 

Answer 1

@Ed Plunket 및 @Evk의 도움으로 작동 할 해결책을 찾았습니다. ContentPresenter으로 변경 한 후 Interaction.Triggers을 사용하여 MouseLeftButtonUp 작업에서 명령을 호출했습니다.

<TreeView ItemsSource="{Binding TreeViewItems}"> 
     <TreeView.ItemTemplate> 
     <HierarchicalDataTemplate ItemsSource="{Binding Path=MenuItems}"> 
      <ContentPresenter Content="{Binding Header}"> 
       <i:Interaction.Triggers> 
        <i:EventTrigger EventName="MouseLeftButtonUp"> 
        <i:InvokeCommandAction Command="{Binding Path=DataContext.Command, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}}" /> 
        </i:EventTrigger> 
       </i:Interaction.Triggers> 
      </ContentPresenter> 
     </HierarchicalDataTemplate> 
     </TreeView.ItemTemplate> 
    </TreeView> 

Answer 2

public class TreeViewModel : BaseNotifyModel, ITreeViewModel 
    { 
     public TreeViewModel(ITreeViewService menuService) 
     { 
     TreeViewItems = 
      new ReadOnlyObservableCollection<MenuItemViewModel>(menuService.TreeViewMenu); 
     } 

     public ReadOnlyObservableCollection<MenuItemViewModel> TreeViewItems 
     { 
     get 
     { 
      return Get<ReadOnlyObservableCollection<MenuItemViewModel>>(); 
     } 
     private set 
     { 
      Set(value); 
     } 
     } 
    } 

MenuItemViewModel. 그것은 어떤 목적을위한 것이 아닙니다. 템플릿은 기존 TreeViewItem에 DataContext (여기서는 MenuItemViewModel)의 내용을 표시하는 방법을 제공해야합니다.

트리보기 항목에 Header 속성을 표시하려고합니다. 그러니 그냥해라. 공상적인 것, 단지 Label 또는 ContentControl이거나, String 인 경우 TextBlock (임의의 내용의 유연성을 갖는 것은 WPF에서 많은 즐거움이 있지만). 사용자가 내용을 클릭하면 명령이 실행됩니다. 사용자가 트리에서 볼 수있는 유일한 내용은 내용입니다. 이 항목은 TreeViewItem 항목 중 유일하게 보이는 부분이므로 사용자가 클릭 할 항목입니다.

문제 번호 2 : 입력 바인딩이 LeftClick이되면 TreeView의 선택이 중단됩니다. 그 방법으로 여기에서 당신이 거기에 도착할 수 없다는 것이 나에게 나타납니다.

<TreeView.ItemTemplate> 
    <HierarchicalDataTemplate ItemsSource="{Binding Path=MenuItems}"> 
     <ContentControl 
      Content="{Binding Header}" 
      Background="Transparent" 
      > 
     </ContentControl> 
    </HierarchicalDataTemplate> 
</TreeView.ItemTemplate> 
<TreeView.ItemContainerStyle> 
    <Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}"> 
     <EventSetter Event="Selected" Handler="MenuTreeViewItem_Click" /> 
    </Style> 
</TreeView.ItemContainerStyle> 

Codebehind가

private void MenuTreeViewItem_Click(object sender, RoutedEventArgs e) 
{ 
    ((MenuItemViewModel)((FrameworkElement)sender).DataContext).Command.Execute(null); 
} 

There is a way to bind an event to a command in pure XAML하지만 일부 C# 코드 (LOL)가 필요합니다 :

<TreeView.ItemTemplate> 
    <HierarchicalDataTemplate ItemsSource="{Binding Path=MenuItems}"> 
     <ContentControl 
      Content="{Binding Header}" 
      Background="Transparent" 
      > 
      <ContentControl.InputBindings> 
       <!-- This invokes the command, but breaks selection --> 
       <MouseBinding MouseAction="LeftClick" 
          Command="{Binding Command}" /> 
      </ContentControl.InputBindings> 
     </ContentControl> 
    </HierarchicalDataTemplate> 
    </TreeView.ItemTemplate> 

다음은 무엇을 할 수 있습니다. 하지만 제 말은 순수한 XAML입니다. 즉, 코드 숨김에있는보기 흉한 이벤트 처리기가 아니라 일반적으로 재사용 가능한 좋은 첨부 된 동작입니다. 대신 위의 작업을 수행하지만 코드에서 코드를 사용하면 눈을 피할 수 있고 순수한 XAML에서 다시 사용할 수 있습니다.