locked
Transition Issue! RRS feed

  • Question

  • Hi, i was hoping someone could help me out with a problem I’ve been having when applying transitions. My application is rather complicated but i get the same issue in a simple test application, which is made up of 2 grids. The first grid contains a simple button, and the second contains a rectangle. I have a state group with 2 states, one where the rectangles visibility is set to collapse (I have called it simply ‘off’), and the second, the rectangle is set to visible (I have called this one ‘on’).  I have also set a default transition to ripple, and 3 seconds.

    I have dragged a ‘GoToStateAction’ from the asset library to the button, and the StateName is selected as the ‘On’ state.

    Now when I click the button, the rectangle appears as it should, however the transition seems to be affecting the wrong part of the page. The transition seems to be applied to the button and not the rectangle.

    Does anyone have any clue what exactly I’m doing wrong?

    Thanks, RedRain.

     

    Tuesday, August 9, 2011 4:11 PM

All replies

  • It is hard to say without seeing the actual xaml of the control, but one possibility is that Visibility can't be animated over time, it is either visible or collapsed. You could try using opacity instead.
    Tuesday, August 9, 2011 5:56 PM
    Moderator
  • Apply Opacity 0 to 100, if you add a delay it might also compliment your ripple effect. Cheers!
    Tuesday, August 9, 2011 11:15 PM
  • I've tried using opacity instead of visabillity and its still behaves the same. The state change is fine, It's just the transition is effecting the whole screen, not just the rectangle.

    Im guessing it something really simple im missing, i just cant see what im doing wrong? :(

    	<Grid x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.CustomVisualStateManager>
    			<ei:ExtendedVisualStateManager/>
    		</VisualStateManager.CustomVisualStateManager>
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="RecStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="0:0:3">
    						<ei:ExtendedVisualStateManager.TransitionEffect>
    							<ee:RippleTransitionEffect/>
    						</ei:ExtendedVisualStateManager.TransitionEffect>
    					</VisualTransition>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="RecOn">
    					<Storyboard>
    						<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="RecOff"/>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<Grid x:Name="Buttons" HorizontalAlignment="Left" Margin="66,83,0,173" Width="304">
    			<Button Height="107" Margin="8,58,8,0" VerticalAlignment="Top" Content="Penguins">
    				<i:Interaction.Triggers>
    					<i:EventTrigger EventName="Click">
    						<ei:GoToStateAction StateName="RecOn"/>
    					</i:EventTrigger>
    				</i:Interaction.Triggers>
    			</Button>
    		</Grid>
    		<Grid x:Name="Rectangle" Margin="370,83,63,113">
    			<Rectangle x:Name="rectangle" Fill="#FF4D4DAF" Margin="49,28,46,41" Stroke="Black" Opacity="0"/>
    		</Grid>
    	</Grid>
    </UserControl>

     

    Wednesday, August 10, 2011 8:35 AM