Windows 8 Store App Smooth Orientation Change

I have the following problem:

When I change the orientation of my C # + xaml page from landscape to portrait or vice versa, there are half a second or so in which the user can see the large blue parts on the screen before the layout is recounted, rendered. These spots appear to be residues from a previous orientation state.

I'm looking for a way to hide or smooth out this extremely ragged and erratic transition.

I tried adding an orientation change handler using ProgressRing to cover it for 1 second, but that didn't help - the handler executes blue spots. Here is the code for my StoryBoard animation

 <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
            <VisualState x:Name="FullScreenPortrait">
                <Storyboard>
                    <!-- Change the back button and the logo -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerLogoImage" Storyboard.TargetProperty="Width">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="430"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerLogoImage" Storyboard.TargetProperty="Height">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="49"/>
                    </ObjectAnimationUsingKeyFrames>

                    <!--Change section title and navButtons to be in two rows, by moving navButtons to the second row, first column-->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.Row)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.Column)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="Margin">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0,15,0,0"/>
                    </ObjectAnimationUsingKeyFrames>

                    <!--Change the grid-->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemPortraitGridView" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

Any help is appreciated, thanks!

EDIT: I solved this using the following method (and the help of my colleague):

/// <summary>
    /// 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
    /// </summary>
    /// <param name="sender"></param>
    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;
    }