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:Here is the code behind:
[Modified at 12/13/2008 01:22 PM]
[Modified at 12/13/2008 02:45 PM]
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>
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 02:45 PM]
