Scroll to top of a control with ScrollViewer in MVVM

Question

I've got an MVVM Light WPF app in Visual Studio 2015. A ScrollViewer contains the contents in MainWindow.xaml, which in turn contains a TabControl. One of the TabItem controls contains a DataGrid. When the user clicks a row of the DataGrid, we show the tcEmployeeDetails TabControl, using the SelectedEmployee property on the view model bound to the SelectedItem of the data grid:

<ScrollViewer>
    <Border>
        <DockPanel>
            <TabControl>
                <TabItem>
                    <!-- Search controls go here... -->

                    <DataGrid SelectedItem="{Binding SelectedEmployee}">
                        <!-- DataGrid columns here... -->
                    </DataGrid>

                    <!-- How do I scroll the ScrollViewer to here? -->
                    <TabControl x:Name="tcEmployeeDetails">
                        <!-- TabItems go here... -->
                    </TabControl>
                </TabItem>
                <TabItem>
                    <!-- Other items here... -->
                </TabItem>
            </TabControl>
        </DockPanel>
    </Border>
</ScrollViewer>

How can I scroll the ScrollViewer to the top of tcEmployeeDetails when the user has selected a row of the DataGrid?

Answer 1

Add a property to your vm:

private double _scrollViewerVerticalOffset;
public double ScrollViewerVerticalOffset 
{
    get { return _scrollViewerVerticalOffset; }
    set { _scrollViewerVerticalOffset = value; }
}

Bind this property to the scrollviewer's VerticalOffset.

<ScrollViewer VerticalOffset="{Binding ScrollViewerVerticalOffset}">

And modify your setter for SelectedEmployee:

public double _scrollViewerVerticalOffset 
{
   get { ... }
   set {
           if (this.SelectedEmployee != value)  
                  ScrollViewerVerticalOffset = 0;
       }
 }