title: WinRT (C#/XAML) Scale without blurring
body: <p>I've put together a basic animation which has a Control scaling from 0.1 to 1.0 (x &amp; y). The problem I keep seeing throughout is this "blurring" of the said controls before they settle on the final static state.</p>
  
  <p>An Example is this screen cam I took.</p>
  
  <p><a href="https://vimeo.com/55519848">Watch Screen Cam</a></p>
  
  <p>I'm not sure what's causing this. Its a default Animation / Storyboard that you would generate via Blend.</p>
  
  <pre><code>&lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="UIBorder" &gt;
              &lt;EasingDoubleKeyFrame KeyTime="0" Value="0.2"&gt;
                  &lt;EasingDoubleKeyFrame.EasingFunction&gt;
                      &lt;BackEase EasingMode="EaseInOut"/&gt;
                  &lt;/EasingDoubleKeyFrame.EasingFunction&gt;
              &lt;/EasingDoubleKeyFrame&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="1"&gt;
                  &lt;EasingDoubleKeyFrame.EasingFunction&gt;
                      &lt;BackEase EasingMode="EaseInOut" Amplitude="3"/&gt;
                  &lt;/EasingDoubleKeyFrame.EasingFunction&gt;
              &lt;/EasingDoubleKeyFrame&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
  </code></pre>
  
  <p>The said control:</p>
  
  <pre><code>&lt;Grid x:Name="UIBorder" Width="555"  HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"&gt;
              &lt;Grid.RenderTransform&gt;
                  &lt;CompositeTransform ScaleY="0.2" ScaleX="0.2"/&gt;
              &lt;/Grid.RenderTransform&gt;
  
              &lt;Grid Margin="122,0,0,0" RenderTransformOrigin="0.5,0.5" &gt;
                  &lt;Border Background="#FF343434" ManipulationMode="None" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" RenderTransformOrigin="0.5,0.5"  &gt;
                      &lt;Border.RenderTransform&gt;
                          &lt;CompositeTransform/&gt;
                      &lt;/Border.RenderTransform&gt;
                  &lt;/Border&gt;
              &lt;/Grid&gt;
              &lt;Image HorizontalAlignment="Left" VerticalAlignment="Center" Source="ms-appx:///Assets/Chrome/LoginSeal.png" Stretch="None"/&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>Note:</strong></p>
  
  <ul>
  <li>I've had this blurring confirmed on both a Windows 8 PC and Surface RT Tablet from two independent sources (ie not hardware specific).</li>
  <li>I've tried BitmapCache to see if that had any changes to it (got worse as it would).</li>
  </ul>