What's New
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.