Question

I have created a Scrollviewer in WP7, which harbors 3 usercontrol, each one of which hold as their content XAML created UserControls. This works fine. This scrollviewer should be able to scroll between these items, but make this not possible for the user to scroll. So when an item in one of these contents are clicked upon, the scrollviewer slides left or right depending on the item selected, and bring into view one of the other usercontrols. I use a mediator to accomplish this:

<Grid.Resources>
        <Storyboard x:Name="ItemAnimation">
            <DoubleAnimation x:Name="ItemAnimationContent"
                             Storyboard.TargetName="Mediator"
                             Storyboard.TargetProperty="ScrollableWidthMultiplier"/>
        </Storyboard>
</Grid.Resources> 
<ScrollViewer Name="ScrollableItemPanel" 
                  Grid.Row="2" 
                  Grid.RowSpan="3" 
                  Grid.ColumnSpan="3"
                  VerticalScrollBarVisibility="Disabled"
                  HorizontalScrollBarVisibility="Disabled">

        <StackPanel Orientation="Horizontal">
            <UserControl    Name="NewsListBoxControl" Width="480" />
            <UserControl    Name="DetailedItemControl" Width="480"/>            
            <UserControl    Name="ExternalBrowserItemControl" Width="480"/>
        </StackPanel>
    </ScrollViewer>

    <local:ScrollableItemAnimationMediator x:Name="Mediator" 
                                           ScrollViewer="{Binding ElementName=ScrollableItemPanel}"/>

In basic, this works fine too, I can navigate between the items, and load upon them the content as usercontrols. But the problem lies in granting the user the abillity to scroll. Before the item scrolls, I set the hittestvisibilty to true, and the horizontalscrollbarvisibility to visible. After the animation is done, I want to grant back the hittestvisibility and set the horizontalscrollbarvisibility to Disabled again. This latter is where the problem is: when I set the horizontalscrollbarvisibility to Disabled, the scrollviewer automatically brings back into view the first of three items in the stackpanel. How can I stop this? This is the code I use to scroll the mediator:

private void CreateDetailedArticleItem( Dictionary<string, string> itemQuery )
    {
        _articleDetailPage.ItemQuery = itemQuery;
        DetailedItemControl.Content = _articleDetailPage as UserControl;
        Animate( _articleDetailPage, 0.0f, 0.5f, 250 );
    }

private void Animate( IContentControl control, float from, float to, double milliseconds )
    {                                                                                                                            
        //this eventhandler will fire when the animation has completed
        EventHandler handler = null;
        //we take away the User Input just for the moment, so that we can animate without the user interfering. Also, we make horizontalScroll Visible
        IsUserEnabled = false;

        //we then set the content of the animation. Where from will it move, towards where and in what duration?
        ItemAnimationContent.From = from;
        ItemAnimationContent.To = to;
        ItemAnimationContent.Duration = TimeSpan.FromMilliseconds( milliseconds );
        //we start the animation
        ItemAnimation.Begin( );

        //we tell the new control that it will appear soon, so it can load its main content
        control.ViewWillAppear( );
        //also, we tell the currentcontrol that it will disappear soon, so it can unload its content and eventhandlers and so on
        CurrentControl.ViewWillDisAppear( );

        //the handler is a delegate. This way, it becomes rather easy and clean to fire the completed event, without creating a strong reference ( well, actually,
        //we do create a strong reference, but as soon as it is fired, we remove it again, shhhh! ).
        handler = delegate( object sender, EventArgs e )
        {
            //as stated, we remove the eventlistener again, so it won't keep firing all the time
            ItemAnimation.Completed -= handler;

            //after the animation, we tell the new control that it is now in screen, and can start downloading its data
            control.ViewDidAppear( );
            //at the same time, the "current" control has fully moved out of view, so it can now fully unload all its content.
            CurrentControl.ViewDidDisAppear( );
            //now, all we have to do is to make sure that the next time an item is being loaded, the new content is spoken to, not the old one
            CurrentControl = control;

            //and finally, enable the users input again, and remove the horizontal scrollbarvisibility
            IsUserEnabled = true;                
        };            
        ItemAnimation.Completed += handler;
    }
 private bool IsUserEnabled
    {
        set
        {
            //when the user can control the scrollviewer, then the horizontal scrollvisibility is disabled, so that the user cannot move horizontally,
            //otherwise, so we only make it visible when the program needs to animate.
            ScrollableItemPanel.IsHitTestVisible = value;
            ScrollableItemPanel.HorizontalScrollBarVisibility = value ? ScrollBarVisibility.Disabled : ScrollBarVisibility.Visible;
        }
    }

I had already asked this question, then regarded it as answered, as I thought it to be answered, namely using ScrollbarVisibility.Hidden instead of ScrollbarVisibility.Disabled, only the scrollbarvisibility stays visible this way, and the user can still scroll. Is there a native way to deal with this problem?

Any help would be greatly appreciated. Greetz

Answer 1

Rather than fight the behavior of the native control it may be easier to just manipulate the position of items yourself using a custom control (wrapping your other controls) which animates between different visual states (adjust the translate transform) depending on the “selected” item.