[Solved] RadTabControl Error: Value does not fall within the expected range

[Marc-André]

Hi,

I've seen this bug reported in 2 other posts but they did not solve my problem:
http://www.telerik.com/community/forums/silverlight/tabcontrol/radtabcontrol-value-does-not-fall-within-the-expected-range.aspx
http://www.telerik.com/community/forums/silverlight/tabcontrol/tabcontrol-with-contenttemplate-bindning-to-custom-controls.aspx

When I switch between my dynamically created tabs, I get the error "Value does not fall within the expected range".  I tried the solutions in both posts but they don't seem to work for me.

Here is a sample project that causes the bug:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;
using System.Collections.Generic;

namespace TestRadTabs
{
    public class MainPageViewModel : INotifyPropertyChanged
    {

        public MainPageViewModel()
        {
            BuildTabs();
        }

        private void BuildTabs()
        {
            TabItems = new ObservableCollection<TabItemContent>();
            List<string> tabs = new List<string>() { "tab1", "tab2", "tab3" };

            foreach (string oneTab in tabs)
            {
                TabItems.Add(new TabItemContent(oneTab, CreateTabContent(oneTab) ));
            }

        }

        private UIElement CreateTabContent(string oneTab)
        {
            StackPanel panel = new StackPanel();
            panel.Orientation = Orientation.Vertical;
            panel.Children.Add(new TextBlock() { Text = oneTab+"test123" });
            panel.Children.Add(new TextBlock() { Text = oneTab+"test123" });
            panel.Children.Add(new TextBlock() { Text = oneTab+"test123" });

            return panel;
        }


        /// <summary>
        /// The <see cref="TabItems" /> property's name.
        /// </summary>
        public const string TabItemsPropertyName = "TabItems";

        private ObservableCollection<TabItemContent> _tabItems = null;

        /// <summary>
        /// Gets the TabItems property.
        /// TODO Update documentation:
        /// Changes to that property's value raise the PropertyChanged event.
        /// This property's value is broadcasted by the Messenger's default instance when it changes.
        /// </summary>
        public ObservableCollection<TabItemContent> TabItems
        {
            get
            {
                return _tabItems;
            }

            set
            {
                if (_tabItems == value)
                {
                    return;
                }

                var oldValue = _tabItems;
                _tabItems = value;

                // Update bindings, no broadcast
                RaisePropertyChanged(TabItemsPropertyName);
            }
        }


        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;

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

        #endregion INotifyPropertyChanged Members

    }

}

<UserControl x:Class="TestRadTabs.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

                xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
             Loaded="MainPage_Loaded"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerikNavigation:RadTabControl VerticalAlignment="Top" Background="Transparent"
                 DisplayMemberPath="Title"  DropDownDisplayMode="Collapsed"  MinHeight="280" MinWidth="800"
                    BorderThickness="0" ItemsSource="{Binding TabItems}">

            <telerikNavigation:RadTabControl.ContentTemplate>
                <DataTemplate>
                    <ContentPresenter Content="{Binding UserControl}" />
                </DataTemplate>
            </telerikNavigation:RadTabControl.ContentTemplate>

        </telerikNavigation:RadTabControl>
    </Grid>
</UserControl>

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TestRadTabs
{
    public class TabItemContent
    {
        private FrameworkElement control;
        public TabItemContent(string title, UIElement userControl)
        {
            Title = title;
            control = (FrameworkElement)userControl;
        }


        public string Title
        {
            get;
            private set;
        }

        public UIElement UserControl
        {
            get
            {
                ClearParent(control);
                //if (control.Parent != null)
                //{
                //    (control.Parent as UserControl).Content = null;
                //}
                return control;
            }
            private set
            {
                this.control = (FrameworkElement)value;

            }

        }

        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;
            }
        }

    }


    //public class TabItemContent
    //{
    //    private FrameworkElement control;
    //    public TabItemContent(string title, UIElement userControl)
    //    {
    //        Title = title;
    //        control = (FrameworkElement)userControl;
    //    }


    //    public string Title
    //    {
    //        get;
    //        private set;
    //    }

    //    public UIElement UserControl
    //    {
    //        get
    //        {
    //            if (control.Parent != null)
    //            {
    //                (control.Parent as UserControl).Content = null;
    //            }
    //            return control;
    //        }
    //        private set
    //        {
    //            this.control = (FrameworkElement)value;

    //        }

    //    }
    //}

}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TestRadTabs
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            if (this.DataContext == null || this.DataContext.GetType() == null || this.DataContext.GetType() != typeof(MainPageViewModel))
                this.DataContext = new MainPageViewModel();

        }

    }
}

Please let me know if you find a solution.

Thanks

Marc

[Valentin.Stoychev]

Hi Marc-André,

I believe you have the same problem as described here:
http://www.telerik.com/community/forums/silverlight/tabcontrol/tabcontrol-with-contenttemplate-bindning-to-custom-controls.aspx

Can you please double check that you are cleaning the content of the ContentPresenter? Please try not to use a ContentPresenter in your data template so we can verify that this is where the problem comes from.

Kind regards,
Valentin.Stoychev
the Telerik team

[Marc-André]

Instead of using this:

<telerikNavigation:RadTabControl.ContentTemplate>
                <DataTemplate>
                    <ContentPresenter Content="{Binding UserControl}" />
                </DataTemplate>
            </telerikNavigation:RadTabControl.ContentTemplate>

I used this code (like on the other forum post) and it seems to work fine now.  Thanks

<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 Title}" />
        </DataTemplate>

        <DataTemplate x:Key="TabContentTemplate"
                telerik:ContainerBinding.ContainerBindings="{StaticResource TabItemContainerBindings}">
            <ContentControl Content="{Binding UserControl, Mode=OneTime}"/>
        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerikNavigation:RadTabControl VerticalAlignment="Top" Background="Transparent"
                   DropDownDisplayMode="Collapsed"  MinHeight="280" MinWidth="800"
                    BorderThickness="0" ItemsSource="{Binding TabItems}"
                    ItemTemplate="{StaticResource TabItemTemplate}"
                    ContentTemplate="{StaticResource TabContentTemplate}"
                                         >

        </telerikNavigation:RadTabControl>

[Ladislav]

Hi,
your solution does not work for me. For now I can use the SelectionChanged event and set the usercontrol pre code.

Regards
Ladislav