Prism How-To: Provide metadata to a view that was placed into a region

If you downloaded our fourth drop probably you may have noticed that we have removed the IMetadataInfo and IMetadataInfoProvider classes. (See Julian's post for more info about this change).

In the Prism Forum some people are asking how to provide metadata to the view now that the IMetadataInfo class has been removed, so in this post I will explain how to do it.

Imagine that you have a TabRegion named MainRegion in your Shell and you want to add a view to it.

 <TabControl Name="Tab" Prism:RegionManager.Region="MainRegion">

After you do this

regionManagerService.GetRegion("MainRegion").Add(new View())

you will see something like the following picture

Looks good, but… we don't have a header, so let's see how to do it

• Create a HeaderModel class

  namespace PrismTabHeader
  {
      using System.Windows;
  
      public class HeaderModel : DependencyObject
      {
          public static readonly DependencyProperty HeaderInfoProperty =
              DependencyProperty.Register("HeaderInfo", typeof(string), typeof(HeaderModel));
  
          public string HeaderInfo
          {
              get { return (string)GetValue(HeaderInfoProperty); }
              set { SetValue(HeaderInfoProperty, value); }
          }
      }
  }
  

  This class contains a HeaderInfo dependency property.

• Update the view by adding the Model property.

  public HeaderModel Model
  {
      get { return DataContext as HeaderModel; }
      set { DataContext = value; }
  }
  

• Create a new style named HeaderStyle in the Shell.

 

<Window.Resources>
  <Style TargetType="{x:Type TabItem}" x:Key="HeaderStyle">
     <Setter Property="Header" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content.DataContext.HeaderInfo}" />
  </Style>
</Window.Resources>

This style is going to be applied to TabItem elements and is saying that the value of the property Header is going to binded to Content.DataContext.HeaderInfo where Content is the view.

Note: You can also expose a HeaderInfo property in the view and change the binding path to Content.HeaderInfo.

• Replace the TabControl definition of your Shell with the following code

 

 

<TabControl Name="Tab" Prism:RegionManager.Region="MainRegion" ItemContainerStyle="{StaticResource HeaderStyle}" />

As you may see we are setting the ItemContainerStyle dependency property to affect the appearance of the elements that contain the data items. In this case, the style is going to be applied to all TabItem elements within the scope the style is defined in.

 

• Set the Model to the view before adding it to the region

  View view = new View();
  
  view.Model = new HeaderModel() { HeaderInfo = "My Header" };
  
  region.Add(view);
  

If you run the application now you will see the header.

Hope this helps.

Tags: Composite Application Guidance for WPF, Composite Application Library, Composite WPF, CWPF, Patterns & Practices, Prism, Visual Studio 2008, Windows Presentation Foundation, WPF, WPF Composite Client