Posted 14 years ago by James Grimes
Version: 4.5.0482
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:

            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        <actipro:TransitionPresenter x:Name="Presenter" Grid.Row="1">
                        <Style TargetType="FrameworkElement">
                            <Setter Property="RenderTransform">
                                    <TranslateTransform />
                            <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" />
                        <Style TargetType="FrameworkElement">
                            <Setter Property="RenderTransform">
                                    <TranslateTransform />
                            <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" />
        <Button Margin="96,12,97,12" Name="button1" Click="button1_Click">Button</Button>
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()
            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;
                Presenter.Content = blueRect;
                isBlue = true;
[Modified at 12/13/2008 01:22 PM]

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

Comments (1)

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA
Hi James,

Unfortunately I'm not sure you can define this in XAML since I don't believe XAML will allow you to bind the X/Y values to the control size. For our SlideTransition we define everything in code and use ActualWidth, etc.

If you are a customer, we can share our code for that transition with you.

Actipro Software Support

The latest build of this product (v22.1.4) was released 20 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.