2012-05-07 17 views
14

Estoy teniendo problemas para realizar una sencilla animación basada en guión gráfico de una altura controles en una aplicación estilo Metro C#/XAML en Windows 8.cómo animar la altura del control en Windows 8 XAML

El siguiente XAML trivial y el código detrás de fragmentos de funcionar bien en Silverlight 5 y Windows Phone 7, pero no hacer nada en Windows 8 (al menos para mí):

<Page.Resources> 
    <Storyboard x:Name="expandAnimation"> 
     <DoubleAnimation Storyboard.TargetName="scaleButton" Storyboard.TargetProperty="Height" From="50" To="200" Duration="0:0:1"/> 
    </Storyboard> 
</Page.Resources> 

<StackPanel Width="200"> 
    <Button x:Name="scaleButton" Click="scaleButton_Click" Content="Scale"/> 
    <Button Content="Another button"/> 
    <Button Content="Yet another button"/> 
</StackPanel> 

código C#:

private void scaleButton_Click(object sender, RoutedEventArgs e) 
{ 
    expandAnimation.Begin(); 
} 

El mismo código puede ser alterado para animar otras propiedades del control como Opacity que funciona como se esperaba.

Puedo animar una ScaleTransform para hacer la escala, pero altera la representación interna del control, y no afecta el diseño de los controles vecinos, lo cual es un problema para mí.

Afortunadamente no me falta nada obvio aquí, pero ¿no debería funcionar?

Respuesta

29

Solo necesita agregar EnableDependentAnimation="True" y luego debería funcionar bien.

+1

Muchas gracias @Sofian! Agregando 'EnableDependentAnimation =" True "' al elemento DoubleAnimation en el xaml de arriba hizo el truco. – Pete

+0

Muchas gracias, pero ¿puedes explicarnos qué hace esta propiedad? – Stilgar

+1

@Stilgar http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj819807#dependent explica el motivo – legends2k

2

Una animación dependiente es aquella que hará que el Xaml se rediseñe. Costoso; por lo tanto, requiere un "opt-in".

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.media.animation.pointanimation.enabledependentanimation.aspx

Si es posible se debe utilizar un render transformada y la escala del elemento visual en su lugar. Esto es independiente, lo que significa que el resto de los elementos en la página no tendrán que moverse para acomodarse.

Cuestiones relacionadas