mvvm how to make a list view auto scroll to a new

Question

I am using the MVVM pattern, I have a view which creates a new ViewModel, after the user clicks save, this view is closed and a seperate view is opened which displays a collection of view models in a ListView.

This ListView is sorted in alphabetical order, so the new ViewModel may appear at the bottom of the ListBox, which is not immediately visible to the user.

My question is how do I get the view to auto scroll to the newly added item?

I guess that It will be using attached behaviours, and the ScrollIntoView event on the ListView, however its which event that I need to capture from the GridView that I am unsure of..

Cheers

Answer 1

Another solution using ListBox. To implement auto-scrolling, you can create a custom control!

---

C#

public class LoggingListBox : ListBox
{
    ///<summary>
    ///Define the AutoScroll property. If enabled, causes the ListBox to scroll to 
    ///the last item whenever a new item is added.
    ///</summary>
    public static readonly DependencyProperty AutoScrollProperty = 
        DependencyProperty.Register(
            "AutoScroll", 
            typeof(Boolean), 
            typeof(LoggingListBox), 
            new FrameworkPropertyMetadata(
                true, //Default value.
                FrameworkPropertyMetadataOptions.AffectsArrange | 
                FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, 
                AutoScroll_PropertyChanged));

    /// <summary>
    /// Gets or sets whether or not the list should scroll to the last item 
    /// when a new item is added.
    /// </summary>
    [Category("Common")] //Indicate where the property is located in VS designer.
    public bool AutoScroll
    {
        get { return (bool)GetValue(AutoScrollProperty); }
        set { SetValue(AutoScrollProperty, value); }
    }

    /// <summary>
    /// Event handler for when the AutoScroll property is changed.
    /// This delegates the call to SubscribeToAutoScroll_ItemsCollectionChanged().
    /// </summary>
    /// <param name="d">The DependencyObject whose property was changed.</param>
    /// <param name="e">Change event args.</param>
    private static void AutoScroll_PropertyChanged(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        SubscribeToAutoScroll_ItemsCollectionChanged(
            (LoggingListBox)d,
            (bool)e.NewValue);
    }

    /// <summary>
    /// Subscribes to the list items' collection changed event if AutoScroll is enabled.
    /// Otherwise, it unsubscribes from that event.
    /// For this to work, the underlying list must implement INotifyCollectionChanged.
    ///
    /// (This function was only creative for brevity)
    /// </summary>
    /// <param name="listBox">The list box containing the items collection.</param>
    /// <param name="subscribe">Subscribe to the collection changed event?</param>
    private static void SubscribeToAutoScroll_ItemsCollectionChanged(
        LoggingListBox listBox, bool subscribe)
    {
        INotifyCollectionChanged notifyCollection =
            listBox.Items.SourceCollection as INotifyCollectionChanged;
        if (notifyCollection != null)
        {
            if (subscribe)
            {
                //AutoScroll is turned on, subscribe to collection changed events.
                notifyCollection.CollectionChanged += 
                    listBox.AutoScroll_ItemsCollectionChanged;
            }
            else
            {
                //AutoScroll is turned off, unsubscribe from collection changed events.
                notifyCollection.CollectionChanged -= 
                    listBox.AutoScroll_ItemsCollectionChanged;
            }
        }
    }

    /// <summary>
    /// Event handler called only when the ItemCollection changes
    /// and if AutoScroll is enabled.
    /// </summary>
    /// <param name="sender">The ItemCollection.</param>
    /// <param name="e">Change event args.</param>
    private void AutoScroll_ItemsCollectionChanged(
        object sender, NotifyCollectionChangedEventArgs e)
    {
        if (e.Action == NotifyCollectionChangedAction.Add)
        {
            int count = Items.Count;
            ScrollIntoView(Items[count - 1]);
        }
    }

    /// <summary>
    /// Constructor a new LoggingListBox.
    /// </summary>
    public LoggingListBox()
    {
        //Subscribe to the AutoScroll property's items collection 
        //changed handler by default if AutoScroll is enabled by default.
        SubscribeToAutoScroll_ItemsCollectionChanged(
            this, (bool)AutoScrollProperty.DefaultMetadata.DefaultValue);
    }
}

XAML

Here is how you use the control in XAML:

<tools:LoggingListBox/> <!-- AutoScroll="true" by default. -->

Somewhere you need to specify how you access this control. This completely depends on your project setup.

xmlns:tools="clr-namespace:MyCustomControls;assembly=MyCustomControls"

How it Works

To create a custom control you should only need C# code. We do this by extending a ListBox and only add a single property, AutoScroll. Because it is a dependency property, it will partake in the WPF binding system, which also makes it available in the Visual Studio designer.
Covering dependency properties is a rather large topic, but is integral to create custom controls. You can learn more on the Control Authoring Overview or the Dependency Properties Overview.

The objective is to subscribe to the collection changed event of the underlying item collection so we can respond by scrolling to the bottom whenever a new item is added. We must subscribe to this event at two places.

1. Whenever AutoScroll is set to true, we need to subscribe. The value of AutoScroll may change at any time and we should be able to respond accordingly. If set to false, we should instruct the control to stop scrolling to the bottom by unsubscribing.
2. Supposing AutoScroll needs to only be set at compile-time, we need a method of subscribing upon startup. This is done by using the control's constructor.

