Master Detail Transitions Silverlight

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

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.