Blurred textblocks when used in animations

Question

I am simulating the semantic zoom effect in a Windows Store app using animations between two canvas'. However when I "zoom out" the TextBlock that appear on the canvas, appear as VERY blurry until the animation completes.

This only happens for the first animation, after that the text is clear on all subsequent animations.

I suspecting a bitmap caching type issue but either setting the CacheMode to Bitmap or null makes no difference.

Are there any settings that can control or change this?

The XAML used for the animation is fairly straight forward, toggle visibility and then uses a simple DoubleAnimation to change the scale of the X & Y values of the Grid which contain the various images. Inside each Grid is a ViewBox and inside that is a custom control (not a TemplatedControl - just a plain old custom one).

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="VisualStateGroup">
        <VisualStateGroup.Transitions>
            <VisualTransition From="ZoomedIn" GeneratedDuration="0" To="ZoomedOut">
                <Storyboard>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedInGrid" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedInGrid" d:IsOptimized="True"/>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedInGrid">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedOutGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedOutGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedOutGrid">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualTransition>
            <VisualTransition From="ZoomedOut" GeneratedDuration="0" To="ZoomedIn">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedInGrid">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedInGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedInGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedOutGrid" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedOutGrid" d:IsOptimized="True"/>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedOutGrid">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="ZoomedIn"/>
        <VisualState x:Name="ZoomedOut">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedOutGrid">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedInGrid">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

I have recreated a similar issue in a much simpler scenario, the code can be obtained from GitHub and to see the issue there here is a video, note the blurry text when we go from zoomed out back to normal state.

Similar issues:

• Same problem with TextBlocks however the fixes of placing inside canvas and/or rectangle, do not help: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/ddd9f28e-f682-4070-9a48-5b584689df0c
• Similar issue however it seems to affect a Border element: WinRT (C#/XAML) Scale without blurring
• Similar issue but not solutions in it: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/73ff7a75-58bf-4e01-807d-7aeb32918333
• Similar issue http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/78d5b388-45ba-4131-9ca8-061f183d7774

Answer 1

This is by design. Text is not full rendered during animations/zooms. Once complete, the comprehensive rendering is invoked. This is common on almost every platform. If this is killing you, you can animate an image (which is basically what Direct3D is doing). Make sense? I hope this answers your question.