TabControl with ContentTemplate bindning to Custom controls

[Alexey Oyun]

  Hi everybody,

  I have seen many examples of binding TabControl to some datasource. But all of them used same content template.
  What I want is to bind content template to different controls.

  Here is a problem:
  I have wizard with tab control. Most of the tabs remain same, but some do change relative to parameters in  main datacontext.

  So instead of creating duplicate controls I thought I could bind tab control to the list of objects that contain content controls. To get things working I have slightly changed one of the examples given in forum and got following:

MainPage.xaml

<UserControl x:Class="SilverlightApplication3.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
        xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">
    <UserControl.Resources>
        <telerik:ContainerBindingCollection x:Key="TabItemContainerBindings">
            <telerik:ContainerBinding PropertyName="IsSelected"
                    Binding="{Binding IsTabItemSelected, Mode=TwoWay}" />
        </telerik:ContainerBindingCollection>
        <DataTemplate x:Key="TabItemTemplate"
                telerik:ContainerBinding.ContainerBindings="{StaticResource TabItemContainerBindings}">
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
        <DataTemplate x:Key="TabContentTemplate"
                telerik:ContainerBinding.ContainerBindings="{StaticResource TabItemContainerBindings}">
            <ContentControl Content="{Binding Content, Mode=OneTime}"/>
        </DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <telerikNavigation:RadTabControl x:Name="tabControl1"
                                                                         ItemTemplate="{StaticResource TabItemTemplate}"
                                                                         ContentTemplate="{StaticResource TabContentTemplate}"
                                                                         Width="800" Height="500"
                                                                         HorizontalAlignment="Center"
                VerticalAlignment="Center" />
    </Grid>
</UserControl>

MainPage.xaml.cs

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace SilverlightApplication3
{
    public partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();
            tabControl1.ItemsSource = new DataItems();
        }
    }

    public class DataItems : ObservableCollection<DataItem>
    {
        public DataItems()
        {
            var dataItem = new DataItem();
            dataItem.Name = string.Format("Item 01");
            dataItem.Content = new TextBlock {Text = "Text"};
            Add(dataItem);
            dataItem = new DataItem();
            dataItem.Name = string.Format("Item 02");
            dataItem.Content = new Button{Content = "Button"};
            Add(dataItem);
        }
    }
}

public class DataItem : INotifyPropertyChanged
{
    private bool isTabItemSelected;
    private FrameworkElement _content;

    public bool IsTabItemSelected
    {
        get { return isTabItemSelected; }
        set
        {
            if (isTabItemSelected != value)
            {
                isTabItemSelected = value;
                OnPropertyChanged("IsTabItemSelected");
            }
        }
    }

    public string Name { get; set; }

