Posted 16 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 16 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 (v24.1.2) was released 2 months ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.