Привязка к ListBox selectedItem внутри TabControl - PullRequest
Новая
       21

Привязка к ListBox selectedItem внутри TabControl

0 голосов
/ 20 марта 2012

Хорошо, я получил этот Tabcontrol, содержащий ListBox. Теперь моя проблема в том, что я хотел бы связать <TextBox x:Name="DetailTextBox" Text="{Binding Detail}"/> с selectedItem в списке и показать значение свойства Detail. Обратите внимание, что TextBox не является частью TabControl, но находится в другом столбце.

Я не могу понять, как обрабатывать привязку, когда есть несколько ListBox'ов, по одному в каждом элементе 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; }
}

public MainWindow () 

 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

EDIT

Temp Solution Нашел способ заставить это работать, но я все еще ищу чистое решение 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];
            }

1 Ответ

2 голосов
/ 20 марта 2012

Как на счет этого я сам удивился: -)
Внесите эти изменения в свой 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 элемента управления.

Таким образом, вышеприведенная привязка проходит сквозь

  • Текущий выбранный элемент набора ObservableCollection в контексте данных
  • Свойство Collection для этого элемента
  • Текущий выбранный элемент свойства Collection (ObservableCollection)
  • Свойство Detail этого элемента.

Чтобы это работало, нам нужно указать IsSynchronizedWithCurrentItem="True", чтобы обеспечить синхронизацию SelectedItem с текущим элементом каждой коллекции.

...