Turning Between Pages Error

[bydt]

Hi,

I am happy Telerik provides Book navigation control, great control and customizable.

Unfortunately, I've found error when performing flip between pages. It was ok when i flipped from first page to the last, the problem raised when i was turning back and forth 2 or 3 pages :(

Could you help me please?

here is my xaml code :

<Grid.Resources>
            <!--Front Cover Template-->
            <DataTemplate x:Key="FrontCoverTemplate">
                <Grid>
                    <ContentControl Content="{Binding PageItemContent,Mode=TwoWay}"/>
                    <TextBlock FontFamily="Courier New" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}"/>
                </Grid>
            </DataTemplate>
            <!--Inner Left Page Template-->
            <DataTemplate x:Key="LeftPageTemplate">
                <Grid>

                    <ContentControl  Content="{Binding PageItemContent,Mode=TwoWay}"/>
                    <TextBlock FontFamily="Courier New" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}"/>
                </Grid>
            </DataTemplate>
            <!--Inner Right Page Template-->
            <DataTemplate x:Key="RightPageTemplate">
                <Grid>
                    <ContentControl Content="{Binding PageItemContent,Mode=TwoWay}"/>
                    <TextBlock FontFamily="Courier New" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}"/>
                </Grid>
            </DataTemplate>
            <!--Back Cover Template-->
            <DataTemplate x:Key="BackCoverTemplate">
                <Grid>
                    <ContentControl Content="{Binding PageItemContent,Mode=TwoWay}"/>
                    <TextBlock FontFamily="Courier New" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}"/>
                </Grid>
            </DataTemplate>
            <local:LeftPageTemplateSelector x:Key="LeftPageTemplateSelector"
             BackCoverTemplate="{StaticResource BackCoverTemplate}"
             LeftPageTemplate="{StaticResource LeftPageTemplate}" />
            <local:RightPageTemplateSelector x:Key="RightPageTemplateSelector"
             FrontCoverTemplate="{StaticResource FrontCoverTemplate}"
             RightPageTemplate="{StaticResource RightPageTemplate}" />
        </Grid.Resources>

        <telerikNavigation:RadBook ItemsSource="{Binding MyBook}"
                                   LeftPageTemplateSelector="{StaticResource LeftPageTemplateSelector}"
                                   RightPageTemplateSelector="{StaticResource RightPageTemplateSelector}"
                                   FirstPagePosition="Right"
                                   x:Name="RadBook1" >
            <telerikNavigation:RadBook.ItemContainerStyle>
                <Style TargetType="telerikNavigation:RadBookItem">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="BorderThickness" Value="0" />
                </Style>
            </telerikNavigation:RadBook.ItemContainerStyle>
        </telerikNavigation:RadBook>
    </Grid>

noted that PageItemContent in ContentControl is a UserControl (i am going to inject an xaml to the page).

public class PageItem:INotifyPropertyChanged
{
    private string _title;

    public string Title
    {
        get { return _title; }
        set { _title = value; }
    }
    private UserControl _pageItemContent;

    public UserControl PageItemContent
    {
        get { return _pageItemContent; }
        set
        {
            if (value != this._pageItemContent)
            {
                this._pageItemContent = value;
                NotifyPropertyChanged("PageItemContent");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(String info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }
}

I am using MVVM and Q22010. 

And here is the error on IE 

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E)
Timestamp: Sat, 20 Nov 2010 05:28:45 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.OnAncestorDataContextChanged(DataContextChangedEventArgs e)
   at System.Windows.FrameworkElement.NotifyDataContextChanged(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, Byte bCanCreateParent)

Line: 56
Char: 13
Code: 0
URI: http://localhost:52277/TestPage.aspx

[Kiril Stanoev]

Hello Bayudita,

First of all, let me explain why you experience this error. I see that in your ViewModel (PageItem) you have a visual element - UserControl PageItemContent. RadBook is virutalized by default, which means that the containers (RadBookItem) for your data items (PageItem) will be reused. This creates the situation where one visual element is in the visual tree in more than one place - thus the Value does not fall within the expected range error.  It is considered a bad practice to mix data and visual stuff. That is why I'd suggest, if it is possible however, to change your ViewModel and make the PageItemContent of type that is not visual element.
The other suggestion I can give is to set IsVirtualizing="False" in RadBook. This will turn off the virtualization and make your current scenario working. However, if you plan to have hundreds of pages, turning off the virtualization will have a performance impact on your application.

Let me know which approach you will choose.

Kind regards,
Kiril Stanoev
the Telerik team