How to set tabItem header when UI element region is TabControl

Topics: Prism v2 - WPF 3.5
Aug 12, 2009 at 3:55 PM

Hi everybody
I have a tabcontrol as UI element region. When i add view to the region, the views are displyed very well but the tabItem header is empty.
How can i set this tabitem header?
 I don't want to define my tabItems before as their content are loaded dynamically.
Any help will be appreciate.
Thanks

Aug 13, 2009 at 5:12 PM

Hi blochaou,

 The usual approach for dynamically setting the TabItem's header for each view is:    

  1. In the ViewModel, have a property with the value you want for the header of that view using bindings.

 

public static string HeaderInfo
{
     get { return "Some Header";}
}

2. In the TabControl, use the ItemContainerStyle to dataBind the header to that property.

<TabControl.ItemContainerStyle>
                <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource SimpleTabItem}">
                    <Setter Property="Header" Value="{Binding Content.DataContext.HeaderInfo}" />
                </Style>
 </TabControl.ItemContainerStyle>     

This approach will let you define the header in the view and not in the TabControl.

For a complete example, you might find this approach used in the UIComposition Quickstarts and in the Reference Implementation.

Hope it helps! 

Matias Bonaventura
http://blogs.southworks.net/matiasb

Aug 14, 2010 at 5:51 PM
Edited Aug 14, 2010 at 6:33 PM

For Silverlight 4 and Prism 2.2, here is what I used to make it work:

In my shell, declare the TabControl as such:

<sdk:TabControl Grid.Row="1" Grid.Column="2" Regions:RegionManager.RegionName="Main.Tabs">
	<Regions:TabControlRegionAdapter.ItemContainerStyle>
				<Style TargetType="sdk:TabItem" BasedOn="{StaticResource DefaultTabItemStyle}">
			<Setter Property="HeaderTemplate">
				<Setter.Value>
					<DataTemplate>
						<TextBlock Text="{Binding HeaderInfo}" />
					</DataTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Regions:TabControlRegionAdapter.ItemContainerStyle>
</sdk:TabControl>

In my view, so something along the lines of:

public class XXX
{
	public string HeaderInfo { get { return "The Tab Header Title"; } }
}

public partial class NavDetailsView : UserControl
{
	public NavDetailsView()
	{
		this.DataContext = new XXX();

		InitializeComponent();
	}
}

Oct 19, 2010 at 6:07 PM

I've tried this method to no avail...I cannot get my TabControlRegionAdapter to databind. I'm using Silverlight 4 and Prism 4.

Please help as I need to this ability to set my tab item headers

Oct 19, 2010 at 6:48 PM
Edited Oct 19, 2010 at 6:49 PM

Hi,

This is implemented in the UI Composition Quickstart in the last drop (10) of Prism. So you could check how it works in the following files in the EmployeeModule project:

  • EmployeeSummaryView.xaml, see the HeaderTemplate in the TabControl
  • ExployeeDetailsViewModel.cs, see the ViewName property
  • EmployeeProjectsViewModel.cs, see the ViewName property

Please take into account that this quickstart is for Silverlight, but it should be pretty similar in WPF.

On the other hand, Prism provides the SelectorRegionAdapter out-of-the-box to expose a TabControl as a region (only for WPF).

Therefore, if you are creating a custom Region Adapter for a TabControl, you could take a look at the SelectorRegionAdapter, since it might help you.

Hope this helps.

Fernando Antivero
http://blogs.southworks.net/fantivero