locked
FluidMoveBehaviour Blend 4 PLEASE HELP ! RRS feed

  • Question

  • PLEASE HELP ! I am having trouble getting any sort of fluidmove behaviour to work within any blend 4 project (WPF or Silverlight). Whether i use a Wrap panel or stack panel (with multiple rectangles inside) and add the fluid move behaviour to it nothing happens when i run the project. I have tried variations of all the settings for fluid move and nothing works !!!

    I can upload the project for testing if possible?

    I try the same thing in Blend 3 on another PC and it works fine?

    THANKS to anyone who can give assitance.

    See simple code below.

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    	x:Class="SFT.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot">
    		<WrapPanel Margin="40,32,24,122">
    			<i:Interaction.Behaviors>
    				<ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:2">
    					<ei:FluidMoveBehavior.EaseY>
    						<CircleEase EasingMode="EaseOut"/>
    					</ei:FluidMoveBehavior.EaseY>
    					<ei:FluidMoveBehavior.EaseX>
    						<CubicEase EasingMode="EaseIn"/>
    					</ei:FluidMoveBehavior.EaseX>
    				</ei:FluidMoveBehavior>
    			</i:Interaction.Behaviors>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    			<Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>
    		</WrapPanel>
    	</Grid>
    </Window>
    Thursday, July 8, 2010 1:37 PM

All replies

  • Hi!

    Try this:

    <UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

    x:Class="dfdf.MainPage"

    Width="Auto" Height="Auto">

     

    <Grid x:Name="LayoutRoot">

    <toolkit:WrapPanel HorizontalAlignment="Left"  Margin="0,0,0,0" VerticalAlignment="Top">

    <i:Interaction.Behaviors>

    <ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:2">

    <ei:FluidMoveBehavior.EaseY>

    <CircleEase EasingMode="EaseOut"/>

    </ei:FluidMoveBehavior.EaseY>

    <ei:FluidMoveBehavior.EaseX>

    <CubicEase EasingMode="EaseIn"/>

    </ei:FluidMoveBehavior.EaseX>

    </ei:FluidMoveBehavior>

    </i:Interaction.Behaviors>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    </toolkit:WrapPanel>

    </Grid>

    </UserControl>

    Thursday, July 8, 2010 2:31 PM
  • Hi Thank you very much for your response, however i have not really come right.

    I copied your code into a new user control and i had to maually add the reference dll's for interactivity and interactions to get that working but still dont know about the toolkit: name space reference, if i remove the toolkit: and just leave it as a normal wrappanel then still no fluidmove.

    If i leave the toolkit: in the code then My error with the code below is:

    "The name "Wrap Panel" does not exist in the namespace http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

    I once again appreciate your assitance

    <UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

    x:Class="FluidMoveTest1.UserControl"

    Width="Auto" Height="Auto">



    <Grid x:Name="LayoutRoot">


    <toolkit:WrapPanel HorizontalAlignment="Left"  Margin="0,0,0,0" VerticalAlignment="Top">

    <i:Interaction.Behaviors>

    <ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:2">

    <ei:FluidMoveBehavior.EaseY>

    <CircleEase EasingMode="EaseOut"/>

    </ei:FluidMoveBehavior.EaseY>

    <ei:FluidMoveBehavior.EaseX>

    <CubicEase EasingMode="EaseIn"/>

    </ei:FluidMoveBehavior.EaseX>

    </ei:FluidMoveBehavior>

    </i:Interaction.Behaviors>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    <Rectangle Fill="#FF5151C2" Height="100" Stroke="Black" Width="100" Margin="20"/>

    </toolkit:WrapPanel>


    </Grid>

    </UserControl>

    Friday, July 9, 2010 10:43 AM
  • I guess you should download the toolkit : http://silverlight.codeplex.com/releases/view/43528

    ;)

    Saturday, July 10, 2010 2:07 PM
  • Hi

    Thanks for the feedback, i downloaded and tried the toolkit, i add the reference to my project and that fixed the the result error. So it ran fine.....but it does the very same thing mine did before with a normal wrappanel, When the project is run and the silverlight window loads no FLUIDMOVE behaviour actually happpens, just the static WrapPanel with all the rectangels immediatly appear on the screen. I also dont understand why i should have to add anything i thought that Blend comes with the FluidMove Behaviour Built in as My Blend 3 PC has no problem loading the FluidMove Behaviour in either Silverlight or WPF but the same thing (the improved Fluidmove) is just static when i try on my Blend 4 PC and i have tried 3 other peoples Blend 4 installed machines. Sorry it took me a while to figure out the referencing as i have no programming experience i am just a designer building UI's.

    If you have any thoughts that would be great.

     

    Thanks

    Sunday, July 11, 2010 8:27 AM
  • If you resize the the browser the rectangles move , right?
    Sunday, July 11, 2010 8:47 AM
  • Funny enough, my rectangles dont move when i resize my browser. If i resize the Layoutroot grid that i put the usercontrol into on the MainPage.xaml then the rectangles do move inside of blend but not in the browser?

    Thanks

    Tuesday, July 13, 2010 9:47 AM