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

  • Question

  • I have created 2 states for hiding and showing a grid.  All I am doing is a DoubleAnimation of the Opacity and then using the SlideInTransitionEffect to slide the grid into view.  I want to do this for multiple targets and don't want to have to repeat the code.  How would I change the TargetName of the State in code and execute the state or how would I do all of the XAML below as code behind so I can change the targetname?

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


    Jeff Davis

    • Moved by Lisa Zhu Sunday, July 28, 2013 9:10 AM
    Monday, July 15, 2013 10:54 PM

All replies

  • Hi JeffD503,

    According to your code and description, I got that you want to set the Transtion Effect with code behind and you want to apply one state to multiple targets.

    Firstly, you need to set x:Name for your controls in XAML, then build a VisualStateGroup and a VisualState from code behind, here is my sample:

    In XAML, I added a button named myBtn1 which included some states :

    <Button x:Name="myBtn1" Style="{StaticResource newTemplate}" 
              Content="Button1">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition To="Pressed" GeneratedDuration="0:0:0.01" />
                            <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" />
                            <VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.01" />
                            <VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:1.5">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color"
                                    Storyboard.TargetName="BorderBrush" FillBehavior="HoldEnd" >
                                    <ColorAnimationUsingKeyFrames.KeyFrames>
                                        <LinearColorKeyFrame Value="Blue" KeyTime="0:0:0.5" />
                                        <LinearColorKeyFrame Value="Yellow" KeyTime="0:0:1" />
                                        <LinearColorKeyFrame Value="Black" KeyTime="0:0:1.5" />
                                    </ColorAnimationUsingKeyFrames.KeyFrames>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal" />
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="BorderBrush"     
                                          Storyboard.TargetProperty="Color" To="Red" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard >
                                <ColorAnimation Storyboard.TargetName="BorderBrush"
                                                Storyboard.TargetProperty="Color" To="Transparent" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>

    I've added a button named State1, when you click it,  myBtn1's state will change to a new one which named State1:

    In XAML:

    <Button Content="State1" Click="State1Button_Click" Width="100"/>

    Code behind:

    namespace ControlTemplateTest
    {
        /// <summary>
        /// Interaction logic for Page1.xaml
        /// </summary>
        public partial class Page1 : Page
        {
            VisualStateGroup vsGroup = new VisualStateGroup();
    
            public Page1()
            {
                InitializeComponent();
                System.Collections.IList groups = VisualStateManager.GetVisualStateGroups(this.myBtn1);
                groups.Add(vsGroup);
    
                VisualState state1 = new VisualState() { Name = "State1" };
                vsGroup.States.Add(state1);
            }
    
            private void State1Button_Click(object sender, RoutedEventArgs e)
            {
                VisualState state1 = vsGroup.States[0] as VisualState;
    
                Storyboard sb = new Storyboard();
                DoubleAnimation anim = new DoubleAnimation(1, 0, TimeSpan.FromSeconds(1.0));
                Storyboard.SetTargetProperty(anim, new PropertyPath(FrameworkElement.OpacityProperty));
                sb.Children.Add(anim);
    
                state1.Storyboard = sb;
    
                VisualStateManager.GoToElementState(myBtn1, "State1", true);
            }
        }
    }

    Here are some references about your problem:

    #Creating and using a VisualStateGroup from code behind

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/6a75e15d-7103-4dbd-b31c-a1d9324cabc5/creating-and-using-a-visualstategroup-from-code-behind

    #Silverlight: Switching VisualStates of CustomVisualStateManager in code-behind

    http://stackoverflow.com/questions/1783328/silverlight-switching-visualstates-of-customvisualstatemanager-in-code-behind

    • Edited by IssueKiller Tuesday, July 16, 2013 4:37 AM add content
    Tuesday, July 16, 2013 3:55 AM
  • I get what you are trying to describe but in my case I was trying to do something a little different and I hope much easier to implement in the code behind.

    I have created some states for the main Grid of the application (See original post).   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 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 3:11 PM
  • Hi Jeff,

    From the description, I would like to suggest you to ask in Programming Silverlight with .NET – General forum for better support.

    Thanks for your understanding.

    Regards,


    Lisa Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Sunday, July 28, 2013 9:09 AM