locked
How to create a TransitionEffect with code-behind RRS feed

  • Question

  • I have created some states for the main Grid of the application.   I have several different buttons that call a generic Click Event that I already have in Code behind.  This code sets the visibility property and opacity for a specific grid.  What I wanted to do was use the Transition effect in my defined state 

    Here are the states

    <VisualStateManager.VisualStateGroups>
    				<VisualStateGroup x:Name="VisualStateGroup">
    					<VisualStateGroup.Transitions>
    						<VisualTransition GeneratedDuration="0:0:02" To="ShowScreen">
    							<ei:ExtendedVisualStateManager.TransitionEffect>
    								<ee:SlideInTransitionEffect/>
    							</ei:ExtendedVisualStateManager.TransitionEffect>
    						</VisualTransition>
    						<VisualTransition GeneratedDuration="0:0:02" To="HideScreen">
    							<ei:ExtendedVisualStateManager.TransitionEffect>
    								<ee:SlideInTransitionEffect SlideDirection="RightToLeft"/>
    							</ei:ExtendedVisualStateManager.TransitionEffect>
    						</VisualTransition>
    					</VisualStateGroup.Transitions>
    					<VisualState x:Name="ShowScreen">
    						<Storyboard>
    							<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Main_Screen"/>
    						</Storyboard>
    					</VisualState>
    					<VisualState x:Name="HideScreen">
    						<Storyboard>
    							<DoubleAnimation Duration="1" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Main_Screen"/>
    						</Storyboard>
    					</VisualState>
    				</VisualStateGroup>
    			</VisualStateManager.VisualStateGroups>

    Here is the generic button code I use.  I use the Tag property to tell which Grid I want displayed.

    <Button x:Name="MyBtn" Tag="My_Screen" Click="NavigateToScreen" />

    here is the Code Behind.  In the ShowHideScreen() method I pass it the Tag Property for the ScreenName and in the case were I am setting the Opacity I would rather do a fancier transition effect using the State ShowScreen that I have defined above.  I just need to set the TargetName of that State in my code behind and then call that state instead of setting the opacity myself.

    Class MainWindow 
    
    	Dim Screens as New List(Of String)
    
    	Private Sub NavigateToScreen(sender As Object, e As RoutedEventArgs)
    		Screens.Add(sender.tag)
    		ShowHideScreen(sender.tag,True)
    	End Sub
    
    	Private Sub NavigateBack(Sender As Object, e As RoutedEventArgs)
    		If Screens.Count > 0 Then
    			ShowHideScreen(Screens(Screens.Count-1),False)
    			Screens.Remove(Screens(Screens.Count-1))
    		End If
    	End Sub
    
    	Private Sub NavigateHome(Sender As Object, e As RoutedEventArgs)
    		do while screens.count > 0
    			ShowHideScreen(Screens(Screens.Count-1),False)
    			Screens.Remove(Screens(Screens.Count-1))
    		loop 
    	End Sub
    
    	Private Sub ShowHideScreen(ScreenName as String,ShowHide as Boolean)
    	
    		Dim GridObject as Object =  LayoutRoot.FindName(ScreenName)
    		If GridObject IsNot Nothing Then
    			If GridObject.Tag = "HideTabs" then
    				Tabs.Visibility = IIf(not ShowHide, Visibility.Visible, Visibility.Hidden)
    				Right_Side.Visibility = IIf(not ShowHide, Visibility.Visible, Visibility.Hidden)
    				GridObject.Visibility = IIf(ShowHide, Visibility.Visible, Visibility.Hidden)
    			Else
    				GridObject.Visibility = IIf(ShowHide, Visibility.Visible, Visibility.Hidden)
    				GridObject.Opacity = iif(ShowHide,100,0)
    			End If
    		End If					
    
    	End Sub
    
    End Class


    Jeff Davis

    Tuesday, July 16, 2013 11:21 PM

All replies

  • No comments on how to do this??



    Jeff Davis

    Monday, July 29, 2013 10:49 PM