Forums Ultimate UI for WPF
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
Close
VO 01
1564
Cover flow
posted

 Hi,

 I use a xamDataPresenter with a CarouselView and I would like to display something like this:

http://creativebits.org/files/ag_coverflow.jpg 

 

I have try... but I cannot find a solution. Please can you help me ?

Thanks 

  • 1564
    posted

     Here is what I have try :

     

        <igDP:CarouselView x:Key="xdpGraphicalView_Cover3DView">
            <igDP:CarouselView.ViewSettings>
          <igWindows:CarouselViewSettings
            ItemPathAutoPad="False"
            ItemPathHorizontalAlignment="Stretch"
            AutoScaleItemContentsToFit="True"
            ItemPath="{StaticResource HorizontalPath}"
            ItemSize="100, 100"
            ReserveSpaceForReflections="True"
            UseScaling="True"
            UseOpacity="True"
            UseZOrder="True"
            UseSkewing="True"
            ItemPathPadding="0,0,0,0"
            ScalingEffectStopDirection="UseItemPath"
            ItemPathPrefixPercent="0.1"
            ItemPathSuffixPercent="0.1"
            IsListContinuous="False"
            ZOrderEffectStopDirection="UseItemPath">

                    <!-- SET CUSTOM OpacityEffectStops SO THAT ITEMS TO THE LEFT AND RIGHT OF THE THE MIDDLE ITEM ARE SEMI_TRANSPARENT
                 NOTE: WE ALSO SET OpacityEffectStopDirection ABOVE ON PathPanel SO THE STOPS ARE EVALUATED BASED ON AN ITEM'S POSITION ALONG THE PATH
                 NOTE: WE ALSO SET THE UseOpacity PROPERTY TO TRUE TO ENABLE OPACITY EFFECTS-->
                    <igWindows:CarouselViewSettings.OpacityEffectStops>
                        <igWindows:OpacityEffectStopCollection>
                            <igWindows:OpacityEffectStop Offset=".35" Value="1"/>
                            <igWindows:OpacityEffectStop Offset=".5" Value="1.0"/>
                            <igWindows:OpacityEffectStop Offset=".65" Value="1"/>
                        </igWindows:OpacityEffectStopCollection>
                    </igWindows:CarouselViewSettings.OpacityEffectStops>


                    <!-- SET CUSTOM SkewAngleYEffectStops SO THAT ITEMS TO THE LEFT AND RIGHT OF THE THE MIDDLE ITEM ARE ANGLED
                           NOTE: WE ALSO SET SkewAngleYEffectStopDirection ABOVE ON PathPanel SO THE STOPS ARE EVALUATED BASED ON AN ITEM'S POSITION ALONG THE PATH
                           NOTE: WE ALSO SET THE UseSkewing PROPERTY TO TRUE TO ENABLE SKEWING-->
                    <igWindows:CarouselViewSettings.SkewAngleYEffectStops>
                        <igWindows:SkewAngleYEffectStopCollection>
                            <igWindows:SkewAngleYEffectStop Offset="0.15" Value="-20"/>
                            <igWindows:SkewAngleYEffectStop Offset="0.45" Value="-20"/>
                            <igWindows:SkewAngleYEffectStop Offset="0.5" Value="0"/>
                            <igWindows:SkewAngleYEffectStop Offset="0.55" Value="20"/>
                            <igWindows:SkewAngleYEffectStop Offset="0.85" Value="20"/>
                        </igWindows:SkewAngleYEffectStopCollection>
                    </igWindows:CarouselViewSettings.SkewAngleYEffectStops>


                    <!-- SET CUSTOM ZOrderEFfectStops SO THAT THE MIDDLE ITEM IS TOPMOST
                            (NOTE WE ALSO SET ZOrderEffectStopDirection ABOVE ON PathPanel SO THE STOPS ARE EVALUATED BASED ON AN ITEM'S POSITION ALONG THE PATH -->
                    <igWindows:CarouselViewSettings.ZOrderEffectStops>
                        <igWindows:ZOrderEffectStopCollection>
                            <igWindows:ZOrderEffectStop Offset="0.0" Value="0"/>
                            <igWindows:ZOrderEffectStop Offset="0.5" Value="1.0"/>
                            <igWindows:ZOrderEffectStop Offset="1.0" Value="0"/>
                        </igWindows:ZOrderEffectStopCollection>
                    </igWindows:CarouselViewSettings.ZOrderEffectStops>


                    <!-- SET CUSTOM ScalingEffectStops SO THAT THE MIDDLE ITEM IS LARGEST
                           (NOTE WE ALSO SET ScalingEffectStopDirection ABOVE ON PathPanel SO THE STOPS ARE EVALUATED BASED ON AN ITEM'S POSITION ALONG THE PATH
                            NOTE: WE ALSO SET THE UseScaling PROPERTY TO TRUE TO ENABLE SCALING-->
                    <igWindows:CarouselViewSettings.ScalingEffectStops>
                        <igWindows:ScalingEffectStopCollection>
                            <igWindows:ScalingEffectStop Offset="0.0" Value="0.6"/>
                            <igWindows:ScalingEffectStop Offset="0.4" Value="0.8"/>
                            <igWindows:ScalingEffectStop Offset="0.5" Value="1"/>
                            <igWindows:ScalingEffectStop Offset="0.6" Value="0.8"/>
                            <igWindows:ScalingEffectStop Offset="1.0" Value="0.6"/>
                        </igWindows:ScalingEffectStopCollection>
                    </igWindows:CarouselViewSettings.ScalingEffectStops>

                </igWindows:CarouselViewSettings>
            </igDP:CarouselView.ViewSettings>
        </igDP:CarouselView>