October

Download: Source

If you will search the Internet - you will certainly find numerous examples of carousel control usage. Why? It is a great control for wide range of tasks. Horizontal and vertical menus, image and photo galleries, it is a great way to present data. Carousel control has great usability and it can add special look'n'feel to your web site to make it different.

See it in action below:

Let's take a look how CarouselControl can be used. How simple it is in usage and which features it provides.

Here is an example of simple Ellipse carousel. Note: this example uses images as items, but it is possible to bind any data items.

 <SvUx:CarouselControl 
                     AlignCenter="True" 
                     ZDepth="100" >
     <SvUx:CarouselControl.LocationSetup >
          <SvFx:EllipseLocationSetup 
                                    Depth="40" 
                                    CanUseOpacity="True" 
                                    RadiusX="100" 
                                    RadiusY="45" />
     </SvUx:CarouselControl.LocationSetup>
     <SvUx:CarouselControl.Setup >
          <SvFx:CycleTransitionSetup 
                                    SpeedRatio="2" />
     </SvUx:CarouselControl.Setup>
     <SvUx:CarouselControl.MouseOverPattern >
          <SvFx:ShakeItemPattern />
     </SvUx:CarouselControl.MouseOverPattern>


  Items go here...
 </SvUx:CarouselControl>

Here is the screen shot of the result:

Now let's change several properties and our ellipse carousel will be transformed to slide show:

 <SvUx:CarouselControl 
                     AlignCenter="True" 
                     ZDepth="100" >
     <SvUx:CarouselControl.LocationSetup >
          <SvFx:CoverFlowLocationSetup 
                                      Depth="40" 
                                      CanUseOpacity="True" />
     </SvUx:CarouselControl.LocationSetup>
     <SvUx:CarouselControl.Setup >
          <SvFx:CycleTransitionSetup 
                                    SpeedRatio="2" />
     </SvUx:CarouselControl.Setup>
     <SvUx:CarouselControl.MouseOverPattern >
          <SvFx:ShakeItemPattern />
     </SvUx:CarouselControl.MouseOverPattern>


  Items go here...
 </SvUx:CarouselControl>

Note: we added MouseOverPattern to the carousel so now it can react to mouse over event.

Here is how it will look like:

Note: We used CoverFlowLocationSetup instead of EllipseLocationSetup to change items arrangement.

Carousel control contains four specially designed location setups, however it is easy to add new setups.

Now let's return back to the ellipse carousel and make another change. By default topmost item of the Carousel control is defined automatically. For the ellipse carousel it is always item closest to viewer. However we can specify different topmost item index. Let's set TopmostIndex to zero, this means that the first carousel item will be always topmost:

 <SvUx:CarouselControl 
                     x:Name="ctrlRotatedEllipse" 
                     AlignCenter="True" 
                     VerticalAlignment="Stretch" 
                     HorizontalAlignment="Stretch" 
                     ZDepth="100" >
     <SvUx:CarouselControl.LocationSetup >
          <SvFx:EllipseLocationSetup 
                                    Depth="40" 
                                    CanUseOpacity="True" 
                                    RadiusX="40" 
                                    RadiusY="70" 
                                    TopmostIndex="0" 
                                    TopmostMode="Specified" />
     </SvUx:CarouselControl.LocationSetup>
     <SvUx:CarouselControl.Setup >
          <SvFx:CycleTransitionSetup 
                                    SpeedRatio="2" />
     </SvUx:CarouselControl.Setup>
     <SvUx:CarouselControl.MouseOverPattern >
          <SvFx:ShakeItemPattern />
     </SvUx:CarouselControl.MouseOverPattern>


  Items go here...
 </SvUx:CarouselControl>

Let's change radius of the Carousel control to zero and we'll get vertical line carousel. This small change can lead to significant modification of the Carousel look'n'feel:

 <SvUx:CarouselControl 
                     AlignCenter="True" 
                     ZDepth="100" >
     <SvUx:CarouselControl.LocationSetup >
          <SvFx:EllipseLocationSetup 
                                    Depth="40" 
                                    CanUseOpacity="True" 
                                    RadiusX="0" 
                                    RadiusY="70" 
                                    TopmostIndex="0" 
                                    TopmostMode="Specified" />
     </SvUx:CarouselControl.LocationSetup>
     <SvUx:CarouselControl.Setup >
          <SvFx:CycleTransitionSetup 
                                    SpeedRatio="2" />
     </SvUx:CarouselControl.Setup>
     <SvUx:CarouselControl.MouseOverPattern >
          <SvFx:ShakeItemPattern />
     </SvUx:CarouselControl.MouseOverPattern>


  Items go here...
 </SvUx:CarouselControl>

Note: one line line of XAML can completely change look'n'feel of the CarouselControl. CarouselControl includes Silverlight 3 powered features: blur, reflection effects, projection and so on.

Do you know any great examples, where Carousel control can be used? Please let me know! :-)