Fade In/Out Window Transition In WPF

Question

Hi,
I am trying to create a transition between two windows, as one fades in the other fades out, in WPF. Below is my attempt to do this but have become stuck as I don't know what parameter I need to pass to the Begin() method in my PlayTransition() method. The MS documentation spoke of a 'containingObject' of type FrameworkElement or setting the TargetName property but ... I'm stuck.

Thanks for any help you can give me.

Imports System.Runtime.CompilerServices
Imports System.Windows.Media.Animation


<Assembly: InternalsVisibleTo("ApplicationStartingTests")>


Friend Module WindowFadeTransition
    Friend Sub Transition(from As Window,
                          [to] As Window)

        ConfigureFromAnimation(from)
        ConfigureToAnimation([to])

        PlayTransition()
    End Sub


    Private Sub ConfigureFromAnimation(from As DependencyObject)
        Const invisible As Double = 0
        Dim fadeOutAnimation As New DoubleAnimation

        With fadeOutAnimation
            .To = invisible
            .Duration = Duration
        End With

        TransitionStoryboard.Children.Add(fadeOutAnimation)
        Storyboard.SetTarget(from,
                             fadeOutAnimation)
        Storyboard.SetTargetProperty(fadeOutAnimation,
                                     New PropertyPath(UIElement.OpacityProperty))
    End Sub


    Private Sub ConfigureToAnimation([to] As DependencyObject)
        Const visible As Double = 1
        Dim fadeInAnimation As New DoubleAnimation

        With fadeInAnimation
            .To = visible
            .Duration = Duration
        End With

        TransitionStoryboard.Children.Add(fadeInAnimation)
        Storyboard.SetTarget([to],
                             fadeInAnimation)
        Storyboard.SetTargetProperty(fadeInAnimation,
                                     New PropertyPath(UIElement.OpacityProperty))
    End Sub


    Private Sub PlayTransition()
        TransitionStoryboard.Begin() '<--- What goes in here!'
    End Sub


    Private ReadOnly Property Duration As New Duration(TimeSpan.FromSeconds(0.7))

    Private ReadOnly Property TransitionStoryboard As New Storyboard
End Module

Answer 1

Hi,
for parallel fadeout and fadein use only one StoryBoard with 2 animations like this:

  Friend Module WindowFadeTransition
    Friend Sub Transition(from As FrameworkElement, [to] As FrameworkElement)
      ConfigureAnimation(from, [to])
      TransitionStoryboard.Begin()
    End Sub

    Private Sub ConfigureAnimation(from As DependencyObject, [to] As DependencyObject)
      TransitionStoryboard.Children.Clear()
      Dim fadeOutAnimation As New DoubleAnimation
      With fadeOutAnimation
        .To = 0
        .Duration = Duration
      End With
      TransitionStoryboard.Children.Add(fadeOutAnimation)
      Storyboard.SetTarget(fadeOutAnimation, from)
      Storyboard.SetTargetProperty(fadeOutAnimation, New PropertyPath(UIElement.OpacityProperty))
      Dim fadeInAnimation As New DoubleAnimation
      With fadeInAnimation
        .To = 1
        .Duration = Duration
      End With
      TransitionStoryboard.Children.Add(fadeInAnimation)
      Storyboard.SetTarget(fadeInAnimation, [to])
      Storyboard.SetTargetProperty(fadeInAnimation, New PropertyPath(UIElement.OpacityProperty))
    End Sub

    Private ReadOnly Property Duration As New Duration(TimeSpan.FromSeconds(10))
    Private ReadOnly Property TransitionStoryboard As New Storyboard
  End Module
End Namespace

Answer 2

Hi,
try following demo:

Imports System.Windows.Media.Animation  
  
Namespace WpfApp043  
  Public Class ViewModel  
    Implements ICommand  
  
    Public Sub New()  
      wnd1.Show()  
      wnd2.Show()  
    End Sub  
  
    Private wnd1 As New Window With {.Background = Brushes.Red, .Height = 100, .Width = 100}  
    Private wnd2 As New Window With {.Background = Brushes.Green, .Height = 100, .Width = 100, .Opacity = 0}  
  
    Public Event CanExecuteChanged As EventHandler Implements ICommand.CanExecuteChanged  
  
    Public Sub Execute(parameter As Object) Implements ICommand.Execute  
      Select Case parameter.ToString  
        Case "1"  
          WindowFadeTransition.Transition(wnd1, wnd2)  
        Case "2"  
          WindowFadeTransition.Transition(wnd2, wnd1)  
      End Select  
    End Sub  
  
    Public Function CanExecute(parameter As Object) As Boolean Implements ICommand.CanExecute  
      Return True  
    End Function  
  End Class  
  
  Friend Module WindowFadeTransition  
    Friend Sub Transition(from As FrameworkElement, [to] As FrameworkElement)  
      ConfigureFromAnimation(from)  
      ConfigureToAnimation([to])  
      PlayTransition(from, [to])  
    End Sub  
  
    Private Sub ConfigureFromAnimation(from As DependencyObject)  
      Const invisible As Double = 0  
      Dim fadeOutAnimation As New DoubleAnimation  
  
      With fadeOutAnimation  
        .To = invisible  
        .Duration = Duration  
      End With  
      TransitionStoryboard1.Children.Clear()  
      TransitionStoryboard1.Children.Add(fadeOutAnimation)  
      Storyboard.SetTarget(from, fadeOutAnimation)  
      Storyboard.SetTargetProperty(fadeOutAnimation, New PropertyPath(UIElement.OpacityProperty))  
    End Sub  
  
    Private Sub ConfigureToAnimation([to] As DependencyObject)  
      Const visible As Double = 1  
      Dim fadeInAnimation As New DoubleAnimation  
  
      With fadeInAnimation  
        .To = visible  
        .Duration = Duration  
      End With  
      TransitionStoryboard2.Children.Clear()  
      TransitionStoryboard2.Children.Add(fadeInAnimation)  
      Storyboard.SetTarget([to], fadeInAnimation)  
      Storyboard.SetTargetProperty(fadeInAnimation, New PropertyPath(UIElement.OpacityProperty))  
    End Sub  
  
    Private Sub PlayTransition(from As FrameworkElement, [to] As FrameworkElement)  
      TransitionStoryboard1.Begin(from)  
      TransitionStoryboard2.Begin([to])  
    End Sub  
  
    Private ReadOnly Property Duration As New Duration(TimeSpan.FromSeconds(0.7))  
    Private ReadOnly Property TransitionStoryboard1 As New Storyboard  
    Private ReadOnly Property TransitionStoryboard2 As New Storyboard  
  End Module  
End Namespace