2012-07-23 31 views
5

Quiero hacer una transición de color de Background color de una ventana de WPF.Transición de color en WPF

¿Cómo puedo hacer esto?

Por ejemplo:

Brush i_color = Brushes.Red; //this is the initial color 
Brush f_color = Brushes.Blue; //this is the final color 

Cuando hago clic en el botón 1 Button

private void button1_Click(object sender, RoutedEventArgs e) 
{ 
    this.Background = f_color; //here the transition begins. I don't want to be quick. Maybe an interval of 4 seconds. 
} 
+0

@downvoter ¿Por qué? Siéntase libre de comentar –

+4

+1 No entiendo por qué esto se votó negativamente. La pregunta es clara y hay algún código que demuestra lo que quiere el OP. –

+1

@John: Downvote fue probablemente por la falta de esfuerzo mostrado para resolver el problema por su cuenta (consulte la información sobre herramientas de la flecha hacia abajo). También estoy seguro de que esto se ha preguntado antes, por lo que el esfuerzo de búsqueda podría ser cuestionado también. –

Respuesta

13

En el código se puede hacer con este

private void button1_Click(object sender, RoutedEventArgs e) 
{ 
    ColorAnimation ca = new ColorAnimation(Colors.Red, Colors.Blue, new Duration(TimeSpan.FromSeconds(4))); 
    Storyboard.SetTarget(ca, this); 
    Storyboard.SetTargetProperty(ca, new PropertyPath("Background.Color")); 

    Storyboard stb = new Storyboard(); 
    stb.Children.Add(ca); 
    stb.Begin(); 
} 

Como H. B. señaló que esto también funcionará

private void button1_Click(object sender, RoutedEventArgs e) 
{ 
    ColorAnimation ca = new ColorAnimation(Colors.Blue, new Duration(TimeSpan.FromSeconds(4))); 
    this.Background = new SolidColorBrush(Colors.Red); 
    this.Background.BeginAnimation(SolidColorBrush.ColorProperty, ca); 
} 
+1

Tener el guión gráfico para una sola animación es un poco redudant, solo podría usar ['BeginAnimation'] (http://msdn.microsoft.com/en-us/library/system.windows.uielement.beginanimation.aspx) en su lugar . –

+1

@ H.B. 'this.Background.BeginAnimation (SolidColorBrush.ColorProperty, ca);' arroja una excepción * No se puede animar la propiedad 'Color' en 'System.Windows.Media.SolidColorBrush' porque el objeto está sellado o congelado *. Si sabes cómo resolver esto, comparte tu conocimiento. – LPL

+2

@LPL: solo necesita asegurarse de que * no * use una instancia congelada de un 'SolidColorBrush', p. establece 'Background' en' new SolidColorBrush (Colors.Red) ', luego anima eso. Las instancias de 'Pinceles' probablemente estén todas congeladas, por lo que no se pueden cambiar (lo que sería extraño, imagina a alguien tomando' Brushes.Red' y ahora es azul). –

5

Aquí es una manera:

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 

    <Grid x:Name="BackgroundGrid" Background="Red"> 

     <Button HorizontalAlignment="Left" VerticalAlignment="Top"> 
      Transition 
      <Button.Triggers> 
       <EventTrigger RoutedEvent="Button.Click"> 
        <BeginStoryboard> 
         <Storyboard> 
          <ColorAnimation Storyboard.TargetName="BackgroundGrid" From="Red" To="Blue" Duration="0:0:4" Storyboard.TargetProperty="Background" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Button.Triggers> 
     </Button> 
    </Grid> 
</Window> 
+0

No hay código C# - esto usa pure xaml. – RQDQ

+0

¿Desea que el código C# comience la animación o el código C# para definir la animación? – RQDQ

+0

@John: esta respuesta ya hace lo que desea, cambia de color al hacer clic, no es necesario utilizar el controlador de eventos y el código. –

1

Solo para completar LPL y H.B. respuesta ..... En mi caso, necesitaba revertir un control al mismo color que tenía antes de la animación.

Aquí está mi código

ColorAnimation animation = new ColorAnimation() 
{ 
    From = Colors.Orange, 
    To = ((SolidColorBrush)myControl.Background).Color,//Revert to initial control Color 
    Duration = new Duration(TimeSpan.FromSeconds(2)) 
}; 

myControl.Background = new SolidColorBrush(Colors.Orange);//Do not use a frozen instance 
myControl.Background.BeginAnimation(SolidColorBrush.ColorProperty, animation); 
+0

¿Qué pasa con 'Autoreverse = true'? – itsho

+0

Quería tener un color naranja instantáneo y volver a "Color de control". Autoreverse permitiría desvanecerse de "Control Color" a Orange y luego a "Control color". – Guish

Cuestiones relacionadas