    public FrameworkElement Content
    {
        get { return _content; }
        set
        {
            _content = value;
            OnPropertyChanged("Content");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

Everything seems work fine for the first time. But when I switch tab back I get error.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Wed, 14 Jul 2010 12:46:22 UTC


Message: Unhandled Error in Silverlight Application
Code: 4004
Category: ManagedRuntimeError
Message: System.ArgumentException: Value does not fall within the expected range.
   at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
   at MS.Internal.XcpImports.SetValue(IManagedPeerBase obj, DependencyProperty property, DependencyObject doh)
   at MS.Internal.XcpImports.SetValue(IManagedPeerBase doh, DependencyProperty property, Object obj)
   at System.Windows.DependencyObject.SetObjectValueToCore(DependencyProperty dp, Object value)
   at System.Windows.DependencyObject.SetEffectiveValue(DependencyProperty property, EffectiveValueEntry& newEntry, Object newValue)
   at System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, ValueOperation operation)
   at System.Windows.DependencyObject.RefreshExpression(DependencyProperty dp)
   at System.Windows.Data.BindingExpression.SendDataToTarget()
   at System.Windows.Data.BindingExpression.SourceAcquired()
   at System.Windows.Data.BindingExpression.System.Windows.IDataContextChangedListener.OnDataContextChanged(Object sender, DataContextChangedEventArgs e)
   at System.Windows.Data.BindingExpression.DataContextChanged(Object sender, DataContextChangedEventArgs e)
   at System.Windows.FrameworkElement.OnDataContextChanged(DataContextChangedEventArgs e)
   at System.Windows.FrameworkElement.OnTreeParentUpdated(DependencyObject newParent, Boolean bIsNewParentAlive)
   at System.Windows.DependencyObject.UpdateTreeParent(IManagedPeer oldParent, IManagedPeer newParent, Boolean bIsNewParentAlive, Boolean keepReferenceToParent)
   at MS.Internal.FrameworkCallbacks.ManagedPeerTreeUpdate(IntPtr oldParentElement, IntPtr parentElement, IntPtr childElement, Byte bIsParentAlive, Byte bKeepReferenceToParent)

Line: 54
Char: 13
Code: 0
URI: file: /184261_tabcontrolcontainerbindings/SilverlightApplication3/Bin/Debug/TestPage.html

So my question is.

Could anyone post an example of binding TabControl that loads different controls in tabs?

Thanks, Alexey.

[Miroslav]

Hi Alexey,

This exception normally comes up when an element part of the visual tree is added to it again.

In this case it happens because of a bug in Silverlight where the parent of the visuals is not cleared when they are changed using databinding. (In fact it is, but only for built-in a.k.a core dependency properties).

This has to be done manually, for example like so:

public FrameworkElement Content
{
    get {
        this.ClearParent(_content);
        return _content; }
    set
    {
        _content = value;
        OnPropertyChanged("Content");
    }
}

private void ClearParent(FrameworkElement _content)
{
    var contentPresenter = _content.Parent as ContentPresenter;
    if(contentPresenter != null)
    {
        contentPresenter.Content = null;
    }

    var contentControl = _content.Parent as ContentControl;
    if (contentControl != null)
    {
        contentControl.Content = null;
    }
}

There are other ways to get the same effect as well, it depends on what abstraction you are aiming for.

For example a "blendable" way to achieve this (with less ceremony) will be to have the different pages of the wizard as UserControls (or an inheritor of UC).

If you have an ItemsSource made up of visual elements, you can use the DisplayMemberPath property on the TabControl to specify which property will be used for the header of the tabs - no ContentTemplate is neccessary then.

Your approach with the models is also valid, this may give you more flexibility.

If you want to share one and the same ViewModel for all the pages in the wizard, then specifying the different UC pages in xaml will be an option as well.

Please  note that the TabControl will set the DataContext of the content area to be its data object. This can be turned off with the:

PropagateItemDataContextToContent

property.

Sincerely yours,
Miroslav
the Telerik team

[Alexey Oyun]

Thank you, just verified your code.

Sincerely, Alexey.

[Yonggu Kang]

Hi Telerik team,

I also have a similar problem, let me explain it.

I have a menu list in left pane and radTabcontrol in right region.Whenever user clicks menu item of panel in left, view is open in tabcontrol in right region. My views and viewmodels are so simple to edit and save key/value items in radGrid directly,and radControl has aggregate function to count. And only one view exists for each menu, not multi-instanced when clicked.

To open the view, click menu in left region,then it workd fine unitll 2 views are opened in tabcontrol, however 3rd view always throw exeption saying '4004 System argumentexception'. The problem is not sticked to specific view , whatever order I opened the view, 3rd veiw always throw exception.

Is this also same reason you explained of visual tree problem  ?
I looked almost all thread here with same error  and this thread would have some clue.

Your reply would be highly appreciated.

Kang

[Tina Stancheva]

Hello Yong-Gu Kang,

Please accept my apology for the delayed response. Unfortunately, I cannot be entirely sure what might be causing your issues. However, it is most likely that the reason is placing one visual element twice in the visual tree. Therefore, if you can send us a sample project illustrating your scenario, we will gladly investigate it further.

Also, I was wondering if you are using Prism to implement the described functionality. If this is indeed the case, then you can examine the attached example illustrating how to use the RadTabControl as Prism region container. Please note, that each ViewModel that is displayed in the RadTabControl contains a DetachFromVisualParent() method that clears the parents of the visuals. I hope it helps.

Still, if you need further info, please let us know.

Regards,
Tina Stancheva
the Telerik team

[Yonggu Kang]

Hi Tina,

Thank for your kind reply. Yes I use PRISM and this caused because I used old version's source of RadTabControlRegionAdapter which I took from some thread here for PRISM 2.0.  I'm in PRISM 4.0 drop 10 and changed only type name just adding 'Rad' in original TabControlRegionAdapter source and it solves all. Following is the code and you might look over to make it more suitable into RadTabControl for others.

using System;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Practices.Prism.Properties;
using Microsoft.Practices.Prism.Regions.Behaviors;
using Microsoft.Practices.Prism.Regions;
using Telerik.Windows.Controls;
using System.Collections.Generic;
using System.Collections.Specialized;

namespace SomeNamSpace
{
    /// <summary>
    /// Adapter that creates a new <see cref="Region"/> and binds all
    /// the views to the adapted <see cref="RadTabControl"/>.
    /// </summary>
    /// <remarks>
    /// This adapter is needed on Silverlight because the <see cref="RadTabControl"/> doesn't
    /// automatically create <see cref="RadTabItem"/>s when new items are added to
    /// the <see cref="ItemsControl.Items"/> collection.
    /// </remarks>
    public class RadTabControlRegionAdapter : RegionAdapterBase<RadTabControl>
    {
        /// <summary>
        /// <see cref="Style"/> to set to the created <see cref="RadTabItem"/>.
        /// </summary>
        public static readonly DependencyProperty ItemContainerStyleProperty =
            DependencyProperty.RegisterAttached("ItemContainerStyle", typeof(Style), typeof(RadTabControlRegionAdapter), null);

        /// <summary>
        /// Initializes a new instance of the <see cref="RadTabControlRegionAdapter"/> class.
        /// </summary>
        /// <param name="regionBehaviorFactory">The factory used to create the region behaviors to attach to the created regions.</param>
        public RadTabControlRegionAdapter(IRegionBehaviorFactory regionBehaviorFactory)
            : base(regionBehaviorFactory)
        {
        }

        /// <summary>
        /// Gets the <see cref="ItemContainerStyleProperty"/> property value.
        /// </summary>
        /// <param name="target">Target object of the attached property.</param>
        /// <returns>Value of the <see cref="ItemContainerStyleProperty"/> property.</returns>
        public static Style GetItemContainerStyle(DependencyObject target)
        {
            if (target == null) throw new ArgumentNullException("target");
            return (Style)target.GetValue(ItemContainerStyleProperty);
        }

        /// <summary>
        /// Sets the <see cref="ItemContainerStyleProperty"/> property value.
        /// </summary>
        /// <param name="target">Target object of the attached property.</param>
        /// <param name="value">Value to be set on the <see cref="ItemContainerStyleProperty"/> property.</param>
        public static void SetItemContainerStyle(DependencyObject target, Style value)
        {
            if (target == null) throw new ArgumentNullException("target");
            target.SetValue(ItemContainerStyleProperty, value);
        }

        /// <summary>
        /// Adapts a <see cref="RadTabControl"/> to an <see cref="IRegion"/>.
        /// </summary>
        /// <param name="region">The new region being used.</param>
        /// <param name="regionTarget">The object to adapt.</param>
        protected override void Adapt(IRegion region, RadTabControl regionTarget)
        {
            if (regionTarget == null) throw new ArgumentNullException("regionTarget");
            bool itemsSourceIsSet = regionTarget.ItemsSource != null;

            if (itemsSourceIsSet)
            {
                throw new InvalidOperationException("ItemsControlHasItemsSourceException");
            }
        }

        /// <summary>
        /// Attach new behaviors.
        /// </summary>
        /// <param name="region">The region being used.</param>
        /// <param name="regionTarget">The object to adapt.</param>
        /// <remarks>
        /// This class attaches the base behaviors and also keeps the <see cref="RadTabControl.SelectedItem"/>
        /// and the <see cref="IRegion.ActiveViews"/> in sync.
        /// </remarks>
        protected override void AttachBehaviors(IRegion region, RadTabControl regionTarget)
        {
            if (region == null) throw new ArgumentNullException("region");
            base.AttachBehaviors(region, regionTarget);
            if (!region.Behaviors.ContainsKey(RadTabControlRegionSyncBehavior.BehaviorKey))
            {
                region.Behaviors.Add(RadTabControlRegionSyncBehavior.BehaviorKey, new RadTabControlRegionSyncBehavior { HostControl = regionTarget });
            }
        }

        /// <summary>
        /// Creates a new instance of <see cref="Region"/>.
        /// </summary>
        /// <returns>A new instance of <see cref="Region"/>.</returns>
        protected override IRegion CreateRegion()
        {
            return new SingleActiveRegion();
        }
    }

    /// <summary>
    /// Behavior that generates <see cref="RadTabItem"/> containers for the added items
    /// and also keeps the <see cref="RadTabControl.SelectedItem"/> and the <see cref="IRegion.ActiveViews"/> in sync.
    /// </summary>
    public class RadTabControlRegionSyncBehavior : RegionBehavior, IHostAwareRegionBehavior
    {
        ///<summary>
        /// The behavior key for this region sync behavior.
        ///</summary>
        public const string BehaviorKey = "RadTabControlRegionSyncBehavior";

        private static readonly DependencyProperty IsGeneratedProperty =
            DependencyProperty.RegisterAttached("IsGenerated", typeof(bool), typeof(RadTabControlRegionSyncBehavior), null);

        private RadTabControl hostControl;

        /// <summary>
        /// Gets or sets the <see cref="DependencyObject"/> that the <see cref="IRegion"/> is attached to.
        /// </summary>
        /// <value>A <see cref="DependencyObject"/> that the <see cref="IRegion"/> is attached to.
        /// This is usually a <see cref="FrameworkElement"/> that is part of the tree.</value>
        public DependencyObject HostControl
        {
            get
            {
                return this.hostControl;
            }

            set
            {
                RadTabControl newValue = value as RadTabControl;
                if (newValue == null)
                {
                    throw new InvalidOperationException("HostControlMustBeARadTabControl");
                }

                if (IsAttached)
                {
                    throw new InvalidOperationException("HostControlCannotBeSetAfterAttach");
                }

                this.hostControl = newValue;
            }
        }

        /// <summary>
        /// Override this method to perform the logic after the behavior has been attached.
        /// </summary>
        protected override void OnAttach()
        {
            if (this.hostControl == null)
            {
                throw new InvalidOperationException("HostControlCannotBeNull");
            }

            this.SynchronizeItems();

            this.hostControl.SelectionChanged += this.OnSelectionChanged;
            this.Region.ActiveViews.CollectionChanged += this.OnActiveViewsChanged;
            this.Region.Views.CollectionChanged += this.OnViewsChanged;
        }

        /// <summary>
        /// Gets the item contained in the <see cref="RadTabItem"/>.
        /// </summary>
        /// <param name="tabItem">The container item.</param>
        /// <returns>The item contained in the <paramref name="tabItem"/> if it was generated automatically by the behavior; otherwise <paramref name="tabItem"/>.</returns>
        protected virtual object GetContainedItem(RadTabItem tabItem)
        {
            if (tabItem == null) throw new ArgumentNullException("tabItem");
            if ((bool)tabItem.GetValue(IsGeneratedProperty))
            {
                return tabItem.Content;
            }

            return tabItem;
        }

        /// <summary>
        /// Override to change how RadTabItem's are prepared for items.
        /// </summary>
        /// <param name="item">The item to wrap in a RadTabItem</param>
        /// <param name="parent">The parent <see cref="DependencyObject"/></param>
        /// <returns>A tab item that wraps the supplied <paramref name="item"/></returns>
        protected virtual RadTabItem PrepareContainerForItem(object item, DependencyObject parent)
        {
            RadTabItem container = item as RadTabItem;
            if (container == null)
            {
                object dataContext = GetDataContext(item);
                container = new RadTabItem();
                container.Content = item;
                container.Style = RadTabControlRegionAdapter.GetItemContainerStyle(parent);
                container.DataContext = dataContext; // To run with SL 2
                container.Header = dataContext; // To run with SL 3
                container.SetValue(IsGeneratedProperty, true);
            }

            return container;
        }

        /// <summary>
        /// Undoes the effects of the <see cref="PrepareContainerForItem"/> method.
        /// </summary>
        /// <param name="tabItem">The container element for the item.</param>
        protected virtual void ClearContainerForItem(RadTabItem tabItem)
        {
            if (tabItem == null) throw new ArgumentNullException("tabItem");
            if ((bool)tabItem.GetValue(IsGeneratedProperty))
            {
                tabItem.Content = null;
            }
        }

        /// <summary>
        /// Creates or identifies the element that is used to display the given item.
        /// </summary>
        /// <param name="item">The item to get the container for.</param>
        /// <param name="itemCollection">The parent's <see cref="ItemCollection"/>.</param>
        /// <returns>The element that is used to display the given item.</returns>
        protected virtual RadTabItem GetContainerForItem(object item, ItemCollection itemCollection)
        {
            if (itemCollection == null) throw new ArgumentNullException("itemCollection");
            RadTabItem container = item as RadTabItem;
            if (container != null && ((bool)container.GetValue(IsGeneratedProperty)) == false)
            {
                return container;
            }

            foreach (RadTabItem tabItem in itemCollection)
            {
                if ((bool)tabItem.GetValue(IsGeneratedProperty))
                {
                    if (tabItem.Content == item)
                    {
                        return tabItem;
                    }
                }
            }


            return null;
        }

        /// <summary>
        /// Return the appropriate data context.  If the item is a FrameworkElement it cannot be a data context in Silverlight, so we use its data context.
        /// Otherwise, we just us the item as the data context.
        /// </summary>
        private static object GetDataContext(object item)
        {
            FrameworkElement frameworkElement = item as FrameworkElement;
            return frameworkElement == null ? item : frameworkElement.DataContext;
        }

        private void SynchronizeItems()
        {
            List<object> existingItems = new List<object>();
            if (this.hostControl.Items.Count > 0)
            {
                // Control must be empty before "Binding" to a region
                foreach (object childItem in this.hostControl.Items)
                {
                    existingItems.Add(childItem);
                }
            }

            foreach (object view in this.Region.Views)
            {
                RadTabItem tabItem = this.PrepareContainerForItem(view, this.hostControl);
                this.hostControl.Items.Add(tabItem);
            }

            foreach (object existingItem in existingItems)
            {
                this.Region.Add(existingItem);
            }
        }

        //private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        private void OnSelectionChanged(object sender, RoutedEventArgs args)
        {
            var e = args as RadSelectionChangedEventArgs;
            // e.OriginalSource == null, that's why we use sender.
            if (this.hostControl == sender)
            {
                foreach (RadTabItem tabItem in e.RemovedItems)
                {
                    object item = this.GetContainedItem(tabItem);

                    // check if the view is in both Views and ActiveViews collections (there may be out of sync)
                    if (this.Region.Views.Contains(item) && this.Region.ActiveViews.Contains(item))
                    {
                        this.Region.Deactivate(item);
                    }
                }

                foreach (RadTabItem tabItem in e.AddedItems)
                {
                    object item = this.GetContainedItem(tabItem);
                    if (!this.Region.ActiveViews.Contains(item))
                    {
                        this.Region.Activate(item);
                    }
                }
            }
        }

        private void OnActiveViewsChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Add)
            {
                this.hostControl.SelectedItem = this.GetContainerForItem(e.NewItems[0], this.hostControl.Items);
            }
            else if (e.Action == NotifyCollectionChangedAction.Remove
                && this.hostControl.SelectedItem != null
                && e.OldItems.Contains(this.GetContainedItem((RadTabItem)this.hostControl.SelectedItem)))
            {
                this.hostControl.SelectedItem = null;
            }
        }

        private void OnViewsChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Add)
            {
                foreach (object newItem in e.NewItems)
                {
                    RadTabItem tabItem = this.PrepareContainerForItem(newItem, this.hostControl);
                    this.hostControl.Items.Add(tabItem);
                }
            }
            else if (e.Action == NotifyCollectionChangedAction.Remove)
            {
                foreach (object oldItem in e.OldItems)
                {
                    RadTabItem tabItem = this.GetContainerForItem(oldItem, this.hostControl.Items);
                    this.hostControl.Items.Remove(tabItem);
                    this.ClearContainerForItem(tabItem);
                }
            }
        }
    }

}

