WinRT (C#/XAML) Scale without blurring WinRT (C#/XAML) Scale without blurring wpf wpf

WinRT (C#/XAML) Scale without blurring


Seems like a bug. Apparently WinRT is turning CacheMode to BitmapCache automatically during animations and it caches the object at the low scale. While I couldn't reproduce what you are seeing now I had a similar problem in one of the prerelease versions of Windows 8 when animating projection properties of TextBlocks. I think what likely happens is it uses the highest size of your control used before starting the animation to determing the RenderAtScale property value used for BitmapCache (which is not available in WinRT, but existed in Silverlight or WPF and it seems like a version of it exists in WinRT, it just isn't exposed to users of the API). One workaround then might be to somehow invisibly set the ScaleX/ScaleY values of your bitmap to 1 when it loads and then back to 0.2 before the bitmap first shows up. Alternatively you could have the control's opacity set to 0 and scale to 1 before the animation starts, then fade-in the control after animating the scale to 0.2. If you really need the small one to show up before the animation - you could have two copies of the control - one small one that disappears right after the start of the animation and another that starts big but invisible (or at Opacity="0.005") and very quickly animates to Opacity 1, Scale 0.2 when the animation starts.

This looked fine to me:

<Page    x:Class="App76.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:App76"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <Storyboard            x:Name="anim"            SpeedRatio="0.2">            <DoubleAnimationUsingKeyFrames                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"                Storyboard.TargetName="UIBorder">                <EasingDoubleKeyFrame                    KeyTime="0"                    Value="0.2">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase                            EasingMode="EaseInOut" />                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame                    KeyTime="0:0:1.4"                    Value="1">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase                            EasingMode="EaseInOut"                            Amplitude="3" />                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>            </DoubleAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"                Storyboard.TargetName="UIBorder">                <EasingDoubleKeyFrame                    KeyTime="0"                    Value="0.2">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase                            EasingMode="EaseInOut" />                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame                    KeyTime="0:0:1.4"                    Value="1">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase                            EasingMode="EaseInOut"                            Amplitude="3" />                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>            </DoubleAnimationUsingKeyFrames>        </Storyboard>    </Page.Resources>    <Grid        Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <Grid            x:Name="UIBorder"            Width="555"            HorizontalAlignment="Center"            VerticalAlignment="Center"            RenderTransformOrigin="0.5,0.5">            <!--<Grid.CacheMode>                <BitmapCache                    />            </Grid.CacheMode>-->            <Grid.RenderTransform>                <CompositeTransform                    x:Name="ct"                    ScaleY="0.2"                    ScaleX="0.2" />            </Grid.RenderTransform>            <Grid                Margin="122,0,0,0"                RenderTransformOrigin="0.5,0.5">                <Border                    Background="#FF343434"                    ManipulationMode="None"                    IsDoubleTapEnabled="False"                    IsHoldingEnabled="False"                    IsRightTapEnabled="False"                    IsTapEnabled="False"                    RenderTransformOrigin="0.5,0.5">                    <Border.RenderTransform>                        <CompositeTransform />                    </Border.RenderTransform>                </Border>            </Grid>            <Image                HorizontalAlignment="Left"                VerticalAlignment="Center"                Source="ms-appx:///Assets/SplashScreen.png"                Stretch="None" />        </Grid>        <Button            VerticalAlignment="Bottom"            HorizontalAlignment="Left"            Content="TEST"            Click="ButtonBase_OnClick" />    </Grid></Page>using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace App76{    public sealed partial class MainPage : Page    {        public MainPage()        {            this.InitializeComponent();            ct.ScaleX = 1;            ct.ScaleY = 1;            this.Loaded += MainPage_Loaded;        }        void MainPage_Loaded(object sender, RoutedEventArgs e)        {            ct.ScaleX = 0.2;            ct.ScaleY = 0.2;        }        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)        {            anim.Begin();        }    }}


Set UseLayoutRounding="True" for UIBorder