Home > Uncategorized > A quick look at FluidMoveBehaviour

A quick look at FluidMoveBehaviour

With Expression Blend ships a couple of assemblies that are used to implement various features on top of WPF and Silverlight. One such feature is the FluidMoveBehaviour that can be used to implement fancy stuff like this. The sample contained quite a lot of stuff and in order to see clearly what was going on, I stripped away all but the core parts. This is my version. In order to compile it references must be added to System.Windows.Interactivity and Microsoft.Expression.Interactions.

XAML:

<Window x:Class="FluidMoveTest.MainWindow"

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

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

       xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity&quot;

       xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions&quot;     

       Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

 

        <!– Master –>

        <ListView ItemsSource="{Binding MyItems}" Name="mylistBox">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <StackPanel>

                        <Image Source="{Binding Image}" Width="100">

                            <i:Interaction.Behaviors>

                                <ei:FluidMoveSetTagBehavior Tag="DataContext"/>

                            </i:Interaction.Behaviors>

                        </Image>

                    </StackPanel>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

 

        <!– Detail –>

        <StackPanel DataContext="{Binding SelectedItem, ElementName=mylistBox}" Grid.Column="1">

            <Image Source="{Binding Image}">

                <i:Interaction.Behaviors>

                    <ei:FluidMoveBehavior InitialTag="DataContext" Duration="0:0:0.5" FloatAbove="True">

                        <ei:FluidMoveBehavior.EaseY>

                            <CubicEase EasingMode="EaseIn"/>

                        </ei:FluidMoveBehavior.EaseY>

                        <ei:FluidMoveBehavior.EaseX>

                            <CubicEase EasingMode="EaseIn"/>

                        </ei:FluidMoveBehavior.EaseX>

                    </ei:FluidMoveBehavior>

                </i:Interaction.Behaviors>

            </Image>

        </StackPanel>

    </Grid>

</Window>

 

C#:

public partial class MainWindow : Window

{

    public class MyItemType

    {

        public System.Windows.Media.ImageSource Image { get; set; }

    }

 

    public MainWindow()

    {

        InitializeComponent();

        this.DataContext = this;

        MyItems = new ObservableCollection<MyItemType>();

        MyItems.Add(new MyItemType { Image = new BitmapImage(new Uri("pack://application:,,,/FluidMoveTest;component/Resources/Hydrangeas.jpg")) });

        MyItems.Add(new MyItemType { Image = new BitmapImage(new Uri("pack://application:,,,/FluidMoveTest;component/Resources/Koala.jpg")) });

        MyItems.Add(new MyItemType { Image = new BitmapImage(new Uri("pack://application:,,,/FluidMoveTest;component/Resources/Lighthouse.jpg")) });

    }

 

    public ObservableCollection<MyItemType> MyItems { get; set; }

}

 

Final application:

shot

 

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: