使用TreeView控件WPF MVVM主控細節視圖

Question

我想使用WPF TreeView控件和MVVM設計模式實現主/細節視圖（非常像Windows資源管理器）。我對處理TreeView控件很安全，但我不知道如何將主視圖（TreeView）中當前選定的項作爲DataContext傳遞給Detail視圖（實際上是一個擁有ListView的UserControl）。最好是我想做那個XAML。有誰知道如何做到這一點？

澄清我會在這裏發佈一個小地址簿演示。

這是主窗口視圖，它基本上使用網格將客戶區分成三列。左邊的一個拿着樹，中間的一個是分離器，右邊是細節視圖。

<Window.Resources> 
    <HierarchicalDataTemplate DataType="{x:Type vm:Address}" ItemsSource="{Binding Residents}"> 
     <TextBlock> 
      <TextBlock.Text> 
       <MultiBinding StringFormat="{}{0}, {1}, {2}"> 
        <Binding Path="Street"/> 
        <Binding Path="City"/> 
        <Binding Path="ZipCode"/> 
       </MultiBinding> 
      </TextBlock.Text> 
     </TextBlock> 
    </HierarchicalDataTemplate> 

    <DataTemplate DataType="{x:Type vm:Resident}"> 
     <TextBlock> 
      <TextBlock.Text> 
       <MultiBinding StringFormat="{}{0} {1}"> 
        <Binding Path="FirstName"/> 
        <Binding Path="LastName"/> 
       </MultiBinding> 
      </TextBlock.Text> 
     </TextBlock> 
    </DataTemplate> 
</Window.Resources> 

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="150"/> 
     <ColumnDefinition Width="5"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <TreeView BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Addresses}"/> 
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" /> 
    <v:ResidentDetailView Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="???"/> 
</Grid> 

正如你可以在最後一行看到，我想選擇的項目通過在樹的DataContext的詳細信息視圖。

這是細節來看這是一個用戶控件：

<ListView ItemsSource="{Binding Residents}"> 
    <ListView.View> 
     <GridView> 
      <GridViewColumn DisplayMemberBinding="{Binding FirstName}" Header="FirstName" Width="100"/> 
      <GridViewColumn DisplayMemberBinding="{Binding LastName}" Header="LastName" Width="100"/> 
     </GridView> 
    </ListView.View> 
</ListView> 

而且，我想主要和詳細信息視圖之間共享最後的主窗口視圖模型：

public class Resident 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
} 

public class Address 
{ 
    public string Street { get; set; } 
    public string City { get; set; } 
    public int ZipCode { get; set; } 
    public List<Resident> Residents { get; } = new List<Resident>(); 
} 

public class MainWindowViewModel 
{ 
    public ObservableCollection<Address> Addresses { get; } = new ObservableCollection<Address>(); 

    public MainWindowViewModel() 
    { 
     var a = new Address {Street = "Broadway 1", City = "New York", ZipCode = 12345}; 
     a.Residents.Add(new Resident { FirstName = "John", LastName = "Miller" }); 
     a.Residents.Add(new Resident { FirstName = "Lisa", LastName = "Miller" }); 
     Addresses.Add(a); 
     a = new Address { Street = "Wall Street 1", City = "New York", ZipCode = 12345 }; 
     a.Residents.Add(new Resident { FirstName = "Paul", LastName = "Walker" }); 
     a.Residents.Add(new Resident { FirstName = "Frank", LastName = "Brown" }); 
     a.Residents.Add(new Resident { FirstName = "Mark", LastName = "Smith" }); 
     Addresses.Add(a); 
     a = new Address { Street = "Market Street 1", City = "San Francisco", ZipCode = 23456 }; 
     a.Residents.Add(new Resident { FirstName = "Jack", LastName = "Ness" }); 
     a.Residents.Add(new Resident { FirstName = "Joe", LastName = "Jackson" }); 
     a.Residents.Add(new Resident { FirstName = "Jill", LastName = "Baude" }); 
     Addresses.Add(a); 
     a = new Address { Street = "Rodeo Drive 1", City = "Los Angeles", ZipCode = 34567 }; 
     a.Residents.Add(new Resident { FirstName = "Roger", LastName = "Water" }); 
     a.Residents.Add(new Resident { FirstName = "Andy", LastName = "Murray" }); 
     a.Residents.Add(new Resident { FirstName = "Peter", LastName = "Hammer" }); 
     a.Residents.Add(new Resident { FirstName = "Lola", LastName = "White" }); 
     Addresses.Add(a); 
    } 
} 

謝謝您幫幫我。 Johannes

Answer 1

這對您在其他線程中找到的那種綁定來說肯定是可能的。

但是，我只是將當前選定項目的屬性添加到ViewModel。這可能會是很好的跟蹤也無妨（例如，如果你想改變的詳細信息視圖，如果他們點擊別的東西）：

public class MainWindowViewModel 
{ 
    public ObservableCollection<Address> Addresses { get; } = new ObservableCollection<Address>(); 

    public Address SelectedAddress { //get and set with INotifyPropertyChanged } 

    public MainWindowViewModel() 
    { 
     ... 
    } 
} 

並在視圖：

<TreeView BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Addresses}" SelectedItem="{Binding SelectedAddress}"/> 
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" /> 
<v:ResidentDetailView Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding SelectedAddress}"/>