Download: Source

I think that it'll be correct to say that almost each web site has to represent content separated by pages providing easy navigation between these pages. Navigation between parts of content can be used in photo and video galleries as well.

This is exactly what SlideShow control does. You add photos, videos or any other content as items of the SlideShow and you're done ;)

In this article we'll use only one animation pattern. In future posts I'll show you how other patterns can be used :)

See it in action below:

I hope that this simple post with just several lines of XAML code will give you a good taste of what Cellbi SlideShow control can do. Let's get started.

Cellbi SlideShow gives you an ability to organize content of your site, build photo and video galleries with hundrends of advanced transition effects. You can use builtin slide show animation patterns, or you can change several propereties to completelly change slide show animations in 1-2 steps.

The code to declare SlideShow with several images placed inside will look as follows:

 <SlideShowControl 
                 Width="400" 
                 Height="250" >
     <Image 
           Source="Image001.jpg" 
           Width="380" />
     <Image 
           Source="Image002.jpg" 
           Width="380" />
     <Image 
           Source="Image003.jpg" 
           Width="380" />
     <Image 
           Source="Image004.jpg" 
           Width="380" />
 </SlideShowControl>

That's how SlideShow is declared in XAML code. We've added only 5 lines of code, and it will give us animated transitions between images if we'll call SlideShow.ShowNext, SlideShow.ShowPrevious or SlideShow.ShowByIndex method in C# of VB code.

To be honest such simple example will use only Fade-In and Fade-Out transition effects to show and hide images. To get more complex effects we will use special animation patterns.

Cellbi SlideShow contains several powerfull builtin animation patterns. More over you can create your own animation patterns. Lets take a look how WipeSlideShowAnimarion works.

 <SlideShowControl 
                 Width="400" 
                 Height="250" >
     <SlideShowControl.Pattern >
          <WipeSlideShowPattern >
               <WipeSlideShowPattern.Pattern >
                    <BlindsHorizontalDownWipePattern 
                                                    RowCount="10" 
                                                    WipeTweenType="BackTweenOut" />
               </WipeSlideShowPattern.Pattern>
          </WipeSlideShowPattern>
     </SlideShowControl.Pattern>
     <Image 
           Source="Image001.jpg" 
           Width="380" />
     <Image 
           Source="Image002.jpg" 
           Width="380" />
     <Image 
           Source="Image003.jpg" 
           Width="380" />
     <Image 
           Source="Image004.jpg" 
           Width="380" />
 </SlideShowControl>

Here we use WipeSlideShowPattern as animation pattern for the SlideShow. Then type of wipe animation is set using Pattern property. We use BlindsHorizontalDownWipePattern and assign its properties. Please try to play with different wipe patterns and try to set different properties. You'll find that it is very easy to change transition effects.

Download FREE trial version now.

Play with online Demo application.