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

Comments (1)

Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
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 (v2018.1 build 0675) was released 10 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.