WP8 Scrollviewer is not resetting between pages (WinRT)

Question

I am working on a WP8 WinRT app. On my DetailPage.xaml I have a ScrollViewer that contains a ListView and an Image.

The ScrollViewer works fine except that it does not reset itself when I navigate between pages.

If I scroll down to the bottom of page A and then navigate to page B then the scrollviewer shows the bottom part of the content instead of starting at the top and then letting me scroll down again.

This is the XAML from my details page:

<Page x:Class="LinuxBasics.RecipeDetailPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:LinuxBasics"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:data="using:LinuxBasics.DataModel"
  mc:Ignorable="d"
  d:DataContext="{Binding AllGroups[1].Items[1], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"
  DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}">

<Page.Transitions>
    <TransitionCollection>
        <NavigationThemeTransition>
            <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                <CommonNavigationTransitionInfo IsStaggeringEnabled="True" />
            </NavigationThemeTransition.DefaultNavigationTransitionInfo>
        </NavigationThemeTransition>
    </TransitionCollection>
</Page.Transitions>

<Page.Resources>

</Page.Resources>
<!--<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton x:Name="btnPinToStart" Icon="Pin" Click="btnPinToStart_Click" Label="Like"/>
        <AppBarButton x:Name="btnReminderTimer" Icon="Clock" Label="timer" Click="btnReminderTimer_Click"/>
        <AppBarButton x:Name="btnBrag" Icon="Camera" Label="brag">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem x:Name="menuPhoto" Text="Photo" Click="menuPhoto_Click"/>
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutItem x:Name="menuVideo" Text="Video" Click="menuVideo_Click"/>
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>-->


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      x:Name="LayoutRoot3"
      CommonNavigationTransitionInfo.IsStaggerElement="True"
      DataContext="{Binding Item}"
      d:DataContext="{Binding}">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="20,12,0,28">

        <TextBlock x:Name="AppTiltle"
                   Text="LINUX BASICS"
                   Style="{ThemeResource TitleTextBlockStyle}"
                   Typography.Capitals="SmallCaps" />

        <TextBlock x:Name="AppCommand"
                   d:DataContext="{Binding}"
                   Text="{Binding Title}"
                   Margin="0,12,0,0"
                   TextWrapping="Wrap"
                   Style="{ThemeResource HeaderTextBlockStyle}" />

    </StackPanel>

    <Grid x:Name="RecipePanel"
          Grid.Row="1">

    </Grid>
    <ScrollViewer Grid.Row="1"
                  Margin="0,10">
        <StackPanel>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <ListView ItemsSource="{Binding Ingredients}"
                      x:Uid="RecipeIngredientsPivotItem"
                      Grid.Row="0"
                      Margin="20,12,10,10">
                <ListView.ItemTemplate>
                    <DataTemplate>

                        <TextBlock Text="{Binding Mode=OneWay}"
                                   Style="{ThemeResource BodyTextBlockStyle}" />

                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <Image Source="{Binding ImagePath}"
                   Stretch="UniformToFill"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   Margin="20,20,10,20"
                   Grid.Row="1"/>

        </Grid>
    </StackPanel>
</ScrollViewer>
</Grid>

This is the code behind:

public sealed partial class RecipeDetailPage : Page
{
    private NavigationHelper navigationHelper;
    private ObservableDictionary defaultViewModel = new ObservableDictionary();

    /// <summary>
    /// NavigationHelper is used on each page to aid in navigation and 
    /// process lifetime management
    /// </summary>
    public NavigationHelper NavigationHelper
    {
        get { return this.navigationHelper; }
    }

    /// <summary>
    /// This can be changed to a strongly typed view model.
    /// </summary>
    public ObservableDictionary DefaultViewModel
    {
        get { return this.defaultViewModel; }
    }

    public RecipeDetailPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Required;

        this.navigationHelper = new NavigationHelper(this);
        this.navigationHelper.LoadState += navigationHelper_LoadState;
    }

    /// <summary>
    /// Populates the page with content passed during navigation.  Any saved state is also
    /// provided when recreating a page from a prior session.
    /// </summary>
    /// <param name="sender">
    /// The source of the event; typically <see cref="NavigationHelper"/>
    /// </param>
    /// <param name="e">Event data that provides both the navigation parameter passed to
    /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested and
    /// a dictionary of state preserved by this page during an earlier
    /// session.  The state will be null the first time a page is visited.</param>
    private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
    {
        var item = await RecipeDataSource.GetItemAsync((String)e.NavigationParameter);
        this.DefaultViewModel["Group"] = item.Group;
        this.DefaultViewModel["Item"] = item;

        //// Is recipe already pinned?
        //if (SecondaryTile.Exists(item.UniqueId))
        //    btnPinToStart.Icon = new SymbolIcon(Symbol.UnPin);
    }


    #region NavigationHelper registration

    /// The methods provided in this section are simply used to allow
    /// NavigationHelper to respond to the page's navigation methods.
    /// 
    /// Page specific logic should be placed in event handlers for the  
    /// <see cref="GridCS.Common.NavigationHelper.LoadState"/>
    /// and <see cref="GridCS.Common.NavigationHelper.SaveState"/>.
    /// The navigation parameter is available in the LoadState method 
    /// in addition to page state preserved during an earlier session.

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        navigationHelper.OnNavigatedTo(e);
    }

    protected override void OnNavigatedFrom(NavigationEventArgs e)
    {
        navigationHelper.OnNavigatedFrom(e);
    }

    #endregion


}

Just to add that the ScrollViewer worked fine before I removed the Pivots from the app sample that I am working from.

Answer 1

I figured it out.

The Page Transitions at the top of my DetailsPage (left over from the Pivot) caused the unexpected behaviour.

If necessary feel free to delete this post ...