44

I have a XAML view with a list box:

<control:ListBoxScroll ItemSource="{Binding Path=FooCollection}"
                       SelectedItem="{Binding SelectedFoo, Mode=TwoWay}"
                       ScrollSelectedItem="{Binding SelectedFoo}">
    <!-- data templates, etc. -->
</control:ListBoxScroll>

The selected item is bound to a property in my view. When the user selects an item in the list box my SelectedFoo property in the view model gets updated. When I set the SelectedFoo property in my view model then the correct item is selected in the list box.

The problem is that if the SelectedFoo that is set in code is not currently visible I need to additionally call ScrollIntoView on the list box. Since my ListBox is inside a view and my logic is inside my view model ... I couldn't find a convenient way to do it. So I extended ListBoxScroll:

class ListBoxScroll : ListBox
{
    public static readonly DependencyProperty ScrollSelectedItemProperty = DependencyProperty.Register(
        "ScrollSelectedItem",
        typeof(object),
        typeof(ListBoxScroll),
        new FrameworkPropertyMetadata(
            null,
            FrameworkPropertyMetadataOptions.AffectsRender, 
            new PropertyChangedCallback(onScrollSelectedChanged)));
    public object ScrollSelectedItem
    {
        get { return (object)GetValue(ScrollSelectedItemProperty); }
        set { SetValue(ScrollSelectedItemProperty, value); }
    }

    private static void onScrollSelectedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var listbox = d as ListBoxScroll;
        listbox.ScrollIntoView(e.NewValue);
    }
}

It basically exposes a new dependency property ScrollSelectedItem which I bind to the SelectedFoo property on my view model. I then hook into the property changed callback of the dependent property and scroll the newly selected item into view.

Does anyone else know of an easier way to call functions on user controls on a XAML view that is backed by a view model? It's a bit of a run around to:

  1. create a dependent property
  2. add a callback to the property changed callback
  3. handle function invocation inside the static callback

It would be nice to put the logic right in the ScrollSelectedItem { set { method but the dependency framework seems to sneak around and manages to work without actually calling it.

6
  • Will be much easier to set SelectedIndex. Jan 11, 2012 at 22:24
  • 1
    It sounds like a View "concern" rather than a ViewModel one. I've had to do something similar but I left the code in the view. See matthamilton.net/focus-a-virtualized-listboxitem Jan 11, 2012 at 22:31
  • @MattHamilton - this code is technically in the View (inside a control). What code would you write in a View (anywhere) that would accomplish calling ScrollIntoView? Keep in mind that I can't override the set on SelectedItem since it isn't virtual. Jan 11, 2012 at 22:49
  • @anatoliiG - does SelectedIndex cause the view to scroll to the selected item? Jan 11, 2012 at 22:50
  • @JamesFassett For DataGrid - yes. Unfortunately I've not tried it for ListBox. Jan 11, 2012 at 22:55

8 Answers 8

58

Have you tried using Behavior... Here is a ScrollInViewBehavior. I have used it for ListView and DataGrid..... I thinks it should work for ListBox......

You have to add a reference to System.Windows.Interactivity to use Behavior<T> class

Behavior

public class ScrollIntoViewForListBox : Behavior<ListBox>
{
    /// <summary>
    ///  When Beahvior is attached
    /// </summary>
    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.SelectionChanged += AssociatedObject_SelectionChanged;
    }

    /// <summary>
    /// On Selection Changed
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void AssociatedObject_SelectionChanged(object sender,
                                           SelectionChangedEventArgs e)
    {
        if (sender is ListBox)
        {
            ListBox listBox = (sender as ListBox);
            if (listBox .SelectedItem != null)
            {
                listBox.Dispatcher.BeginInvoke(
                    (Action) (() =>
                                  {
                                      listBox.UpdateLayout();
                                      if (listBox.SelectedItem !=
                                          null)
                                          listBox.ScrollIntoView(
                                              listBox.SelectedItem);
                                  }));
            }
        }
    }
    /// <summary>
    /// When behavior is detached
    /// </summary>
    protected override void OnDetaching()
    {
        base.OnDetaching();
        this.AssociatedObject.SelectionChanged -=
            AssociatedObject_SelectionChanged;

    }
}

Usage

Add alias to XAML as xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

then in your Control

        <ListBox ItemsSource="{Binding Path=MyList}"
                  SelectedItem="{Binding Path=MyItem,
                                         Mode=TwoWay}"
                  SelectionMode="Single">
            <i:Interaction.Behaviors>
                <Behaviors:ScrollIntoViewForListBox />
            </i:Interaction.Behaviors>
        </ListBox>

Now When ever "MyItem" property is set in ViewModel the List will be scrolled when changes are refelected.

