What's New
SvFx 4.1 (20 January 2011)
Use the following links to download SvFx 4.0 release:
Try SvFx Free Now
Get SvFx Now
Online Demo
Overview
This release is primarily focused on maximum stability and ease of use for the SvFx animation controls.
Our goal was:
"It should be possible to use just a single line of XAML code to setup animations."
As a result this release includes for about 500 new built-in effect patterns. These patterns were developed to save you hours of work required to create Silverlight animations.
We strongly believe that these patterns will cover most of your animation scenarios. However it is possible to modify any pattern for your needs very easily.
This release includes powerful patterns to add animations into Silverlight ChildWindow control. We think that SvFx is the first product on the market which offers you an ability to easily create ChildWindow animations.
For about 500 Built-in Patterns
We added new pattern galleries for TransitionControl, SlideShow, TextAnimation and Silverlight ChildWindow.
TransitionControl and SlideShow patterns are divided into 4 categories:
- Flip (3 patterns)
Flip animations: FlipX, FlipY and FlipXY.
- Rotation (250 patterns)
This category includes most powerful animation patterns. Rotational patterns are based on plane projections and can be used to create 3D space animation transitions.
- Shader (9 patterns)
Shader transitions use pixel shader animation. This category includes such patterns as Wave, Swirl, FadeDown (Left, Right, Up), Clock and so on.
- Text (55 patterns)
Text patterns are used to create text effects. These category includes patterns to animate text by characters, words or complete lines. Any string or TextBlock can be animated.
- Wipe (172 patterns)
Wipe patterns can be used to easily create slide shows. There are patterns such as line, rectangle, matrix and so on.
TextAnimation control supports only Text patterns.
This release adds ChildWindow animation support. You can use Rotation and Wipe patterns for ChildWindow effects.
How to Use SvFx Animation Patterns
Use PatternType property:
Or use Pattern property:
You can also modify pattern settings:
And change ShowRotation settings (* - percent notation):
ChildWindow Animation Support
Add animation effects to Silverlight ChildWindow in XAML.
Enable animation pattern inside OnApplyTemplate override.
Call Show method to show ChildWindow with animation effect.
You can choose different pattern and adjust any available animation settings.
Carousel Elastic Scrolling
This release adds elastic scrolling support into SvFx Carousel control. You can click and drag carousel items by mouse and scroll them with elastic animation. Elastic scrolling greatly improves Carousel conrtol responsiveness and overall impression.
UseElasticScrolling property can be changed to enable/disable elastic scrolling. By default this property is set to true.
SlideShow and TransitionControl Improvements
TransitionControl now supports fast Content property changes. Transition effects are applied without any delays and animation queues. This creates great feeling of responsiveness when transition control content is changed rapidly.
Transition control Content can be set to any data: Image, FrameworkElement, string and so on. Thanks to this TransitionControl can now be used inside Silverlight navigation frame.
The same improvements were made for the SlideShow control. Now it feels more responsive. All slide show effects are now applied without any delays and animation queues. This creates great feeling of responsiveness when slides are quickly changed.
SvFx 4.0 (25 June 2010)
Use the following links to download SvFx 4.0 release:
Try SvFx Free Now
Get SvFx Now
Online Demo
Silverlight 4 and VisualStudio 2010 Support
SvFx controls library now supports Silverlight 4 and VisualStudio 2010. Starting with this release SvFx library will only be available for VisualStudio 2010.
We have improved VisualStudio and Blend integration in this release. Design time experience has also been improved.
Now it is possible to use VisualStudio toolbox and VisualStudio designer to develop Silverlight applications using SvFx controls library.
Support for VisualStudio 2010 and Blend Design Time
We have improved VisualStudio and Blend integration in this release. Now SvFx controls can be used inside interactive VisualStudio and Blend designers.
SvFx controls are registered inside Blend controls palette and inside VisualStudio toolbox.
New TransitionControl With Advanced Animations
TransitionControl uses advanced animations to show control's content. When content property is changed transition control applies specific animation pattern.
Transition control can be used to apply animations when content property is changed. There are several advanced animation patterns supported by the transition control. Note that you can easily create your own advanced animation patterns.
Transition control is really easy to use. You need to place it inside xaml code or you can create transition control instance from procedural code, set it's pattern property and that's all. When content is changed transition control will automatically apply animation pattern.
The following xaml code example shows how TransitionControl can be used.
<cellbi:TransitionControl x:Name="transitionControl" Width="300" Height="400">
<cellbi:TransitionControl.Pattern>
<cellbi:Rotation3DTransitionPattern
SpeedRatio="2"
SlideMode="Sequence"
SlideDelay="0.200000002980232">
<cellbi:Rotation3DTransitionPattern.ShowRotation>
<cellbi:ElementRotation>
<cellbi:ElementRotation.Center>
<cellbi:Point3D X="0" Y="0.5" Z="0.5" />
</cellbi:ElementRotation.Center>
<cellbi:ElementRotation.Offset>
<cellbi:Point3D X="0" Y="0" Z="0" />
</cellbi:ElementRotation.Offset>
<cellbi:ElementRotation.Rotation>
<cellbi:Point3D X="0" Y="-90" Z="0" />
</cellbi:ElementRotation.Rotation>
</cellbi:ElementRotation>
</cellbi:Rotation3DTransitionPattern.ShowRotation>
<cellbi:Rotation3DTransitionPattern.HideRotation>
<cellbi:ElementRotation>
<cellbi:ElementRotation.Center>
<cellbi:Point3D X="0" Y="0.5" Z="0.5" />
</cellbi:ElementRotation.Center>
<cellbi:ElementRotation.Offset>
<cellbi:Point3D X="0" Y="0" Z="0" />
</cellbi:ElementRotation.Offset>
<cellbi:ElementRotation.Rotation>
<cellbi:Point3D X="0" Y="-90" Z="0" />
</cellbi:ElementRotation.Rotation>
</cellbi:ElementRotation>
</cellbi:Rotation3DTransitionPattern.HideRotation>
</cellbi:Rotation3DTransitionPattern>
</cellbi:TransitionControl.Pattern>
</cellbi:TransitionControl>
The xaml code above shows how animation pattern can be set for the TransitionControl.
Pattern property can be set to any descendant of the TransitionPatternBase class.
Currently TransitionControl supports the following transition pattern types:
-
SimpleTransitionPattern - creates FadeIn and FadeOut animations for transition control content.
-
CompositeTransitionPattern - can be used to apply transitions to a group of items located inside content element.
-
FlipTransitionPattern - creates Flip style animations for transition control content.
-
ShaderTransitionPattern - allows pixel shader animations to be applied for transition control content.
-
Rotation3DTransitionPattern - advanced transition control pattern, which can be used to create 3D rotation animations.
Note that TransitionControl supports text animations as well. There is special TextAnimationPattern defined to allow text animations. You can check transition control samples to see how text animation pattern can be defined.
Rotation 3D Animation Patterns
In this release we have added new 3D animation pattern into SvFx library. We've already seen how Rotation3DTransitionPattern can be used inside transition control. There is also Rotation3DSlideShowPattern defined for SlideShow control.
Rotation 3D animation patterns create animations in 3D space. There are two properties which should be specified to create the pattern: ShowRotation and HideRotation.
These properties have ElementRotation type. ElementRotation defines Center, Offest and Rotation properties which can be used to customize 3D rotation animation.
Topmost Element Support for Carousel Control
SvFx 4.0 adds Topmost element support for Carousel control.
EllipseLocationSetup provides an ability to change its geometry using TopmostIndex property. TopmostIndex property sets index of location which should be placed on top of all other locations.
Ellipse location setup defines TopmostMode and TopmostIndex properties to control orientation of geometry and topmost element. You can use RadiusX and RadiusY properties to change ellipse geometry as well.
Reorganized Code Base Structure
In order to clear SvFx code base we have created separate assemblies for SvFx controls. There were namespace name changes as well as controls name changes.
Now SvFx suite includes the following assemblies:
- Cellbi.SvCommon.dll
Contains all common declarations for SvFx products.
- Cellbi.SvEffects.dll
SvEffects product assembly.
Includes foundation effects support and controls.
- Cellbi.SvControls.dll
Contains bonus controls, such as ComboBox, Window and SimpleWrapPanel.
- Cellbi.SvCarousel.dll
SvCarousel product assembly.
Contains Carousel control and it's location and transition setup declarations.
- Cellbi.SvSlideShow.dll
SvSlideShow product assembly.
Contains SlideShow control and it's animation patterns.
- Cellbi.SvTextAnimation.dll
SvTextAnimation product assembly.
Contains TextAnimation control and it's animation patterns.
- Cellbi.SvItemsAnimation.dll
SvItemsAnimation product assembly.
Contains ItemsAnimation control and it's animation patterns.
- Cellbi.SvTransitionControl.dll
SvTransitionControl product assembly.
Contains new TransitionControl added in this version.
In SvFx 4.0 we have added single XAML namespace prefix for all SvFx declarations.
You can now use single XAML namespace prefix for all SvFx controls and animation patterns.
Here is how you can define it inside XAML pages:
<UserControl xmlns:cellbi="http://schemas.cellbi.com/svfx">
Single namespace prefix greatly simplifies SvFx library usage. There is no need to worry about importing other namespaces.
New Installations
We have completely reworked SvFx library installation to allow separate installation for each control included into SvFx library.
There is also single SvFx suite installation which will install everything included into SvFx. When installation is finished it will execute SvFx launcher. It is special tool designed to help you navigate to SvFx samples, documentation, and demo application.
Over 100 Code Samples
We have added more than 100 code samples in this release.
These samples will help you learn common scenarios of SvFx controls usage.
All sample code is located inside [SvFxInstall]\Samples folder.
Samples can be also accessed via SvFx launcher application executed by the installation.
SvFx 3.0 (16 July 2009)
SvFx 3.0 adds full support of new Silverlight 3 features: pixel shaders, projections, reflections, blur and shadow effects. We worked on greatly improving user experience of SvFx controls to allow developers immediately use Silverlight 3 power without investing much effort.
Use the following links to download SvFx 3.0 release:
Try SvFx 3.0 Free Now
Get SvFx 3.0 Now
We are focused on creating Silverlight controls which can be used to create not only line of business applications, it is now much more easy to create great web sites based on Silverlight technology.
This release adds several major features which save development time and effort. It would be great to get your feedback. Please give us your comments so we know which improvements you would like to see in future releases.
Use the hyperlink below to see SvFx demo application in action: SvFx 3.0 Demo
Experiment with the SvFx demo and play with control properties. Each control can be configured using property grid located at the right side. Click "Gallery" button to open gallery of predefined setups we created for you. Click "Code" button to see Xaml code of each control.
Below is detailed list of changes for the 3.0 release.
Carousel Control
Carousel control is greatly improved since 2.0 version. SvFx 3.0 adds advanced CoverFlow location setup and support for blur and reflection effects. We added tweening support for carousel and greatly improved items animation.
Cover Flow Location Setup
SvFx 3.0 introduces advanced CoverFlow location setup which can be used along with existed since version 2.0 Line, V and Ellipse carousel location setups. Cover flow location setup is completely based on Silverlight 3 features, it uses projections to arrange it's items, this means any UI control can be added to the carousel.
On the screen-shot below you can see how cover flow location setup looks like:
The following code shows how cover flow location setup can be easily configured:
<SvUx:CarouselControl.LocationSetup>
<SvFx:CoverFlowLocationSetup
Angle="60"
AngleOffset="0"
ItemSpacing="50"
CenterItemSpacing="5"
Depth="10"
CanUseOpacity="True"
CanUseBlur="True"
BlurStart="15"
BlurAmount="5" />
</SvUx:CarouselControl.LocationSetup>
There are several advanced settings defined by the cover flow location setup, which can be used to effectively change cover flow appearance easily. ItemSpacing and CenterItemSpacing properties control spacing between items. Angle sets angle for each item and AngleOffset can be used to increment each item angle.
Reflection and Blur Support
Carousel control now supports reflection and blur effects. You can add any controls to the carousel and it will work really well. Reflection can be easily added by using HasReflections property of the carousel control. Blur effect can be added by using CanUseBlur property, plus you can adjust blur settings by BlurStart and BlurAmount properties.
Images below show different reflection and blur settings applied to cover flow location setup:
Reflections greatly improve carousel look and feel:
Blur effect brings important items to attention:
Pixel Shader Effects
This release now supports 12 new effects based on Silverlight 3 pixel shader technology. Here is the list of new effects added:
- Fade
- FadeLeft
- FadeRight
- FadeUp
- FadeDown
- FadeCircle
- BackFadeCircle
- Clock
- Ripple
- Swirl
- RadialBlur
- ReflectionShader
SvFx 3.0 adds animation shaders into controls such as SlideShowConrol, ItemsAnimationControl and TextEffectControl. It means that both predefined shaders and shaders which you create will work inside these controls to animate alements, element goups and text. More over you can easily apply shader effects to any UIElement (the same way as other simple effects can be applied, e.g. Scale, Fade, Move, Rotate etc).
The following screen-shot shows slide show with swirl shader effect for items animation:
Below is Xaml code showing how slide show control can use shader effects:
<SlideShowControl.Pattern>
<ShaderSlideShowPattern>
<ShaderSlideShowPattern.Shader>
<SwirlTransitionShaderChanger Frequency="24.0" />
</ShaderSlideShowPattern.Shader>
</ShaderSlideShowPattern>
</SlideShowControl.Pattern>
SvFx defines advanced composite patterns for the SlideShowControl. Using these patterns SlideShowControl can animate any arrays of elements and also it can animate text.
SvFx 3.0 release adds further improvements :) We added support of shaders for text and array animations. Lets take a look how easily you can use and configure shader patterns for these animations:
<ShiftItemPattern>
<ShiftItemPattern.ShowShader>
<FadeLeftShaderChanger />
</ShiftItemPattern.ShowShader>
<ShiftItemPattern.HideShader>
<FadeLeftShaderChanger />
</ShiftItemPattern.HideShader>
</ShiftItemPattern>
Screen-shot below shows SlideShowControl with FadeLeft shader effect:
SlideShowControl and TextEffectControl use shader effect to animate text as well:
<TextAnimationPattern.AnimationSelectors>
<AllAnimationGroupSelector>
<AllAnimationGroupSelector.AnimationPattern>
<ShiftItemPattern>
<ShiftItemPattern.ShowShader>
<FadeLeftShaderChanger />
</ShiftItemPattern.ShowShader>
<ShiftItemPattern.HideShader>
<FadeLeftShaderChanger />
</ShiftItemPattern.HideShader>
</ShiftItemPattern>
</AllAnimationGroupSelector.AnimationPattern>
</AllAnimationGroupSelector>
</TextAnimationPattern.AnimationSelectors>
Screen-shot below shows SlideShowControl using FadeLeft shader effect:
Slide Show Control
Slide show control now has improved support of text effects. Besides new support of shaders, described before, SlideShowControl adds large text effects improvements. You can add multi line text to each slide using TextParagraph object.
Sample code below shows how this can be done:
<TextParagraph TextAlignment="Center" TextMarkup="ByWords">
<TextParagraph.Lines>
<TextBlock Text="Text Effects" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}" />
<TextBlock Text="Slick And Shiny" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}"/>
<TextBlock Text="Styles Support" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}"/>
<TextBlock Text="Easy to Use" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}"/>
</TextParagraph.Lines>
</TextParagraph>
New ShaderSlideShowPattern added to slide show. It's Shader property can be used to set pixel shader effect.
Screen-shot below shows slide show constrol with Clock shader effect:
Xaml code below shows how slide show control can use shader effect:
<SlideShowControl IsCyclic="True" Shuffle="False" >
<SlideShowControl.Pattern>
<ShaderSlideShowPattern SpeedRatio="2">
<ShaderSlideShowPattern.Shader>
<RippleTransitionShaderChanger WaveFrequency="15" WaveSpeed="8" WaveHeight="3" />
</ShaderSlideShowPattern.Shader>
</ShaderSlideShowPattern>
</SlideShowControl.Pattern>
</SlideShowControl>
Items Animation Control
All new features discussed above also work well for ItemsAnimationControl. E.g. it is easy to apply shader effects to each item being animated.
It is also possible to create groups of items and apply different effects to each group.
Grouping makes ItemsAnimationControl powerful and flexible. You can easily add different animations to each row or column. Plus it is possible to adjust animation properties for each group so that final effect can be greatly changed.
Please take a look at the SvFx demo application, try changing different properties for each control and see which effects you can create by simply adjusting several parameters.
Text Effects
Text effects are greatly improved in this release and now support multi line text animations as well as animations by words or single characters.
Multi Line Text Effects
TextEffectControl now has Lines property, which can be used to create multi line text effects.
Lines property is a LineCollection with TextLine instances. Lines can be populated from Xaml or from code behind code, see sample code below:
<SvUx:TextEffectControl.Lines>
<SvFx:TextLine Text ="Text Effects"/>
<SvFx:TextLine Text ="From Cellbi"/>
</SvUx:TextEffectControl.Lines>
Screen-shot below shows multi line text effect:
Animation by Words
TextEffectControl and SlideShowControl can now animate individual words inside multi line text. Special TextMarkup property is added to control how text will be animated: by words or by single characters. TextMarkup enumeration defines 2 elements: TextMarkup.BySymbols and TextMarkup.ByWords. Use TextMarkup.BySymbols to animate text by characters. TextMarkup.ByWords is used to animate text by words.
Sample Xaml code below shows how TextMarkup property can be used:
<SvFx:TextParagraph TextAlignment="Center" TextMarkup="ByWords">
<SvFx:TextParagraph.Lines>
<TextBlock Text="Text Effects" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}" />
<TextBlock Text="Slick And Shiny" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}"/>
<TextBlock Text="Styles Support" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}"/>
<TextBlock Text="Easy to Use" FontSize="32" Style="{StaticResource TextBlockForEffectStyle}"/>
</SvFx:TextParagraph.Lines>
</SvFx:TextParagraph>
Screen-shot below shows text animation applied to words:
SlideShow, Pixel Shaders and New Events
Text effects can be easily used inside SlideShowControl. We already discussed how TextParagraph object can be used to define slide text. You can use text animations to create advertisements, web site menus, notifications and more.
As mentioned above pixel shader effects can be now easily applied to text animations to create new text effect styles.
This release adds support for styles applied to text blocks. Text block styles are now preserved inside text effect control. E.g. you can add DropShadow effect to text block style and it will be used inside the control.
TextEffectControl now defines a set of new events, which fire when Text or Lines property is changed. These events can be used to support data binding scenarios.
Use the following links to download SvFx 3.0 release:
Try SvFx 3.0 Free Now
Get SvFx 3.0 Now
Thanks,
Cellbi Software Team
Version 2.0
Text Effects Added
SvLite Effects is the first Silverlight animation library which adds advanced text effects, based on array animation framework and patterns.
Text effects support is added into effects controls. To create text effects you can use new TextEffectControl or SlideShowControl. These controls provide advanced flexibility and easy of use.
All text effects are based on general animation logic, which can be applied to any single framework element or an array of elements.
Animation behaviour can be specified for single element or an array of elements by using animation patterns and group selectors.
Such technology allows you to create completely different text effects by using simple code.
Array Effects Added
Array effects are supported by SlideShowControl and new ItemAnimationControl. This means that slide show control can work with any array of visual elements. It can split items into groups and apply different animations using predefined animation patterns, such patterns are easy to create or you can use predefined patterns.
Text effect is a special case of array effects and all text effects shown inside SvLite Effects demo application are created by using item animation patterns.
Interaction Improvements
This release adds several interaction improvements to high level controls. New mouse over pattern concept is added to easily specify how items should react to mouse over. You can handle several events to specify mouse over animation or you can use already defined item animation pattern, which will be used automatically to create mouse over effect.
Animation Patterns
You can create item animation patterns which can be used inside slide show control, inside text effects or inside item animation control. This means that you need to create animation pattern only once and reuse it inside all high level features.
Effect Improvements
- Added Stopped event to Effect class.
- Added BeginTime property to Effect, it can be used when you need to start effect after the specified time elapses.
- Improved composite effects, now parallel and sequence effects support BeginTime and can start animation chain for all child effects after the specified time elapses.
New Samples, Documentation and Demo
This release adds samples illustrating new effects and concepts as well as improved documentation and Demo application.