Scala WinRT (C#/XAML) senza sfocatura

Question

Ho creato un'animazione di base con scala di controllo da 0,1 a 1,0 (x & y). Il problema che continuo a vedere è questa "sfocatura" dei controlli suddetti prima che si depositino sullo stato statico finale.

Un esempio è questa schermata che ho scattato.

Watch Screen Cam

io non sono sicuro di quello che sta causando questo. È un'animazione/storyboard predefinita che genereresti tramite Blend.

<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> 

Il detto di controllo:

<Grid x:Name="UIBorder" Width="555" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"> 
      <Grid.RenderTransform> 
       <CompositeTransform 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/Chrome/LoginSeal.png" Stretch="None"/> 
     </Grid> 

Nota:

• Ho avuto questo effetto mosso confermato sia su un PC Windows 8 e Surface RT tavoletta da due fonti indipendenti (cioè non specifico per l'hardware).
• Ho provato BitmapCache per vedere se questo ha apportato modifiche (peggiorato come sarebbe).

Answer 1

Set UseLayoutRounding = "True" per UIBorder

Answer 2

Sembra come un insetto. Apparentemente WinRT trasforma CacheMode in BitmapCache automaticamente durante le animazioni e mette in cache l'oggetto in scala ridotta. Mentre non riuscivo a riprodurre quello che stai vedendo ora ho avuto un problema simile in una delle versioni prerelease di Windows 8 durante l'animazione delle proprietà di proiezione di TextBlocks. Penso che ciò che probabilmente accadrà è che utilizza la dimensione più alta del controllo usato prima di avviare l'animazione per determinare il valore della proprietà RenderAtScale usato per BitmapCache (che non è disponibile in WinRT, ma esiste in Silverlight o WPF e sembra una versione di esso esiste in WinRT, semplicemente non è esposto agli utenti dell'API). Una soluzione alternativa potrebbe quindi essere quella di impostare in modo invisibile i valori ScaleX/ScaleY della bitmap su 1 quando viene caricato e quindi tornare indietro a 0.2 prima che la bitmap venga visualizzata per la prima volta. In alternativa è possibile impostare l'opacità del controllo su 0 e ridurla a 1 prima dell'inizio dell'animazione, quindi fade-in il controllo dopo aver animato la scala su 0,2. Se hai davvero bisogno che il piccolo si mostri prima dell'animazione, potresti avere due copie del controllo, una piccola che scompare subito dopo l'inizio dell'animazione e un'altra che inizia in grande ma invisibile (oppure Opacity = "0,005") e si anima molto velocemente in Opacity 1, Scale 0.2 quando inizia l'animazione.

Questo andava bene per 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(); 
     } 
    } 
}