Skip to content

Transitionz Library

Jump to bottom
andyb1979 edited this page Oct 25, 2016 · 8 revisions

The Transitionz library is a WPF animation library which allows for easy animating of Opacity, Blur, or Position Transforms on Visibility change with simple XAML markup extensions.

NuGet Package

Some simple examples below:

Transitionz.Opacity

It is possible to animate Opacity on Loaded, or Property Changed or via binding to a ViewModel property. To do this, use the Transitionz.Opacity property

<Window x:Class="WpfApplication15.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"       
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525"
        WindowStartupLocation="CenterScreen">
    <Grid>
        <TextBlock Foreground="#AAA" Margin="10" TextWrapping="Wrap" Text="Lorem ipsum ... TODO add really long text here "                   
                   tz:Transitionz.Opacity="{tz:OpacityParams Duration=2000, From=0, To=1, TransitionOn=Loaded}"/>
    </Grid>
</Window>

Transitionz.Opacity

Transitionz.Translate

It is possible to animate Opacity and translate on Visibility Changed. To do this, use the Transitionz.Translate, Transitionz.Opacity and TransitionOn.Visibility properties

<Window x:Class="WpfApplication15.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter>
    </Window.Resources>
    <Grid>
        <CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox>
        <TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center"
            Visibility="Collapsed"
            tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/>
    </Grid>
</Window>

Which results in this

Transitionz.Translate on PropertyChange

Transitionz.Blur

Animate blur on property change, loaded or via binding to viewmodel property.

Animate Blur on Loaded

In the example below we animate Opacity and Blur on loaded

<Window x:Class="WpfApplication15.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"       
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525"
        WindowStartupLocation="CenterScreen">
    <Grid>
        <TextBlock Foreground="#AAA" Margin="10" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, TODO put really long text here"
                   tz:Transitionz.Opacity="{tz:OpacityParams Duration=2000, From=0, To=1, TransitionOn=Loaded}"
                   tz:Transitionz.Blur="{tz:BlurParams Duration=2000, From=20, To=0, TransitionOn=Loaded}"/>
    </Grid>
</Window>

Which results in the following:

Transitionz.Blur on Loaded

Animate Blur on Property Changed

It is also possible to animate blur on PropertyChanged, by using code similar to the following

<Window x:Class="WpfApplication15.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"
        xmlns:wpfApplication15="clr-namespace:WpfApplication15"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter>
        <wpfApplication15:BluParamsWhenTrueConverter x:Key="bpc" From="0" To="10" Duration="200"></wpfApplication15:BluParamsWhenTrueConverter>
    </Window.Resources>
    <Grid>
        <CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox>
        <TextBlock Foreground="#AAA" Margin="10" TextWrapping="Wrap" Text="Lorem ipsum .. TODO insert a lot of text here "
                   tz:Transitionz.Blur="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource bpc}}"/>
        <TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center"
            Visibility="Collapsed"
            tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/>
    </Grid>
</Window>
using System;
using System.Globalization;
using System.Windows.Data;
using SciChart.Wpf.UI.Transitionz;

namespace WpfApplication15
{
    public class BluParamsWhenTrueConverter : IValueConverter
    {
        public double Duration { get; set; }
        public double From { get; set; }
        public double To { get; set; }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((bool)value) ? 
                new BlurParams() {  Duration = Duration, From = From, To = To, TransitionOn = TransitionOn.Once} : 
                new BlurParams() { Duration = 200, From = To, To = From, TransitionOn = TransitionOn.Once};
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Which results in the following on checked-change:

Transitionz.Blur on Checked Change

Complex Usages

You can animate an entire page with several Transitionz attached properties to achieve complex effects. For example, the SciChart WPF Licensing Wizard uses Transitionz to animate several elements as follows:

Transitionz Complex Example

Code for the Homepage above is as follows. Note, this won't be compilable, but shows you how and where we have used Transitionz to achieve the above effects in WPF.

<Window x:Class="SciChart.LicensingWizard.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:abt="http://schemas.abtsoftware.co.uk/presentation"
        xmlns:pages="clr-namespace:SciChart.LicensingWizard.Pages"
        xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"
        WindowStartupLocation="CenterScreen"
        Title="SciChart | Licensing Wizard" Height="600" Width="800">
    
