MVVM 다른 객체를 편집 할 때 다른 컨트롤을 사용하는 방법

Question

왼쪽에 트리 뷰가있는 폼을 디자인하고 나머지 영역에는 다른 컨트롤을위한 컨테이너를 디자인해야합니다. 사용자가 트리 뷰에서 항목을 선택할 때마다 오른쪽에 일부 사용자 정의 컨트롤이 나타납니다. 예를 들어, 트리보기에 "오디오 설정"및 "비디오 설정"값이 포함되어 있고이 설정에 바인딩 할 수있는 두 개의 컨트롤이 있고이를 필요할 때 폼에 표시하려고한다고 가정합니다.

이제 MVVM에 대해 읽은 것부터 UserControls 또는 DataTemplates를 반환 할 속성이 없어야합니다. 맞습니까? 내가 본 것처럼 "VM은 뷰의 구현 세부 사항을 알지 않아야한다"는 것을 망칠 것입니다. 그렇다면 MVVM 관점에서이 상황을 어떻게 적절하게 처리 할 수 ​​있습니까? 내가 이것을 위해 변환기를 사용해야 할까? 만약 그렇다면, 어떻게 보일 까?

나는 현재 어떤 코드도 제공 할 수 없지만 (주로 어떤 것도 없기 때문에), 필요한 경우 문제를 명확히하려고 노력할 것입니다. 미리 감사드립니다.

Answer 1

여기서 WPF 템플릿 시스템이 도움이됩니다.

TreeView에 선택된 값에 따라 ContentControl에 적절한보기가 표시되도록하는 것이 가장 좋습니다.

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:l="clr-namespace:WpfApplication1" 
    Title="MainWindow" Height="350" Width="525"> 
    <DockPanel> 

     <ListBox DockPanel.Dock="Left" ItemsSource="{Binding Editors}" SelectedItem="{Binding SelectedEditor}" /> 

     <ContentControl Content="{Binding SelectedEditor}"> 
      <ContentControl.Resources> 
       <DataTemplate DataType="{x:Type l:VideoViewModel}"> 
        <l:VideoView /> 
       </DataTemplate> 
       <DataTemplate DataType="{x:Type l:AudioViewModel}"> 
        <l:AudioView /> 
       </DataTemplate> 
      </ContentControl.Resources> 
     </ContentControl> 

    </DockPanel> 
</Window> 

AudioView 및 VideoView은 UserControls이다.

위에서 볼 수 있듯이 ContentControl의 내용은 ViewModel의 SelectedEditor 속성에 바인딩됩니다.이 속성은 Listbox의 SelectedItem에도 바인딩됩니다.

따라서 기본보기의 ViewModel은 다음과 같습니다.

public class MainWindowViewModel : INotifyPropertyChanged 
{ 
    public IEnumerable<object> Editors 
    { 
     get 
     { 
      yield return new VideoViewModel(); 
      yield return new AudioViewModel(); 
     } 
    } 

    private object selectedEditor; 
    public object SelectedEditor 
    { 
     get { return selectedEditor; } 
     set 
     { 
      if (selectedEditor == value) 
       return; 
      selectedEditor = value; 
      OnPropertyChanged("SelectedEditor"); 
     } 
    } 
} 

따라서 기본 ViewModel에는 GUI 데이터가 없다는 것을 알 수 있습니다. Data binding to SelectedItem in a WPF Treeview

Answer 2

ViewModel의 ShowAudioSettings 및 ShowVideoSettings라는 두 가지 속성을 구현하고 컨트롤의 가시성에 바인딩 할 수 있습니다.

또한 VisualStateManager으로 만들 수 있습니다.