Wpf – Binding for TabItem’s content controls

data-bindingtabcontrolwpf

I have a TabControl with ItemsSource set to ObservableCollection<BookTab> and using ContentTemplateSelector to create different tabs.

class BookTab
{  
    public string Name { get; set; }  
    public string Type { get; set; }  
    public object Data { get; set; }  
}

<TabControl Name="tabControl"
            ContentTemplateSelector="{StaticResource tabTemplateSelector}">  
    <TabControl.ItemContainerStyle>  
        <Style TargetType="TabItem">  
            <Setter Property="Header" Value="{Binding Name}"/>  
            <Setter Property="Content" Value="{Binding}"/>  
        </Style>  
    </TabControl.ItemContainerStyle>  
</TabControl>

Type in BookTab determines DataTemplate used in the appropriate tab, Name is displayed on the tab header, and Data supposed to be displayed in tab's content, i.e. DataGrid.
Data is set to ObservableCollections of different types.

DataTemplate may look like this:

<DataTemplate x:Key="bookTabTemplate">  
    <TabItem Name="bookTab">  
        <Grid>  
            <DataGrid Name="bookGrid">  
                ...  
            </DataGrid>  
        </Grid>  
    </TabItem>  
</DataTemplate>

I tried different ways to bind Data property to DataGrid's ItemsSource, but all I got is grid displaying word "Book" (BookTab's Name property value).
My guess is I have to somehow propagate TabControl's binding down to DataGrid, but I cannot figure it out.

Best Answer

I would do it like this:

<TabControl SelectedItem="{Binding CurrentBook}"
          IsSynchronizedWithCurrentItem="True"
          ItemsSource="{Binding BookList}">
<TabControl.ContentTemplate>
  <DataTemplate>
     <Grid>
        <ContentControl Content="{Binding Data}"
     </Grid>
  </DataTemplate>
</TabControl.ContentTemplate>
<TabControl.ItemTemplate>
  <DataTemplate>
    <TextBlock Text="{Binding Name}"/>
  </DataTemplate>
</TabControl.ItemTemplate>
</TabControl>

... and later you define in your app.xaml how the content of your data is presented...

    <DataTemplate DataType="{x:Type viewmodel:bookviewmodel1}">
        <view:bookview1/>
    </DataTemplate>

All you have to do, is creating a view (usercontrol) for each type.

HTH

Related Solutions

Wpf – App crashes on changing tabs that contain ListBoxes with ItemTemplates

No matter which TabItem I set to be selected at startup, that tab will be displayed fine, but when I click on the other tab the application crashes with an 'Exception has been thrown by the target of an invocation' error pointing toward the DataTemplate for the tab I'm switching to.

Enable first-chance exceptions, so you can find out the actual exception instead of the wrapped outer exception - what's going wrong will be much clearer.

C# – Binding a WPF ComboBox to a custom list

You set the DisplayMemberPath and the SelectedValuePath to "Name", so I assume that you have a class PhoneBookEntry with a public property Name.

Have you set the DataContext to your ConnectionViewModel object?

I copied you code and made some minor modifications, and it seems to work fine. I can set the viewmodels PhoneBookEnty property and the selected item in the combobox changes, and I can change the selected item in the combobox and the view models PhoneBookEntry property is set correctly.

Here is my XAML content:

<Window x:Class="WpfApplication6.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
<Grid>
    <StackPanel>
        <Button Click="Button_Click">asdf</Button>
        <ComboBox ItemsSource="{Binding Path=PhonebookEntries}"
                  DisplayMemberPath="Name"
                  SelectedValuePath="Name"
                  SelectedValue="{Binding Path=PhonebookEntry}" />
    </StackPanel>
</Grid>
</Window>

And here is my code-behind:

namespace WpfApplication6
{

    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            ConnectionViewModel vm = new ConnectionViewModel();
            DataContext = vm;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ((ConnectionViewModel)DataContext).PhonebookEntry = "test";
        }
    }

    public class PhoneBookEntry
    {
        public string Name { get; set; }

        public PhoneBookEntry(string name)
        {
            Name = name;
        }

        public override string ToString()
        {
            return Name;
        }
    }

    public class ConnectionViewModel : INotifyPropertyChanged
    {
        public ConnectionViewModel()
        {
            IList<PhoneBookEntry> list = new List<PhoneBookEntry>();
            list.Add(new PhoneBookEntry("test"));
            list.Add(new PhoneBookEntry("test2"));
            _phonebookEntries = new CollectionView(list);
        }

        private readonly CollectionView _phonebookEntries;
        private string _phonebookEntry;

        public CollectionView PhonebookEntries
        {
            get { return _phonebookEntries; }
        }

        public string PhonebookEntry
        {
            get { return _phonebookEntry; }
            set
            {
                if (_phonebookEntry == value) return;
                _phonebookEntry = value;
                OnPropertyChanged("PhonebookEntry");
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Edit: Geoffs second example does not seem to work, which seems a bit odd to me. If I change the PhonebookEntries property on the ConnectionViewModel to be of type ReadOnlyCollection, the TwoWay binding of the SelectedValue property on the combobox works fine.

Maybe there is an issue with the CollectionView? I noticed a warning in the output console:

System.Windows.Data Warning: 50 : Using CollectionView directly is not fully supported. The basic features work, although with some inefficiencies, but advanced features may encounter known bugs. Consider using a derived class to avoid these problems.

Edit2 (.NET 4.5): The content of the DropDownList can be based on ToString() and not of DisplayMemberPath, while DisplayMemberPath specifies the member for the selected and displayed item only.

Best Answer

Related Solutions

Wpf – App crashes on changing tabs that contain ListBoxes with ItemTemplates

C# – Binding a WPF ComboBox to a custom list

Related Topic