Master Detail Transitions Silverlight

In this article we are going to learn about the Master Detail animation using the Fluid Move Behavior.

Create a New Silverlight Project.

Add the references as shown below to the Project.




The XAML code is attached below:

<UserControl x:Class="MasterDetail.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:MasterDetail"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <local:SecondsToDurationConverter x:Key="SecondsToDurationConverter"/>
        <DataTemplate x:Key="ItemTemplate">
            <Grid Width="200">
                <Image Source="{Binding Image}" HorizontalAlignment="Right" Width="64" Margin="0">
                    <i:Interaction.Behaviors>
                        <ei:FluidMoveSetTagBehavior Tag="DataContext"/>
                    </i:Interaction.Behaviors>
                </Image>
                <TextBlock Text="{Binding Name}" Margin="0,4" VerticalAlignment="Top" d:LayoutOverrides="Width" FontFamily="Segoe UI" FontSize="14.667"/>
                <TextBlock Text="{Binding Price}" VerticalAlignment="Top" d:LayoutOverrides="Width" Margin="0,25,0,0" FontFamily="Segoe UI" FontSize="14.667"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ChairsDataSource}}">
        <TextBlock Margin="20,8,0,0" VerticalAlignment="Top" Text="V4 FluidMoveBehavior" FontFamily="Segoe UI" FontSize="32" Foreground="#FFF0F0F0" HorizontalAlignment="Left" d:LayoutOverrides="HorizontalAlignment, GridBox"/>
        <Slider x:Name="BehaviorSpeed" HorizontalAlignment="Right" Height="37" Margin="0,14,20,0" VerticalAlignment="Top" Width="71" Maximum="2" Value="0.75"/>
        <ListBox x:Name="listBox" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="20,80,0,20" Width="228" Background="#FF333333" Foreground="#FFF0F0F0" BorderBrush="{x:Null}"/>
        <Grid DataContext="{Binding SelectedItem, ElementName=listBox}" Margin="270,100,20,40" d:DataContext="{Binding Collection[0]}">
            <i:Interaction.Behaviors>
                <ei:FluidMoveBehavior InitialTag="DataContext" Duration="{Binding Value, Converter={StaticResource SecondsToDurationConverter}, ElementName=BehaviorSpeed}" FloatAbove="False">
                    <ei:FluidMoveBehavior.EaseY>
                        <CubicEase EasingMode="EaseIn"/>
                    </ei:FluidMoveBehavior.EaseY>
                    <ei:FluidMoveBehavior.EaseX>
                        <CubicEase EasingMode="EaseIn"/>
                    </ei:FluidMoveBehavior.EaseX>
                </ei:FluidMoveBehavior>
            </i:Interaction.Behaviors>
            <TextBlock Text="{Binding Description}" VerticalAlignment="Bottom" Margin="0,0,0,-20" Foreground="White" FontFamily="Segoe UI" FontSize="16" TextAlignment="Center"/>
            <Image Source="{Binding Image}"/>
            <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,-25,0,0" Foreground="White" FontFamily="Segoe UI" FontSize="18.667"/>
            <TextBlock Text="{Binding Price}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-25,0,0" Foreground="White" FontFamily="Segoe UI" FontSize="18.667"/>
        </Grid>
    </Grid>
</UserControl>

I have added Sample Data to the Project. The Source code is attached.

Define a Converter class as shown below:

public sealed class SecondsToDurationConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, System.Type targetType, object parameter, CultureInfo culture)
        {
            return new Duration(TimeSpan.FromSeconds((double)value));
        }

        public object ConvertBack(object value, System.Type targetType, object parameter, CultureInfo culture)
        {
            throw new System.NotImplementedException();
        }
        #endregion
    }

App.xaml has to be modified as shown below:

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.ChairsDataSource"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             x:Class="MasterDetail.App"
             mc:Ignorable="d">
    <Application.Resources>
        <ResourceDictionary>
            <SampleData:ChairsDataSource x:Key="ChairsDataSource" d:IsDataSource="True"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>


Once the Data has been setup properly, you should see the data in the MainPage.xaml as shown below:

Now run the code.



Thanks.