Wpf – tab control data template

datatemplatesilverlighttabcontrolwpf

I want a TabControl where each tab item represents a (Employee)ViewModel; the header should be the DisplayName property of that view model, and the content should be a user control (EmployeeDetailsView) that has a data context of the view model.

So pidgeon xaml (is there such a thing??):

<TabControl x:Name="Items">
    <TabItem Header="DisplayName" Content=local:EmployeeDetailsView />
<TabControl>

What should my real XAML look like?

Cheers,
Berryl

EDIT for Vortex

        <TabControl x:Name="Items" >
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding DisplayName}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ContentControl>
                        <local:EmployeeDetailView/>
                    </ContentControl>
                </DataTemplate>
            </TabControl.ContentTemplate>
         </TabControl>

Best Answer

In WPF it is quite simple. But in silverlight I used custom TabControl.

Silverlight

You can find source and example here (MyTabControl.cs), where I've answered a similar question.

And now your code must be something like:

<my:MyTabControl x:Name="myTabs" MyItemsSource="{Binding Items}" MySelectedItem="{Binding SelectedItem}" >
    <my:MyTabControl.TabHeaderItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </my:MyTabControl.TabHeaderItemTemplate>
    <my:MyTabControl.TabItemTemplate>
        <DataTemplate>
            <local:EmployeeDetailsView />
        </DataTemplate>
    </my:MyTabControl.TabItemTemplate>
</my:MyTabControl>

In code-behind or somewhere:

var items = new List<Employee>(){
                new Employee{DisplayName = "Employee 1"},
                new Employee{DisplayName = "Employee 2"}};

myTabs.DataContext = new SomeCollectionModel
{
      Items = items,
      SelectedItem = items[0]
};

WPF

WPF has built-in support of DataTemplates in the TabControl, so I have to do a few minor changes in XAML:

<TabControl x:Name="myTabs" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <local:EmployeeDetailsView />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

Related Solutions

Wpf – Access parent DataContext from DataTemplate

I had problems with the relative source in Silverlight. After searching and reading I did not find a suitable solution without using some additional Binding library. But, here is another approach for gaining access to the parent DataContext by directly referencing an element of which you know the data context. It uses Binding ElementName and works quite well, as long as you respect your own naming and don't have heavy reuse of templates/styles across components:

<ItemsControl x:Name="level1Lister" ItemsSource={Binding MyLevel1List}>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Button Content={Binding MyLevel2Property}
              Command={Binding ElementName=level1Lister,
                       Path=DataContext.MyLevel1Command}
              CommandParameter={Binding MyLevel2Property}>
      </Button>
    <DataTemplate>
  <ItemsControl.ItemTemplate>
</ItemsControl>

This also works if you put the button into Style/Template:

<Border.Resources>
  <Style x:Key="buttonStyle" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Button Command={Binding ElementName=level1Lister,
                                   Path=DataContext.MyLevel1Command}
                  CommandParameter={Binding MyLevel2Property}>
               <ContentPresenter/>
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Border.Resources>

<ItemsControl x:Name="level1Lister" ItemsSource={Binding MyLevel1List}>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Button Content="{Binding MyLevel2Property}" 
              Style="{StaticResource buttonStyle}"/>
    <DataTemplate>
  <ItemsControl.ItemTemplate>
</ItemsControl>

At first I thought that the x:Names of parent elements are not accessible from within a templated item, but since I found no better solution, I just tried, and it works fine.

WPF tab control and MVVM selection

If you look at the TabControl Class page on MSDN, you'll find a property called SelectedIndex which is an int. Therefore, simply add an int property into your view model and Bind it to the TabControl.SelectedIndex property and then you can select whichever tab you like at any time from the view model:

<TabControl SelectedIndex="{Binding SelectedIndex}">
    ...
</TabControl>

UPDATE >>>

Setting a 'startup' tab is even easier using this method:

In view model:

private int selectedIndex = 2; // Set the field to whichever tab you want to start on

public int SelectedIndex { get; set; } // Implement INotifyPropertyChanged here

EDIT for Vortex

Best Answer

Related Solutions

Wpf – Access parent DataContext from DataTemplate

WPF tab control and MVVM selection

Related Topic