8
  • That is actually pretty cool. It's similar to the attached property approach described by crazyarabian but it feels quite a bit cleaner. With both his attached property solution and your Behaviour solution I would have to write a new class. It just seems to make more sense extending the ListBox control and doing the event handling in the sub-class. I'm going to try that today and see if it is as clean as your behaviour solution. Jan 12, 2012 at 18:02
  • @JamesFassett Behavoir is usually used to Give you Control the functionality that it currently does not have.... IE.... to avoid Extending a control....but i believe extending is as good as this..
    – Ankesh
    Jan 13, 2012 at 6:29
  • Just using the Express version. Does this solution need Blend?
    – paul
    Jul 4, 2012 at 9:47
  • @paul Its needs a dll from blend Sdk System.Windows.Interactivity,also (i am not sure but) thre is not limitaiton for using dlls in express version.
    – Ankesh
    Jul 4, 2012 at 10:36
  • 3
    Thanks, this worked for me. However, I had to set VirtualizingStackPanel.IsVirtualizing = false on my ListBox to get it to work consistently.
    – Mash
    Oct 29, 2018 at 23:30
43

After reviewing the answers a common theme came up: external classes listening to the SelectionChanged event of the ListBox. That made me realize that the dependant property approach was overkill and I could just have the sub-class listen to itself:

class ListBoxScroll : ListBox
{
    public ListBoxScroll() : base()
    {
        SelectionChanged += new SelectionChangedEventHandler(ListBoxScroll_SelectionChanged);
    }

    void ListBoxScroll_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ScrollIntoView(SelectedItem);
    }
}

I feel this is the simplest solution that does what I want.

Honourable mention goes to adcool2007 for bringing up Behaviours. Here are a couple of articles for those interested:

http://blogs.msdn.com/b/johngossman/archive/2008/05/07/the-attached-behavior-pattern.aspx
http://www.codeproject.com/KB/WPF/AttachedBehaviors.aspx

I think for generic behaviours that will be added to several different user controls (e.g. click behaviours, drag behaviours, animation behaviours, etc.) then attached behaviours make a lot of sense. The reason I don't want to use them in this particular case is that the implementation of the behaviour (calling ScrollIntoView) isn't a generic action that can happen to any control other than a ListBox.

4
  • Simple & effective, may get less attention for not being deeply technical but got my vote :) Apr 13, 2013 at 7:16
  • 3
    Don't forget to unsubscribe from the event :P Aug 6, 2016 at 10:06
  • 1
    @adminSoftDK There is no need to unsubscribe from the event. An object listening to its own event can be GC'ed just fine. Oct 16, 2019 at 11:05
  • Most simple solution - thank you. I just handle the event in code behind in vb.net Private Sub anyListBox_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles anyListBox.SelectionChanged sender.ScrollIntoView(sender.SelectedItem) End Sub
    – DrMarbuse
    Jan 19, 2020 at 8:37
24

Because this is strictly a View problem, there's no reason you can't have an event handler in the code behind of your view for this purpose. Listen for ListBox.SelectionChanged and use that to scroll the newly selected item into view.

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ((ListBox)sender).ScrollIntoView(e.AddedItems[0]);
}

You also don't need a derived ListBox to do this. Just use a standard control and when the ListBox.SelectedItem value changes (as described in your original question), the above handler will be executed and the item will be scrolled into view.

    <ListBox
        ItemsSource="{Binding Path=FooCollection}"
        SelectedItem="{Binding Path=SelectedFoo}"
        SelectionChanged="ListBox_SelectionChanged"
        />

Another approach would be to write an attached property that listens for ICollectionView.CurrentChanged and then invokes ListBox.ScrollIntoView for the new current item. This is a more "reusable" approach if you need this functionality for several list boxes. You can find a good example here to get you started: http://michlg.wordpress.com/2010/01/16/listbox-automatically-scroll-currentitem-into-view/

3
  • I don't mind listening for an event but the activity "scroll to the selected item" really feels like it is part of the control and not the surrounding view. I could just write the event listener inside of my ListBoxScroll subclass however - and that would get me away from the dependent property callback an into a cleaner event delegate. Jan 12, 2012 at 0:16
  • I like this approach but it's a bit cumbersome if you have a number of ListBoxes, I may take this functionality and derive my own ListBox. I agree that it is strictly a View problem and that the code is ok to be in the view... Apr 13, 2013 at 7:14
  • 1
    @AdriaanDavel just bind all of the ListBox SelectionChanged to the same handler, or maybe you already do that, and are just talking about all the event handler subscription statements being cumbersome?
    – Zack
    Sep 8, 2015 at 19:39
14

I'm using this (in my opinion) clear and easy solution

listView.SelectionChanged += (s, e) => 
    listView.ScrollIntoView(listView.SelectedItem);

where listView is name of ListView control in xaml, SelectedItem is affected from my MVVM and code is inserted in constructor in xaml.cs file.

0
13