    <Window.Resources>
        <DataTemplate DataType="{x:Type pages:ActivationPageViewModel}">
            <pages:ActivationPageView
                tz:Transitionz.Translate="{tz:TranslateParams Duration=400, From='30,0', To='0,0', Ease={StaticResource SlideEase}, TransitionOn=Loaded}"
                tz:Transitionz.Opacity="{tz:OpacityParams Duration=400, From=0, To=1.0, TransitionOn=Loaded}"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type pages:HomePageViewModel}">
            <pages:HomePageView
                tz:Transitionz.Translate="{tz:TranslateParams Duration=400, From='30,0', To='0,0', Ease={StaticResource SlideEase}, TransitionOn=Loaded}"
                tz:Transitionz.Opacity="{tz:OpacityParams Duration=400, From=0, To=1.0, TransitionOn=Loaded}"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type pages:DeactivationPageViewModel}">
            <pages:DeactivationPageView
                tz:Transitionz.Translate="{tz:TranslateParams Duration=400, From='30,0', To='0,0', Ease={StaticResource SlideEase}, TransitionOn=Loaded}"
                tz:Transitionz.Opacity="{tz:OpacityParams Duration=400, From=0, To=1.0, TransitionOn=Loaded}"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type pages:ManualActivationPageViewModel}">
            <pages:ManualActivationPageView
                tz:Transitionz.Translate="{tz:TranslateParams Duration=400, From='30,0', To='0,0', Ease={StaticResource SlideEase}, TransitionOn=Loaded}"
                tz:Transitionz.Opacity="{tz:OpacityParams Duration=400, From=0, To=1.0, TransitionOn=Loaded}"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type pages:ProxySettingsPageViewModel}">
            <pages:ProxyPageView
                tz:Transitionz.Translate="{tz:TranslateParams Duration=400, From='30,0', To='0,0', Ease={StaticResource SlideEase}, TransitionOn=Loaded}"
                tz:Transitionz.Opacity="{tz:OpacityParams Duration=400, From=0, To=1.0, TransitionOn=Loaded}"/>
        </DataTemplate>
    </Window.Resources>

    <Grid >
        <!-- Background Image -->
        <Grid.Background>
            <ImageBrush AlignmentX="Center"
                        AlignmentY="Top"                        
                        ImageSource="/Resources/Images/HomeBackground.jpg"
                        Stretch="Fill" />
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Background light -->
        <Rectangle Grid.RowSpan="3" Opacity="0.8" Margin="0"
                   tz:Transitionz.Opacity="{tz:OpacityParams BeginTime=0, Duration=2500, From=0, To=1}">
            <Rectangle.Fill>
                <RadialGradientBrush Center="0.5,0.5" RadiusX="1.5" RadiusY="1" GradientOrigin="0.5,0.5">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                        <GradientStop Color="#00000000" Offset="0.6" />
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <!-- Background border -->
        <Rectangle Grid.Row="0" Grid.RowSpan="3"
                   Margin="7"
                   Style="{StaticResource rectangleStyle}" />

        <!-- Title Bar -->
        <Border Grid.Row="0" Margin="8" CornerRadius="2,2,0,0"
                Background="{StaticResource HeaderBrush}">
            <Viewbox Stretch="Uniform" HorizontalAlignment="Left" Margin="10,0,260,5">
                <TextBlock FontFamily="Segoe UI" FontSize="76" Foreground="White" Opacity="0"
                           tz:Transitionz.Opacity="{tz:OpacityParams BeginTime=0, Duration=500, From=0, To=0.3, TransitionOn=DataContextChanged}"
                           Text="{Binding CurrentPage.Title, Converter={StaticResource ToUpperConverter}}" />
            </Viewbox>
        </Border>

        <!-- SciChart Logo -->
        <Image Grid.Row="0" HorizontalAlignment="Right" Margin="20,30" Width="220"
               Height="50"
               Source="/Resources/Images/scichartlogo.png"
               tz:Transitionz.Opacity="{tz:OpacityParams BeginTime=0, Duration=2000, From=0, To=0.8}" 
               tz:Transitionz.Translate="{tz:TranslateParams BeginTime=0, Duration=400, From='0,25', To='0,0', Ease={StaticResource SlideEase}}"/>

        <!-- Homepage Specific controls -->
        <Grid Grid.Row="1" Grid.RowSpan="2">

            <TextBlock FontFamily="Segoe UI" FontSize="76" Foreground="#1FFFFFFF" Text="LICENSING"
                       Opacity="0"
                       Margin="10"
                       tz:Transitionz.Translate="{tz:TranslateParams BeginTime=1000, Duration=1000, From='500,0', To='0,0', Ease={StaticResource SlideEase}}"
                       tz:Transitionz.Opacity="{tz:OpacityParams BeginTime=1000, Duration=2000, From=0, To=0.8, AutoReverse=True}" />

            <TextBlock FontFamily="Segoe UI" FontSize="130" Foreground="#1FFFFFFF" Text="ACTIVATION"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Bottom"
                       Opacity="0"
                       tz:Transitionz.Translate="{tz:TranslateParams BeginTime=1500, Duration=1000, From='50,0', To='0,0', Ease={StaticResource SlideEase}}"
                       tz:Transitionz.Opacity="{tz:OpacityParams BeginTime=1500, Duration=2000, From=0, To=1.0, AutoReverse=True}">
                <TextBlock.Margin>10,10,10,50</TextBlock.Margin>
            </TextBlock>
        </Grid>

        ...
    </Grid>
</Window>
Clone this wiki locally