綁定到TabControl中的ListBox selectedItem

好吧，我得到這個Tabcontrol包含一個ListBox。現在我的問題是，我想將<TextBox x:Name="DetailTextBox" Text="{Binding Detail}"/>綁定到列表框中的selectedItem並顯示Detail屬性值。請注意，TextBox不是TabControl的一部分，但在另一列中。綁定到TabControl中的ListBox selectedItem

我不能完全弄清楚，如何處理綁定，當有多個列表框時，每個TabControl項中有一個。

我的班

public class TabViewModel 
{ 
    public string Name { get; set; } 
    public ObservableCollection<TabItemViewModel> Collection { get; set; } 
} 

public class TabItemViewModel 
{ 
    public string Title { get; set; } 
    public string Detail { get; set; } 
}

公共主窗口（）

var tabViewModels = new ObservableCollection<TabViewModel>(); 
      tabViewModels.Add(new TabViewModel{Name = "Tab 1", Collection = new ObservableCollection<TabItemViewModel>{new TabItemViewModel{Detail = "Detail 1.1", Title = "Title 1.1"}, new TabItemViewModel{Detail = "Detail 2.2", Title = "Title 2.2"}}}); 
      tabViewModels.Add(new TabViewModel { Name = "Tab 2", Collection = new ObservableCollection<TabItemViewModel> { new TabItemViewModel { Detail = "Detail 2.1", Title = "Title 2.1" }, new TabItemViewModel { Detail = "Detail 2.2", Title = "Title 2.2" } } }); 
      tabViewModels.Add(new TabViewModel { Name = "Tab 3", Collection = new ObservableCollection<TabItemViewModel> { new TabItemViewModel { Detail = "Detail 3.1", Title = "Title 3.1" }, new TabItemViewModel { Detail = "Detail 3.2", Title = "Title 3.2" } } }); 
      DataContext = tabViewModels;

MainWindow.xaml。

<Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="50*"/> 
      <ColumnDefinition Width="50*"/> 
     </Grid.ColumnDefinitions> 
     <TabControl ItemsSource="{Binding}" Grid.Column="0" SelectedIndex="0"> 
      <TabControl.ItemContainerStyle> 
       <Style TargetType="{x:Type TabItem}"> 
        <Setter Property="Header"> 
         <Setter.Value> 
          <Binding Path="Name"/> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </TabControl.ItemContainerStyle> 
      <TabControl.ContentTemplate> 
       <DataTemplate> 
        <ListBox ItemsSource="{Binding Collection}"> 
         <ListBox.ItemTemplate> 
          <DataTemplate> 
           <Label Content="{Binding Title}" /> 
          </DataTemplate> 
         </ListBox.ItemTemplate> 
        </ListBox> 
       </DataTemplate> 
      </TabControl.ContentTemplate> 
     </TabControl> 
     <StackPanel Grid.Column="1"> 
      <TextBox x:Name="DetailTextBox" Text="{Binding Detail}"/> 
     </StackPanel> 
    </Grid>

enter image description here

編輯

臨時解決方案 找到了一種方法，使其工作，但我仍然在尋找一個純粹的XAML解決方案。增加了一個SelectionChange事件

<ListBox ItemsSource="{Binding Collection}" SelectionChanged="ListBox_SelectionChanged"> 

    private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) 
      { 
       if (e.AddedItems.Count > 0) 
        DetailTextBox.DataContext = (TabItemViewModel) e.AddedItems[0]; 
      }

來源

2012-03-19 gulbaek

使用轉換器或將您的視圖選擇同步到您的ViewModels – 2012-03-19 20:51:26

您可以直接給我一些關於這樣做的信息嗎？ – gulbaek 2012-03-19 20:58:17

到哪個選項？ – 2012-03-19 20:59:29

這個怎麼樣，我很驚訝自己:-)
進行這些更改XAML中。

<TabControl ItemsSource="{Binding}" 
    Grid.Column="0" SelectedIndex="0" 
    IsSynchronizedWithCurrentItem="True"> 

<ListBox ItemsSource="{Binding Collection}" 
    IsSynchronizedWithCurrentItem="True"> 

<TextBox x:Name="DetailTextBox" 
    Text="{Binding /Collection/Detail}"/>

'/'綁定到控件的CollectionView的當前選定項目。

所以上面的結合是通過

向下鑽取當前的數據上下文
關於該項目
當前的集合屬性的SelectedItem集合屬性（的ObservableCollection設置的ObservableCollection的的SelectedItem ）
該項目的Detail屬性。

爲了使這項工作，我們需要指定IsSynchronizedWithCurrentItem="True"以確保SelectedItem保持與每個集合的當前項目保持同步。

來源

2012-03-19 21:14:34 Phil

非常簡單，我只是刪除了項目，然後它與上面的代碼一起工作。 – gulbaek 2012-03-19 21:22:00

謝謝，從答案中刪除'項目'。 – Phil 2012-03-19 22:18:51

綁定到TabControl中的ListBox selectedItem

回答

相關問題