類似WPF Explorer的MVVM ListBox-in-ListBox（主 - 細節）綁定表達式

Question

我的情況的一個行摘要：當我選擇一個細節項時，主仍然是未選中的，所以我得到錯誤的細節項。

假設兩個ViewModel MasterList和DetailList都是ObservableCollection，並且試圖製作類似於Explorer的GUI。左側面板具有主詳細信息列表框，右側面板顯示所選詳細信息項目中的一個。沒有必要在右側顯示主要信息。

在我的左側面板中，ListBox控件編碼如下。

<ListBox x:Name="listBoxMaster" ItemsSource="{Binding Path=MasterList}" SelectionMode="Extended" 
      IsSynchronizedWithCurrentItem="True"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <ListBox x:Name="listBoxDetail" ItemsSource="{Binding Path=DetailList}" IsSynchronizedWithCurrentItem="True" /> 
     </DataTemplate> 
</ListBox.ItemTemplate> 

注意，我設置IsSynchronizedWithCurrentItem = 「true」 以兩個列表框控件。

在右側面板中，選定的詳細項目信息將顯示如下的綁定。讓我們簡化DetailItemClass具有Name和Number屬性的詳細項目類。

試驗1

<WrapPanel Name="wrapPanel1" DataContext="{Binding ElementName=listBoxMaster, Path=SelectedItem}"> 
    <StackPanel DataContext="{Binding Path="DetailList/"> 
     <TextBox Text="{Binding Path=Name}" /> 
     <TextBox Text="{Binding Path=Number}" /> 
    </StackPanel> 
</WrapPanel> 

的weired GUI問題happend。 如果我們有。

• Master1有詳細的1,2,3。
• Master2有詳細資料4,5,6。

當我選擇M1-D2時，它工作。 之後，當我選擇細節M2-D4時，它可以工作。 但之後，當我再次選擇M1-D2時，它不起作用！預先選擇的項目可能不會更新其主控選擇。 此外，有時M2-D5的選擇會在右側顯示M1-D2。 weired。

試驗2

<WrapPanel Name="wrapPanel1" DataContext="{Binding Path=MasterList/DetailList/}"> 
    <StackPanel> 
     <TextBox Text="{Binding Path=Name}" /> 
     <TextBox Text="{Binding Path=Number}" /> 
    </StackPanel> 
</WrapPanel> 

只是沒有作品。儘管我將IsSynchronizedWithCurrentItem設置爲true，但失敗。我不知道爲什麼。

試驗3

我剛剛擺脫DataContext的XAML綁定，並在後臺代碼如下使用事件觸發。

private void listBoxMaster_SelectionChanged(object sender, SelectionChangedEventArgs e) 
    { 
     if (e.AddedItems.Count == 1) 
     { 
      if (e.AddedItems[0] is DetailItemClass) 
      { 
       var element = (DetailItemClass)e.AddedItems[0]; 
       wrapPanel1.DataContext = element; 
      } 
     } 
    } 

它工作得很好，但它不使用XAML綁定。

你能教我適當的結合表達嗎？

Answer 1

你嘗試：

<WrapPanel Name="wrapPanel1" DataContext="{Binding ElementName=listBoxMaster, Path=SelectedItem}"> 
    <StackPanel> 
     <TextBox Text="{Binding Path=DetailList.Name}" /> 
     <TextBox Text="{Binding Path=DetailList.Number}" /> 
    </StackPanel> 
</WrapPanel> 

或

<WrapPanel Name="wrapPanel1"> 
    <StackPanel> 
     <TextBox Text="{Binding ElementName=listBoxMaster, Path=SelectedItem.DetailList.Name}" /> 
     <TextBox Text="{Binding ElementName=listBoxMaster, Path=SelectedItem.DetailList.Number}" /> 
    </StackPanel> 
</WrapPanel> 

這些都是確保在DataContext是否真正級聯。

Answer 2

您不應該使用多個列表框，因爲會出現許多與多重選擇相關的問題。例如，您可以選擇第一個列表框，但選擇第二個列表框。

由ItemsControl類更換外部列表框，以便它不接受的選擇，而不是可聚焦。

還將單個屬性添加到包含所有列表的單個選定項目的根模型。我用非常簡單的模型，在這個例子轉載您的層次結構中此屬性被稱爲SelectedDetailItem：

public class MasterListViewModel : INotifyPropertyChanged 
{ 
    public ObservableCollection<DetailListViewModel> MasterList { get; set; } 

    private ItemViewModel _selectedDetailItem; 

    public ItemViewModel SelectedDetailItem 
    { 
     get { return _selectedDetailItem; } 
     set 
     { 
      _selectedDetailItem = value; 
      OnPropertyChanged("SelectedDetailItem"); 
     } 
    } 
} 

public class DetailListViewModel 
{ 
    public ObservableCollection<ItemViewModel> DetailList { get; set; } 
} 

public class ItemViewModel 
{ 
    public string Title { get; set; } 
} 

而這個屬性綁定到兩個控件：你爲什麼要使用列表框的列表框

<ItemsControl x:Name="listBoxMaster" ItemsSource="{Binding Path=MasterList}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <ListBox x:Name="listBoxDetail" ItemsSource="{Binding Path=DetailList}" DisplayMemberPath="Title" 
         SelectedItem="{Binding DataContext.SelectedDetailItem, Mode=TwoWay, ElementName=listBoxMaster}"/> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

<WrapPanel Name="wrapPanel1" DataContext="{Binding SelectedDetailItem}" Grid.Column="1"> 
    <TextBox Text="{Binding Path=Title}" /> 
</WrapPanel>