Results 1 to 6 of 6

Thread: expressions blend questions

  1. #1

    expressions blend questions

    I just started playing with Blend and had a couple of questions. I have a stack panel with 2 grids inside of it. I have animated the top grid to shrink vertically. I was hoping that when it shrank the grid beneath it would slide up but it's not doing that. Is there a trick to get something like this to work? Essentially the top grid animates to a height of 0 so the 2nd grid should slide up and take it's place.

    2nd, is there a way to save an animation to reuse over and over? So if I want to reuse this shrinking animation on a number of grids I can do that without having to create an animation for each one separately? Thanks.

  2. #2
    Hi cakewalkr7!
    For your first question, the reason is that when animating, the height of an element is not what gets changed by default when you use the adorners. A RenderTransform with ScaleY changes instead.

    What you want to do is set the actual Height property to 0 on the properties inspector at a given keyframe. That should give you the effect that you want. Here is a small XAML snippet that allows you to do that:

    Code:
    	<Window.Resources>
    		<Storyboard x:Key="Storyboard1">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Height)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    			<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    		</EventTrigger>
    	</Window.Triggers>
    
    	<Grid x:Name="LayoutRoot">
    		<StackPanel>
    			<Grid Height="100" Background="#FFF5FF00" x:Name="grid"/>
    			<Grid Height="100" Background="#FF00B3FF"/>
    		</StackPanel>
    	</Grid>
    For your second question, there isn't an easy way to do that without writing code. This tutorial should help: http://www.kirupa.com/blend_wpf/modi...ations_pg1.htm What you would vary is the Storyboard.TargetName, and that would point to the appropriate Grid that you are interested in animating.

    Let me know if that helps or if you need more info.

    Cheers!
    Kirupa

    Great, now even Kirupa is { facebooking | twittering }

  3. #3
    Kirupa, thanks but when I started a new empty xaml file to test your code I got quite a few errors. I'm using the June 2.5 Preview so I don't know if that's the cause of the errors but I've attached a screenshot with the code and errors.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	screen.gif 
Views:	43 
Size:	51.0 KB 
ID:	47602  

  4. #4
    I modified the height instead of the scaleY for the grid and that seemed to work. However I got some unexpected results. When I used the scaleY method all the children in the grid also scaled. But using height left the children's height unaffected. Is this how it should be? It seems strange that the grid below it would slide up as I had hoped yet the upper grid's child textbox and label sizes stay the same and in place.

  5. #5
    Cake - that is by design. Place the contents of your grid inside a ViewBox control (WPF only I believe). Once you have done that, you will see the contents of your grid scale as its height gets altered.

    My earlier XAML snippet could be used when pasted between the <Window> tags. To try out what I just mentioned in this post, create a new WPF project called Animation and overwrite all of the XAML in Window1.xaml with the following:
    Code:
    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="Animation.Window1"
    	x:Name="Window"
    	Title="Window1"
    	Width="640" Height="480">
    	<Window.Resources>
    		<Storyboard x:Key="Storyboard1">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Height)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="2.93"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="96.5"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    			<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    		</EventTrigger>
    	</Window.Triggers>
    
    	<Grid x:Name="LayoutRoot">
    		<StackPanel>
    			<Grid Height="100" Background="#FFF5FF00" x:Name="grid">
    				<Viewbox HorizontalAlignment="Left" Width="100">
    					<Button Content="Button"/>
    				</Viewbox>
    			</Grid>
    			<Grid Height="100" Background="#FF00B3FF" RenderTransformOrigin="0.5,0.5" x:Name="grid1">
    				<Grid.RenderTransform>
    					<TransformGroup>
    						<ScaleTransform ScaleX="1" ScaleY="1"/>
    						<SkewTransform AngleX="0" AngleY="0"/>
    						<RotateTransform Angle="0"/>
    						<TranslateTransform X="0" Y="0"/>
    					</TransformGroup>
    				</Grid.RenderTransform>
    			</Grid>
    		</StackPanel>
    	</Grid>
    </Window>

    Great, now even Kirupa is { facebooking | twittering }

  6. #6
    Okay, so the viewbox doesn't work in silverlight? I'm trying to do this type of an animation in silverlight so do you know of another container that would work in the browser? Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012