locked
Tab Scrolling within a ScrollViewer RRS feed

  • Question

  • So here's my dilemma which I'm surprised hasn't come up before now so I don't have a trick to workaround but....

    Scenario: Say you have a ScrollViewer that's filled with lots of assorted controls etc. Now you have a user, who expects to start tabbing through the tab order of those controls.

    Problem: As the user tabs down through the content of the ScrollViewer they inevitably Tab out of the Viewport view of the ScrollViewer and lose their place on the screen.

    What I need: As the user tabs through the content of the ScrollViewer it needs to automatically scroll with the focused content to keep the users place visible on the screen as they tab through it.

    I suppose I could listen to GotFocus and scroll it automatically but please tell me there's a simpler way to accomplish this? Preferably XAML, thanks for any shared insight as it would be greatly appreciated! :)


    Check out the Gooroovster WP App! Also, please mark answers as helpful when used, and answered when completed.

    Monday, June 25, 2012 2:52 PM

All replies

  • Hey K.S.

    Try playing with the following behavior.  It may need some tweaking, but perhaps it could get you started on solving your problem...

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using System.Windows.Interactivity;
    
    namespace SilverlightApplication5  //Change to your namespace.
    {
    	public class FocusedIntoView : Behavior<FrameworkElement>
    	{
    		private void OnFocusChanged(object sender, System.Windows.Input.KeyEventArgs e)
    		{
    			if ((e.Key == Key.Tab) || (e.Key == Key.Tab && Keyboard.Modifiers == ModifierKeys.Control))
    			{
    				ScrollViewer sv = this.AssociatedObject as ScrollViewer;
    				Panel panel = sv.Content as Panel;
    				FrameworkElement control = FocusManager.GetFocusedElement() as FrameworkElement;
    				if (control.Parent == panel)
    				{
    					var transform = control.TransformToVisual(panel);
    					var position = transform.Transform(new Point(0, 0));
    					sv.ScrollToVerticalOffset(position.Y - control.Margin.Top);  
    					//You may want to play with the control.Margin.Top and change it to a set number.
    				}
    			}
    		}
    		
    		protected override void OnAttached()
    		{
    			base.OnAttached();
    			AssociatedObject.KeyDown += OnFocusChanged;
    		}
    	
    		protected override void OnDetaching()
    		{
    			base.OnDetaching();
    			AssociatedObject.KeyDown -= OnFocusChanged;
    		}
    	} 
    }

    Once added and your project built, the behavior gets attached to the ScrollViewer.

    ~Christine


    My Gallery



    Monday, June 25, 2012 6:16 PM
  • Hey Christine, ya that's similar to workarounds I saw around on the web but yours looks a bit more compressed then others so I'll definitely have to tinker. Just wish there was an easier way to accomplish it :(

    Thanks for the help as usual though! I'm indebted again.


    Check out the Gooroovster WP App! Also, please mark answers as helpful when used, and answered when completed.

    Monday, June 25, 2012 6:29 PM
  • Set TabNavigation="Cycle" on your ScrollViewer. In Blend, it's under the "Common" properties, although it's in the advanced properties. That makes tabs commands loop inside your ScrollViewer instead of exiting to the next element.
    • Edited by Brian Hilstrom Monday, June 25, 2012 7:07 PM Added location of property in Blend
    Monday, June 25, 2012 7:06 PM
  • Oh wow Brian I was just about to shout hallelujah and praise your name while I found a fruit basket with your name on it or something haha! Except then I realized the way the folks on this project have things set up isn't going to make it that simple for me....

    What I'm working with is Multiple UserControl's each with multiple elements inside of them. Then they're loading each of those UserControl's into an ItemsControl which THEN it's the thing embedded in a ScrollViewer!

    So while I knew there had to be an easier way to cycle through the tabbing of elements embedded in a scrollviewer, it's looking like I may be S.O.L. either way unless you'd like to take a moment and wrap your mind around my particular dilemma and perhaps offer some guru enlightenment on it?

    So for a sloppy visualizations sake....

    <scrollviewer>       
        <itemscontrol>                 
              <usercontrol/>               
              <usercontrol/>               
              <usercontrol/>               
              <usercontrol/>               
              <usercontrol/>               
              <usercontrol/>               
              <usercontrol/>                 
         </itemscontrol>
    </scrollviewer>

    Thank's so much though, definitely a common property worth remembering for the future!


    Check out the Gooroovster WP App! Also, please mark answers as helpful when used, and answered when completed.


    • Edited by KS.BlendDesigner Monday, June 25, 2012 7:50 PM addition of sloppy visualization
    Monday, June 25, 2012 7:45 PM
  • I'm a bit fuzzy on the setup. What is it currently doing, and what do you want it to do?

    The way I read your post, it's laid out like this:

    <ScrollViewer>
       <ItemsControl>
          <UserControl>
             <A>
             <B>
          </UserControl>
          <UserControl>
             <A>
             <B>
          </UserControl>
       </ItemsControl>
    </ScrollViewer>
    Is that right?
    Monday, June 25, 2012 7:48 PM
  • Ya basically, they've got about a half dozen user controls each with loads of tab enabled elements within them loaded up in the items control, it follows the tab order fine through this per each element but once you tab outside of the view of the viewport, the user no longer sees the focused element within the scrollviewer unless they manually scroll down.....this ones a real pain in the butt so far, perfect Monday material. :)

    A Quick P.S. - We're running on SL4 + Caliburn Micro


    Check out the Gooroovster WP App! Also, please mark answers as helpful when used, and answered when completed.


    Monday, June 25, 2012 7:52 PM