I know this is an old question, but my recent search for the same problem has brought me to this. I wanted to use the behavior approach, but didn't want a dependency on the Blend SDK just to give me Behavior<T> so here's my solution without it:

public static class ListBoxBehavior
{
    public static bool GetScrollSelectedIntoView(ListBox listBox)
    {
        return (bool)listBox.GetValue(ScrollSelectedIntoViewProperty);
    }

    public static void SetScrollSelectedIntoView(ListBox listBox, bool value)
    {
        listBox.SetValue(ScrollSelectedIntoViewProperty, value);
    }

    public static readonly DependencyProperty ScrollSelectedIntoViewProperty =
        DependencyProperty.RegisterAttached("ScrollSelectedIntoView", typeof (bool), typeof (ListBoxBehavior),
                                            new UIPropertyMetadata(false, OnScrollSelectedIntoViewChanged));

    private static void OnScrollSelectedIntoViewChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var selector = d as Selector;
        if (selector == null) return;

        if (e.NewValue is bool == false)
            return;

        if ((bool) e.NewValue)
        {
            selector.AddHandler(Selector.SelectionChangedEvent, new RoutedEventHandler(ListBoxSelectionChangedHandler));
        }
        else
        {
            selector.RemoveHandler(Selector.SelectionChangedEvent, new RoutedEventHandler(ListBoxSelectionChangedHandler));
        }
    }

    private static void ListBoxSelectionChangedHandler(object sender, RoutedEventArgs e)
    {
        if (!(sender is ListBox)) return;

        var listBox = (sender as ListBox);
        if (listBox.SelectedItem != null)
        {
            listBox.Dispatcher.BeginInvoke(
                (Action)(() =>
                    {
                        listBox.UpdateLayout();
                        if (listBox.SelectedItem !=null)
                            listBox.ScrollIntoView(listBox.SelectedItem);
                    }));
        }
    }
}

and then usage is just

<ListBox ItemsSource="{Binding Path=MyList}"
         SelectedItem="{Binding Path=MyItem, Mode=TwoWay}"
         SelectionMode="Single" 
         behaviors:ListBoxBehavior.ScrollSelectedIntoView="True">
5
  • Works very well, I prefer not dragging in that dependency too.
    – angularsen
    Aug 10, 2015 at 11:05
  • Shouldn't you remove the if (e.NewValue is bool == false) code? If e.NewValue becomes false, the handler should be removed no?
    – Ziriax
    Mar 14, 2017 at 15:37
  • @Ziriax this is a test that the type of e.NewValue is boolean, not that it is false.
    – Dutts
    Mar 14, 2017 at 17:19
  • Ouch, I completely misread that, silly me! Another thing I noted: it is very well possible that the SelectedItem remains the same, but the SelectedIndex changes. For example when using the ObservableCollection<T>.Move method, the SelectedItem does not change, and the SelectionChangedEvent is not fired. So the item will not be moved into-view. So some extra logic needs to be added to deal with this case?
    – Ziriax
    Mar 15, 2017 at 19:12
  • @Dutts By default, the local namespace is local [xmlns:local="clr-namespace:<yourAssemblyName>", then where "behavior:ListBoxBehavior..." will be "local:ListBoxBehavior.ScrollSelectedIntoView="true" ", antonio
    – antonio
    Jan 22, 2020 at 2:30
9

Try this:

private void lstBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    lstBox.ScrollIntoView(lstBox.SelectedItem);
}
2
  • That is a solution, but I think the question wanted a solution compatible with the MVVM pattern.
    – user672951
    Sep 6, 2014 at 22:39
  • 2
    @user672951 This fits the MVVM pattern just as much as any of the other solutions in this question.
    – Zack
    Sep 8, 2015 at 19:40
3

After tying various methods I found the following to be the simplest and the best

lstbox.Items.MoveCurrentToLast();
lstbox.ScrollIntoView(lstbox.Items.CurrentItem);
2

I took Ankesh's answer and made it not dependent on the blend sdk. The downside of my solution is that it will apply to all listboxes in your app. But the upside is no custom class needed.

When your app is initializing...

    internal static void RegisterFrameworkExtensionEvents()
    {
        EventManager.RegisterClassHandler(typeof(ListBox), ListBox.SelectionChangedEvent, new RoutedEventHandler(ScrollToSelectedItem));
    }

    //avoid "async void" unless used in event handlers (or logical equivalent)
    private static async void ScrollToSelectedItem(object sender, RoutedEventArgs e)
    {
        if (sender is ListBox)
        {
            var lb = sender as ListBox;
            if (lb.SelectedItem != null)
            {
                await lb.Dispatcher.BeginInvoke((Action)delegate
                {
                    lb.UpdateLayout();
                    if (lb.SelectedItem != null)
                        lb.ScrollIntoView(lb.SelectedItem);
                });
            }
        }
    }

This makes all of your listboxes scroll to selected (which I like as a default behavior).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.