Download: Source

Try: SvFx

See: Online Demo

See it in action below:

SlideShow control is designed to simplify slide show creation. Cellbi SlideShow control is very powerful. It can be configured by using slide show patterns. In this article we will focus on the CompositeSlideShowPattern and ArrayAnimationPattern. It can be used to define complex animations and specify animation for each item individually.

Lets take a look how CompositeSlideShowPattern can be used to create a simple photo gallery.

Here is XAML code

 <SlideShow 
          x:Name="uxSlideShow" >
     <SlideShow.Pattern >
          <CompositeSlideShowPattern >
               <CompositeSlideShowPattern.AnimationPattern >
                    <ArrayAnimationPattern 
                                          ItemMargin="10" 
                                          GroupShowInterval="0.7" 
                                          GroupHideInterval="0.7" >
                         <ArrayAnimationPattern.AnimationSelectors >
                              <AllAnimationGroupSelector >
                                   <AllAnimationGroupSelector.AnimationPattern >
                                        <ShiftItemPattern 
                                                         ShowInterval="0.05" 
                                                         ShowSpeed="5" 
                                                         ShowMoveTween="BackTweenOut" 
                                                         ShowShiftMode="FromStart" 
                                                         HideInterval="0.05" 
                                                         HideSpeed="5" 
                                                         HideMoveTween="BackTweenIn" 
                                                         HideScaleTween="BackTweenIn" 
                                                         HideShiftMode="FromStart" />
                                   </AllAnimationGroupSelector.AnimationPattern>
                              </AllAnimationGroupSelector>
                         </ArrayAnimationPattern.AnimationSelectors>
                    </ArrayAnimationPattern>
               </CompositeSlideShowPattern.AnimationPattern>
          </CompositeSlideShowPattern>
     </SlideShow.Pattern>
     <Canvas >
          <Image 
                Source="166002_small.jpg" />
          <Image 
                Source="166005_small.jpg" />
          <Image 
                Source="166007_small.jpg" />
     </Canvas>
 </SlideShow>

SlideShow has "Pattern" property which can be used to extend its functionality. In the example above CompositeSlideShowPattern is used, it interprets items as animated parts.

CompositeSlideShowPattern has "AnimationPattern" property, which specifies locations and animation rules for item parts. In the example above we used ArrayAnimationPattern. It can arrange all items in a grid or in a vector. The number of columns can be set via "ColumnCount" property

The most interesting thing here is that you can specify animations for each sub item in the set individually. This can be done with the help of selectors. Selector represents a function which selects a group of sub items from the whole set and defines animation for this group. Selector can select single item, all items, even or odd items or any other items. It completely depends on the function of selector. Selectors can be combined to create complex animations.

In the example above AllAnimationGroupSelector is used. It is included in the SvFx library. It selects all sub items from SlideShow item (in this case Canvas is used), and applies the same animation pattern to each sub item in the set. AnimationPattern property is used to specify animation for each item in the group. You can get more clear sense of how it works in our Demo.

Best Regards,
Cellbi Software