Converting from prism:TabControl to telerik:RadTabControl

[Dragos]

Good day,
       I had a Silverlight demo project build on top of prism illustrating UI composition.
       One of the key members of my demo was a TabControl with a region which gets populated OnDemand.

       I've migrated the project to use Telerik controls and one change I made was switching from TabControl to RadTabControl (I am using Telerik controls vs 2011.1.315.1040) and now a couple of things that worked before stopped working now.

• For the TabItem.ItemContainerStyle I had the following setting:
   

  <Setter Property="HeaderTemplate">
         <Setter.Value>
             <!--Display the child view name on the tab header-->
             <DataTemplate>
                 <!--for some reason this does not work with radTabControl-->
                 <TextBlock Text="{Binding ViewName}" />
             </DataTemplate>
         </Setter.Value>
     </Setter>

  Now when I create new tabs in the TabControl they will have no name -> ugly and not what I wanted. How can I get the ViewName to show up in the TabItem?
• I populated the TabControl with the following code
  

  Dim lReg As IRegion = Me.mRegionManager.Regions("RequestsTabReqion")
  Dim lRqViewID As String = CommonDefinitions.Constants.BuildRqViewName(iRqId)
  Dim lInfoCardsView As RequestDetailsView = TryCast(lReg.GetView(lRqViewID), RequestDetailsView)
  If lInfoCardsView Is Nothing Then
     lInfoCardsView = New RequestDetailsView()
     Dim lRegMan1 As IRegionManager = lReg.Add(lInfoCardsView, lRqViewID, True)
     lInfoCardsView.SetRegionManager(lRegMan1)
     lInfoCardsView.PopulateWithInfoCards()
     mRegionManager.Regions("RequestsTabReqion").Activate(lInfoCardsView)
  Else
     mRegionManager.Regions("RequestsTabReqion").Activate(lInfoCardsView)
  End If

  Which correctly inserted the tabItem and navigated to the correct tab.
  With the RadTabControl the tab is created but the content area associated to the Tab is not shown. Also the repositioning on the correct tab no longer works.
  How can I get this to work with the RadTabControl?

The RadTabControl code I use:

<telerik:RadTabControl Grid.Row="1" AutomationProperties.AutomationId="RequestTabView"  DropDownDisplayMode="Visible" Margin="2,2,2,2"
                        prism:RegionManager.RegionName="RequestsTabReqion" BackgroundVisibility="Collapsed"
                        prism:RegionManager.RegionContext="{Binding CurrentEmployee}" TabStripPlacement="Top"  BorderThickness="3" BorderBrush="#FF6B43A9" Background="{x:Null}" >
</telerik:RadTabControl>

Any help would be greatly appreciated.
Thanks in advance,
Dragos

[Tina Stancheva]

Hi Dragos,

Basically when a UI control is exposed as a region, a region adapter is used for creating a region and associating it to the control. There is a TabControlRegionAdapter that is especially designed to to configure the TabControl and its TabItems as regions.

However, the RadTabControl doesn't have a custom region adapter and the default region adapter doesn't set the RadTabControl.ItemContainerStyle as Style for the RadTabItems and this is why the HeaderTemplate isn't applied. Therefore you will need to define a RadTabControl region adapter. I prepared a sample project illustrating a possible approach towards your scenario. Please have a look at it and let us know if it works for you.

Also, there is a feature request in our PITS to provide a region adapter for the RadTabControl. You can vote for the item and if it gathers enough popularity, we will definitely consider implementing it.

Best wishes,
Tina Stancheva
the Telerik team

[Dragos]

Hello and thanks Tina,
      Your example was good and it got me on the right path.
      With some changes to your example (e.g. I'm using the Mef bootstrapper instead of the Unity bootstrapper) I was able to replace the TabControl with the RadTabControl in all but one aspect (where I could really use your help).

Below is the code I use to create/navigate to the correct view/tab item. This navigation is trigger by selecting items in a list box.

Dim lReg As IRegion = Me.mRegionManager.Regions(CommonDefinitions.RegionNames.RequestsTabReqion)
      Dim lRqViewID As String = CommonDefinitions.Constants.BuildRqViewName(iRqId)
      Dim lInfoCardsView As RequestDetailsView = TryCast(lReg.GetView(lRqViewID), RequestDetailsView)
      If lInfoCardsView Is Nothing Then
         lInfoCardsView = New RequestDetailsView(lRqViewID)
         lInfoCardsView.Name = lRqViewID
         Dim lRegMan1 As IRegionManager = lReg.Add(lInfoCardsView, lRqViewID, True)
         lInfoCardsView.SetRegionManager(lRegMan1)

         TryCast(lInfoCardsView.DataContext, InfoCardsViewModel).IsInfoCardSelected = True
         lReg.Activate(lInfoCardsView)
      Else
         TryCast(lInfoCardsView.DataContext, InfoCardsViewModel).IsInfoCardSelected = True
         mRegionManager.Regions(CommonDefinitions.RegionNames.RequestsTabReqion).Activate(lInfoCardsView)
      End If

The problem is that the view/tab is created but not navigated to :( -> so I cannot navigate the opened tabs/views from my list box (this part used to work with the TabControl).

How can I solve this last remaining issue? Are there other information you could use/require to understand what is going on in my code?

Thanks again for your support,
Dragos

[Tina Stancheva]

Hello Dragos,

Unfortunately this is a known issue in the RadTabControl - activating a view in the RadTabControl, doesn't select the respective view. The issue is logged in our PITS where you can track its progress.

This is why in the sample project I sent you, I bound the RadTabItems IsSelected property and I set it each time a view is activated.
In the code snippet you sent I can see that you also set a IsInfoCardSelected property but I am not sure how this property is used to trigger a selection in the RadTabControl and this is why I cannot tell why it doesn't works. Can you send us a small sample illustrating your scenario and reproducing the issue, so that we can further look into it? Thank you in advance for your cooperation.

All the best,
Tina Stancheva
the Telerik team

[Aaron]

For those using MEF, there are a few minor changes from the posted solution. Here are the changes you'll need to make.

In the Bootstrapper code:

Protected Overrides Function ConfigureRegionAdapterMappings() As RegionAdapterMappings
    Dim mappings = MyBase.ConfigureRegionAdapterMappings()
    'mappings.RegisterMapping(GetType(RadTabControl), Container.TryResolve(Of RadTabControlAdapter)())
    mappings.RegisterMapping(GetType(RadTabControl), Container.GetExportedValue(Of RadTabControlAdapter)())

    Return mappings
End Function

in the RadTabControlAdapter class:

'Add this <Export> _ statement
<Export> _
Public Class RadTabControlAdapter
    Inherits RegionAdapterBase(Of RadTabControl)

    'Add this <ImportingConstructor> _ statement
    <ImportingConstructor> _
    Public Sub New(ByVal regionBehaviorFactory As IRegionBehaviorFactory)
        MyBase.New(regionBehaviorFactory)
    End Sub

Hope this helps someone out. :)

[Tina Stancheva]

Hi Aaron,

Thank you for sharing your approach with the community. I also want to upload a sample solution in case anyone has to use the RadTabControl as a region in a MEF application. The solution basically showcases a custom RegionAdapter for the component that makes sure to select a tab when its corresponding view is activated or navigated to.

I hope you will find the solution useful.

Regards,
Tina Stancheva
Telerik