title: ScrollViewer ChangeView on SizeChanged
body: <p>I have <code>DataTemplate</code> which I use in HubSection:</p>
  
  <pre><code>&lt;DataTemplate x:Name="dataTemplate2"&gt;
      &lt;Grid x:Name="greedy"&gt;
          &lt;ScrollViewer x:Name="scroller" SizeChanged="ScrollViewer_SizeChanged" Height="{Binding Height,ElementName=greedy}" &gt;
              &lt;ItemsControl x:Name="itemsControl" 
                  ItemsSource="{Binding}" 
                  ItemTemplate="{StaticResource dataTemplateDetails}"&gt;
                  &lt;ItemsControl.ItemContainerTransitions&gt;
                      &lt;TransitionCollection&gt;
                          &lt;ReorderThemeTransition /&gt;
                          &lt;NavigationThemeTransition /&gt;
                      &lt;/TransitionCollection&gt;
                  &lt;/ItemsControl.ItemContainerTransitions&gt;
              &lt;/ItemsControl&gt;
          &lt;/ScrollViewer&gt;
      &lt;/Grid&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>In my <code>ItemsControl</code> I have items which can be expandable. What I want to achieve is that when the item will expand to see more details about that item. I want <code>Scrollviewer</code> to scroll down (for amount of changed size of <code>ScrollViewer</code>).</p>
  
  <p>Code behind for <code>SizeChanged</code> event:</p>
  
  <pre><code>private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
  {
       ScrollViewer myScroll = (ScrollViewer)sender;
       myScroll.ChangeView(null, myScroll.ScrollableHeight, null, false);
  }
  </code></pre>
  
  <p>What I have done now is not working as my expectation. I scroll down to the end right now. But the thing is it scrolls only when the items extend the size of available view (ScrollBar is shown). Then if I expand another item it doesn't work. If I hide details about item (ScrollBar hides too) and expand it again it will work again. 
  It's like the <code>SizeChanged</code> event occures only when <code>ScrollViewer</code> is going into action but have infinite height which doesn't change.</p>
  
  <p>I've tried Grid with row set to "*", it changes nothing. Now I try to set height by binding it to height of <code>ItemsControl</code> - still the same behaviour. </p>
  
  <p>Could you help me with the solution, show the path of thinking or enlighten me with some workaround?</p>
  
  <p>EDIT:</p>
  
  <p>I prepared some code to work with to see what happens exactly.</p>
  
  <p>1) Create New Project -> Store Apps (c#) -> Windows Phone 8.1 (Blank App) and name it "scroll"</p>
  
  <p>2) Paste this code into MainPage.xaml</p>
  
  <pre><code>&lt;Page
  x:Class="scroll.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:scroll"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Background="DarkOliveGreen"&gt;
  
  &lt;Page.Resources&gt;
      &lt;DataTemplate x:Name="dataTemplateDetails"&gt;
          &lt;Grid Name="grido" Grid.Row="1" Margin="10,10,10,10"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="50" /&gt;
                  &lt;RowDefinition Height="Auto" /&gt;
                  &lt;RowDefinition Height="50" /&gt;
                  &lt;RowDefinition Height="50" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Border Grid.Row="0" Background="Black" CornerRadius="10" Opacity="0.4" /&gt;
              &lt;Border Grid.Row="1" Background="Black" CornerRadius="10" Opacity="0.3" /&gt;
              &lt;Border Grid.Row="2" Background="Black" CornerRadius="10" Opacity="0.2" /&gt;
              &lt;Border Grid.Row="3" Background="Black" CornerRadius="10" Opacity="0.1" /&gt;
              &lt;TextBlock Grid.Row="0" Text="{Binding Name}" Style="{StaticResource BaseTextBlockStyle}" HorizontalAlignment="Center"/&gt;
              &lt;Grid Grid.Row="1" HorizontalAlignment="Center"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="Auto" /&gt;
                      &lt;ColumnDefinition Width="*" /&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;TextBlock Grid.Column="0" Margin="5,0,5,0" Text="Description:" Style="{StaticResource BaseTextBlockStyle}"/&gt;
                  &lt;TextBlock Grid.Column="1" Text="{Binding Description}" Style="{StaticResource BaseTextBlockStyle}"/&gt;
              &lt;/Grid&gt;
              &lt;TextBlock Grid.Row="2" Text="Next row" Style="{StaticResource BaseTextBlockStyle}" HorizontalAlignment="Center"/&gt;
              &lt;TextBlock Grid.Row="3" Text="Next row" Style="{StaticResource BaseTextBlockStyle}" HorizontalAlignment="Center"/&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
      &lt;DataTemplate x:Name="dataTemplate2"&gt;
          &lt;Grid x:Name="greedy" &gt;
              &lt;ScrollViewer x:Name="scroller" SizeChanged="ScrollViewer_SizeChanged" VerticalAlignment="Top"&gt;
                  &lt;ItemsControl x:Name="itemsControl" 
                      ItemsSource="{Binding}" 
                      ItemTemplate="{StaticResource dataTemplateDetails}"&gt;
                      &lt;ItemsControl.ItemContainerTransitions&gt;
                          &lt;TransitionCollection&gt;
                              &lt;ReorderThemeTransition /&gt;
                              &lt;NavigationThemeTransition /&gt;
                          &lt;/TransitionCollection&gt;
                      &lt;/ItemsControl.ItemContainerTransitions&gt;
                  &lt;/ItemsControl&gt;
              &lt;/ScrollViewer&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  &lt;/Page.Resources&gt;
  
  &lt;Page.BottomAppBar&gt;
      &lt;CommandBar Background="Black" Opacity="0.6" x:Name="myCommandBar"&gt;
          &lt;AppBarButton Icon="Add" Label="Add" x:Name="AddItem" Click="Add_Click"/&gt;
          &lt;AppBarButton Icon="Delete" Label="Delete" x:Name="RemoveItem" Click="Delete_Click"/&gt;
      &lt;/CommandBar&gt;
  &lt;/Page.BottomAppBar&gt;
  &lt;Grid&gt;
      &lt;Hub x:Name="myHub" Header="Test"&gt;
          &lt;HubSection x:Uid="myDetailsHubsection" x:Name="myDetailsHubsection" Header="Details" DataContext="{Binding Items}" ContentTemplate="{StaticResource dataTemplate2}" /&gt;
      &lt;/Hub&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>3) Paste this code into MainPage.xaml.cs</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  using System.ComponentModel;
  using System.IO;
  using System.Linq;
  using System.Runtime.InteropServices.WindowsRuntime;
  using Windows.Foundation;
  using Windows.Foundation.Collections;
  using Windows.UI.Xaml;
  using Windows.UI.Xaml.Controls;
  using Windows.UI.Xaml.Controls.Primitives;
  using Windows.UI.Xaml.Data;
  using Windows.UI.Xaml.Input;
  using Windows.UI.Xaml.Media;
  using Windows.UI.Xaml.Navigation;
  
  namespace scroll
  {
  public sealed partial class MainPage : Page
  {
      public static Details dataContextItems;
  
      public MainPage()
      {
          this.InitializeComponent();
  
          this.NavigationCacheMode = NavigationCacheMode.Required;
  
          dataContextItems = new Details();
      }
  
      public class TestItem
      {
          public string Name { get; set; }
          public string Description { get; set; }
  
          public TestItem(string n, string d)
          {
              Name = n;
              Description = d;
          }
      }
  
      public class Details : INotifyPropertyChanged
      {
          private ObservableCollection&lt;TestItem&gt; _items;
          public ObservableCollection&lt;TestItem&gt; Items
          {
              set
              {
                  _items = value;
                  NotifyPropertyChanged("Items");
              }
              get
              {
                  return _items;
              }
          }
  
          public Details()
          {
              _items = new ObservableCollection&lt;TestItem&gt;();
          }
  
          public event PropertyChangedEventHandler PropertyChanged;
  
          private void NotifyPropertyChanged(string propertyName)
          {
              if (PropertyChanged != null)
              {
                  PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
              }
          }
      }
  
      protected override void OnNavigatedTo(NavigationEventArgs e)
      {
          this.DataContext = dataContextItems;
      }
  
      private void Add_Click(object sender, RoutedEventArgs e)
      {
          TestItem iAmAnItem = new TestItem("Name of an item", "Long and detailed description of an item");
          dataContextItems.Items.Add(iAmAnItem);
      }
  
      private void Delete_Click(object sender, RoutedEventArgs e)
      {
          if (dataContextItems.Items.Count &gt; 0)
              dataContextItems.Items.RemoveAt(0);
      }
  
      private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
      {
          ScrollViewer myScroll = (ScrollViewer)sender;
          myScroll.ChangeView(null, myScroll.ScrollableHeight, null, false);
      }
  }
  }
  </code></pre>
  
  <p>4) Run the app</p>
  
  <p>5) When you add first two items you can't scroll them but when you add more items you can see that it scrolls down as soon as items "need more space" to be shown and scrollbar occures. But with adding more items it doesn't work. If you delete items and add "third" item again it will scroll down.</p>
  
  <p>I want it to scroll down everytime size of scrollviewer changes (in this case when new item occures but keep in mind it should work when item "extends" in my original solution and there can be few extended items simultaneously).</p>