Slide Fade Transition

I would like to create a custom slide transition that fades out the FromContent as it is being pushed out and fades in the ToContent as it is entering.

I tried using the StoryboardTransition below. It does what I want except that I want the ToContent to come in from the right edge of the TransitionPresenter and I want the FromContent to exit to the left edge of the TransitionPresenter. The code below simply hard codes the TranslateTransform.X values to 100 and -100.

How can I acheive the above?

Also, are there any examples of creating custom transitions using the Transition class?

Here is the XAML:

<Window
    x:Class="WPF.Client.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:actipro="http://schemas.actiprosoftware.com/winfx/xaml/shared"
    Title="Window2"
    Height="300"
    Width="300"
    >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <actipro:TransitionPresenter x:Name="Presenter" Grid.Row="1">
            <actipro:TransitionPresenter.Transition>
                <actipro:StoryboardTransition>
                    <actipro:StoryboardTransition.FromContentStyle>
                        <Style TargetType="FrameworkElement">
                            <Setter Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform />
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </actipro:StoryboardTransition.FromContentStyle>
                    <actipro:StoryboardTransition.FromContentStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" />
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="0" To="-100" Duration="0:0:1" />
                        </Storyboard>
                    </actipro:StoryboardTransition.FromContentStoryboard>
                    <actipro:StoryboardTransition.ToContentStyle>
                        <Style TargetType="FrameworkElement">
                            <Setter Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform />
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </actipro:StoryboardTransition.ToContentStyle>
                    <actipro:StoryboardTransition.ToContentStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" />
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="100" To="0" Duration="0:0:1" />
                        </Storyboard>
                    </actipro:StoryboardTransition.ToContentStoryboard>
                </actipro:StoryboardTransition>
            </actipro:TransitionPresenter.Transition>
        </actipro:TransitionPresenter>
        <Button Margin="96,12,97,12" Name="button1" Click="button1_Click">Button</Button>
    </Grid>
</Window>

Here is the code behind:

using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WPF.Client
{
    public partial class Window2 : Window
    {
        Rectangle blueRect;
        Rectangle redRect;
        bool isBlue = false;

        public Window2()
        {
            InitializeComponent();
            
            blueRect = new Rectangle();
            blueRect.Height = 50.0;
            blueRect.Width = 50.0;
            blueRect.Fill = new SolidColorBrush(Colors.Blue);

            redRect = new Rectangle();
            redRect.Height = 50.0;
            redRect.Width = 50.0;
            redRect.Fill = new SolidColorBrush(Colors.Red);
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (isBlue)
            {
                Presenter.Content = redRect;
                isBlue = false;
            }
            else
            {
                Presenter.Content = blueRect;
                isBlue = true;
            }
        }
    }
}

[Modified at 12/13/2008 01:22 PM]

[Modified at 12/13/2008 02:45 PM]

Discussion Forums

WPF Studio, Themes, and Shared Library for WPF

Comments (1)

Add a Comment

Products

Download

Purchase

Support

Community

Company