Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
550
CarouselPanel with less than 3 items
posted

I'm trying to use the Carousel a bit like a fancy tab control.  There are 2 controls that the user can switch between, say orders and invoices, but the carousel doesn't like to have less than 3 items in the list, it tends to just wizz them by and not stop.

 Has anyone tried this?

Thanks

Parents
  • 9694
    posted

    The problem is the carousel is arranging items equal-distance apart on a path. Two items will be positioned at opposite ends of the path, making it more difficult to present one item as the main item. You can position one item on the carousel by only presenting one item at a time. The following is an example how to do this. For demonstration purposes, the following will arrange two colored rectangles in a carousel panel.

    <Grid x:Name="LayoutRoot">
       
    <Path Data="M78,167 L79,167" x:Name="path"/>

        <igWindows:XamCarouselPanel
           
    HorizontalAlignment="Stretch"
           
    VerticalAlignment="Stretch"
           
    Width="Auto" Height="Auto">

     

            <igWindows:XamCarouselPanel.ViewSettings>
               
    <igWindows:CarouselViewSettings
                   
    ItemPath="{Binding ElementName=path, Mode=OneWay}"
                   
    ItemsPerPage="1"
                   
    ItemPathPrefixPercent="0.6"
                   
    ItemPathSuffixPercent="0.4"
                   
    ItemPathPadding="50,0,-50,0">

                    <igWindows:CarouselViewSettings.ScalingEffectStops>

                        <igWindows:ScalingEffectStop Offset="0.5" Value="1.25"/>

                    </igWindows:CarouselViewSettings.ScalingEffectStops>

            </igWindows:CarouselViewSettings>
       
    </igWindows:XamCarouselPanel.ViewSettings>

            <Rectangle Fill="#FF1837A1" Stroke="#FF000000" Width="125" Height="100"/>
            <Rectangle Fill="#FF18A148" Stroke="#FF000000" Width="125" Height="100"/>

        </igWindows:XamCarouselPanel>
    </
    Grid>

Reply Children
No Data