RadTabControl Error: Value does not fall within the expected range

4 posts, 1 answers
  1. Marc-André
    Marc-André avatar
    3 posts
    Member since:
    Jan 2009

    Posted 22 Jul 2010 Link to this post

    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: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
  2. Answer
    Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 23 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Marc-André
    Marc-André avatar
    3 posts
    Member since:
    Jan 2009

    Posted 25 Jul 2010 Link to this post

    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>
  5. Ladislav
    Ladislav avatar
    32 posts
    Member since:
    Jan 2009

    Posted 13 Sep 2010 Link to this post

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

    Regards
    Ladislav
Back to Top