Why Create a Custom Control

First and foremost, we have simplified the XAML as far as reasonably possible. We only need to access the control and optionally specify or bind to the AutoScroll property.

It is MVVM compliant. Our view-model doesn't need to worry about the AutoScroll functionality because it is self-contained in the control. At the same time, the view model can provide a property which the AutoScroll property is bound to, giving us the desired decoupling of the view & view-model.

Additionally, we have avoided the use of behaviors. This means we have removed two dependencies from our project (granted this was the only reason those dependencies were included in the first place). We can safely omit System.Windows.Interactivity and Microsoft.Expressions.Interactions from the project references.

Drawbacks

There is only one drawback to this approach. The underlying items collection must implement INotifyCollectionChanged. In most cases, this is a non-issue. If you are using MVVM, you probably already have your items wrapped up inside an ObservableCollection, which already implements our required interface.

Enjoy! :-)

Answer 2

This solution is for a ListBox, but it could be modified for a ListView... This will scroll the selected item into view when you change the selected item from the ViewModel.

Class:

/// <summary>
/// ListBoxItem Behavior class
/// </summary>
public static class ListBoxItemBehavior
{
    #region IsBroughtIntoViewWhenSelected

    /// <summary>
    /// Gets the IsBroughtIntoViewWhenSelected value
    /// </summary>
    /// <param name="listBoxItem"></param>
    /// <returns></returns>
    public static bool GetIsBroughtIntoViewWhenSelected(ListBoxItem listBoxItem)
    {
        return (bool)listBoxItem.GetValue(IsBroughtIntoViewWhenSelectedProperty);
    }

    /// <summary>
    /// Sets the IsBroughtIntoViewWhenSelected value
    /// </summary>
    /// <param name="listBoxItem"></param>
    /// <param name="value"></param>
    public static void SetIsBroughtIntoViewWhenSelected(
      ListBoxItem listBoxItem, bool value)
    {
        listBoxItem.SetValue(IsBroughtIntoViewWhenSelectedProperty, value);
    }

    /// <summary>
    /// Determins if the ListBoxItem is bought into view when enabled
    /// </summary>
    public static readonly DependencyProperty IsBroughtIntoViewWhenSelectedProperty =
        DependencyProperty.RegisterAttached(
        "IsBroughtIntoViewWhenSelected",
        typeof(bool),
        typeof(ListBoxItemBehavior),
        new UIPropertyMetadata(false, OnIsBroughtIntoViewWhenSelectedChanged));

    /// <summary>
    /// Action to take when item is brought into view
    /// </summary>
    /// <param name="depObj"></param>
    /// <param name="e"></param>
    static void OnIsBroughtIntoViewWhenSelectedChanged(
      DependencyObject depObj, DependencyPropertyChangedEventArgs e)
    {
        ListBoxItem item = depObj as ListBoxItem;
        if (item == null)
            return;

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

        if ((bool)e.NewValue)
            item.Selected += OnListBoxItemSelected;
        else
            item.Selected -= OnListBoxItemSelected;
    }

    static void OnListBoxItemSelected(object sender, RoutedEventArgs e)
    {
        // Only react to the Selected event raised by the ListBoxItem 
        // whose IsSelected property was modified.  Ignore all ancestors 
        // who are merely reporting that a descendant's Selected fired. 
        if (!Object.ReferenceEquals(sender, e.OriginalSource))
            return;

        ListBoxItem item = e.OriginalSource as ListBoxItem;
        if (item != null)
            item.BringIntoView();
    }

    #endregion // IsBroughtIntoViewWhenSelected
}

Add the xmlns to your view:

xmlns:util="clr-namespace:YourNamespaceHere.Classes"

Add the style to the resources of the Window/UserControl:

<Window.Resources>
    <Style x:Key="ListBoxItemContainerStyle" TargetType="{x:Type ListBoxItem}"
        BasedOn="{StaticResource {x:Type ListBoxItem}}">
        <Setter Property="util:ListBoxItemBehavior.IsBroughtIntoViewWhenSelected" Value="true"/>
    </Style>
</Window.Resources>

Implement the listbox:

<ListBox ItemsSource="{Binding MyView}"
         DisplayMemberPath="Title"
         SelectedItem="{Binding SelectedItem}" 
         ItemContainerStyle="{StaticResource ListBoxItemContainerStyle}"/>

Answer 3

hmm talk about overkill, for a more simple approach and the one i imagine most will use....

for listview simply whack in:

listView1.EnsureVisible(listView1.Items.Count - 1);

And for Listbox simply whack in:

listBox1.SelectedIndex = listBox1.Items.Count - 1; 
listBox1.SelectedIndex = -1;

To your listview item add (..etc) method... .. or whack it on a timer tick.

The above way under OP seems to much to do for me i am lazy... All code explains its self.

Answer 4

Add a selected item DependecyProperty to the class which contains the collection. Bind the SelectedItem of the listview to it. After adding the new model to the collection set the selected item DependencyProperty.

Answer 5

This might not apply for WPF, but in WinForms the code is similar to lstData.EnsureVisible(itemIndex);