RGDS
Kang

[Ganesh Shivshankar]

Hi Kang,

 

I have used the RadTabControlRegionAdapter which you have shown above. Everything works fine, except the Tab item header appears while loading and disappears when completely loaded

 

my xaml is as follows

 

<Telerik:RadTabControl BorderThickness="1" ItemsSource="{Binding}" BackgroundVisibility="Collapsed" SelectedIndex="{Binding SelectedTabIndex, Mode=TwoWay}" Regions:RegionManager.RegionName="TabRegion">
                            <RadTabRegionAdapter:RadTabControlRegionAdapter.ItemContainerStyle>
                                <Style TargetType="Telerik:RadTabItem">
                                    <Setter Property="HeaderTemplate">
                                        <Setter.Value>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding HeaderInfo}" />
                                            </DataTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </RadTabRegionAdapter:RadTabControlRegionAdapter.ItemContainerStyle>
                        </Telerik:RadTabControl>

where HeaderInfo is defined in the Datacontext for each of the tabitems. Any idea why that could be happening?

Cheers,
Ganesh

[Alex Fidanov]

Hello Ganesh Shivshankar,

It seems this is the same as the issue logged in our PITS here. Both approaches use a HeaderTemplate for the RadTabItem and it is not correctly initialized. We are working on it and you can keep track of this issue from the PITS item.

