Skip to main content

How to: Anchor Carousel Items to Specific Points

This example shows how to anchor a Carousel's items to specific points along a path.

Items can be anchored to points by specifying a path via the PointPathFunction property. In the example, a complex piece linear function is defined. Items are displayed within points specified by the function.

The following image shows the result:


<Window x:Class="CarouselPointPathFunction.Window1" 
        Title="Window1" Height="300" Width="548" >
            <Style TargetType="{x:Type Rectangle}" BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=advancedCarouselItemStyle}}">
                <Setter Property="Opacity" Value="1" />

        <dxca:CarouselPanel Margin="12" Name="carouselPanel1" VisibleItemCount="5" ActiveItemIndex="3">
                            <Point X="0" Y="100" />
                            <Point X="50" Y="100" />
                            <Point X="100" Y="100" />
                            <Point X="100" Y="0" />
                            <Point X="160" Y="100" />
                            <Point X="280" Y="100" />
                            <Point X="300" Y="100" />

            <Rectangle Fill="Red" />
            <Rectangle Fill="Green" />
            <Rectangle Fill="Blue" />
            <Rectangle Fill="Yellow" />
            <Rectangle Fill="Cyan" />
            <Rectangle Fill="Orchid" />
            <Rectangle Fill="Black" />
            <Rectangle Fill="Orange" />