title: Windows 8 Store App Smooth Orientation Change
body: <p>I've the following issue: </p>
  
  <p>When I change orientation of my c#+xaml page from landscape to portrait or vice versa there is a half a second or so in which the user can see big blue parts on the screen, before the layout gets recalculated and re-rendered. These spots seem like leftovers from the previous orientation state.</p>
  
  <p><strong>I am looking for a way to hide or smoothen this extremely ragged and bumpy transition.</strong></p>
  
  <p>I tried adding an orientation change handler with a ProgressRing to cover it for 1 second, but it did not help - the handler executes after the blue spots.
  Here is the code of my animation StoryBoard</p>
  
  <pre><code> &lt;!-- The entire page respects the narrower 100-pixel margin convention for portrait --&gt;
              &lt;VisualState x:Name="FullScreenPortrait"&gt;
                  &lt;Storyboard&gt;
                      &lt;!-- Change the back button and the logo --&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerLogoImage" Storyboard.TargetProperty="Width"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="430"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerLogoImage" Storyboard.TargetProperty="Height"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="49"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
  
                      &lt;!--Change section title and navButtons to be in two rows, by moving navButtons to the second row, first column--&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.Row)"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="1"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.Column)"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.ColumnSpan)"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="2"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="Margin"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0,15,0,0"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
  
                      &lt;!--Change the grid--&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemPortraitGridView" Storyboard.TargetProperty="Visibility"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
  </code></pre>
  
  <p>Any help is appreciated, thanks!</p>
  
  <p>EDIT:
  I solved this by using the following method (and the help of my colleague):</p>
  
  <pre><code>/// &lt;summary&gt;
      /// On Orientation change collapse all views, and make visible only the views for the particular new orientation
      /// Also change the font size for portrait mode
      /// &lt;/summary&gt;
      /// &lt;param name="sender"&gt;&lt;/param&gt;
      private async void OnOrientationChanged(object sender)
      {
          headerGrid.Visibility = Visibility.Collapsed;
          itemGridView.Visibility = Visibility.Collapsed;
          itemPortraitGridView.Visibility = Visibility.Collapsed;
          itemListView.Visibility = Visibility.Collapsed;
  
          //Make the loading spinner temporarily visible and stop it in the StoryBoard animation for every orientation separately
          LoadingView.Visibility = Visibility.Visible;
  
          //Change the font size
          if (ScreenHelper.IsInPortraitMode())
          {
              _viewModel.FontSizeMethod = _viewModel.GetPortraitFontSize;
          }
          else
          {
              //change font size method back
              _viewModel.FontSizeMethod = _viewModel.GetLandscapeFontSize;
          }
  
          // Change visibility back to normal in case the xaml approach failed.
          await Task.Delay(1000);
  
          if (ScreenHelper.IsInPortraitMode())
              itemPortraitGridView.Visibility = Windows.UI.Xaml.Visibility.Visible;
          else if (ApplicationView.Value == ApplicationViewState.Snapped)
              itemListView.Visibility = Windows.UI.Xaml.Visibility.Visible;
          else
              itemGridView.Visibility = Windows.UI.Xaml.Visibility.Visible;
  
          headerGrid.Visibility = Visibility.Visible;
          LoadingView.Visibility = Visibility.Collapsed;
      }
  </code></pre>