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

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 list view.

This list view 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 list view, however its which event that I need to capture from the Gridview that I am unsure of..

Cheers

Answer 1

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 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}"/>