Greetings,
Alex Fidanov
the Telerik team

[Lenka]

Just wanted to say *** thank you *** !
I found this discussion (and fix) after a long struggle and it fixed my problem and made my day!

[Joseph Gershgorin]

I had a similar issue which was solved by using the following extended version of the RadTabControl:
http://www.friendlyninja.com/2010/12/01/telerik-radtabcontrol-and-dynamic-tab-generationdisposal/

Anyone from Telerik have any comments about implementing the RadTabControl using the above methodology?

[Tina Stancheva]

Hi Joseph,

The workaround for your issues is good, as long as it works for you. However, since you say that you have noticed large memory consumption when using the RadTabControl in your scenario, I wanted to ask you whether you can elaborate on your implementation or send us a sample project so that we can look into this issue.

Also, I wanted to let you know that when you give the TabControl a ContentTemplate and bind it to some collection of items, then switching between tabs makes the TabControl unload the content of the last active item and load the content of the newly selected item. The reason is that the RadTabControl has only one ContentPresenter which holds the currently selected RadTabItem. However, we are currently working on this issue and you can track its status in our PITS. And if you can send us a sample project we will test it against the current implementation of the RadTabControl as well as the new one, implementing a fix for the single ContentPresenter issue.

Looking forward your reply,
Tina Stancheva
the Telerik team