DevExpress Carousel 设置水平滑动列表

DevExpress中Carousel控件的应用

Carousel，直译为旋转木马，即旋转视图，可以做为数据的展示或者菜单项。

 

要实现触摸左右滑动的效果，其实是比较容易的，直接在CarouselPanel上实现MouseDown/MouseUp事件，在后台添加逻辑，判断是否产生了位置移动，从而控制面板向左或者向右移动子项。

下面介绍一下，Carousel具体使用方法：

1、添加一个CarouselItemsControl

2、设置CarouselItemsControl的ItemContainerStyle。

3、如果是通过数据绑定的，则可以设置ItemTemplate模板

4、ItemsPanel，一般是有默认的CarouselPanel。但是大部分情况下，都是要修改其中的样式及属性来达到界面的效果。CarouselPanel中值得关注的几点：

　　A、ItemMovingPath，子项移动路径。通过设置好路径，子项移动的时候会按照固定路径。<PathGeometry Figures="M0,0 400,0" />

　　B、ParameterSet，设置CarouselPanel中子项的相对属性，如Scale相对位置及大小、Opacity透明度、ZIndex堆叠-用来设置靠前靠后

样式设置好以后，可以通过直接绑定CarouselItemsControl的ItemSource，生成列表。

主要的也就这些，具体的细节，可以通过属性去设置。　

下面是Demo:

前台

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxca="http://schemas.devexpress.com/winfx/2008/xaml/carousel"
        xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
        xmlns:wpfApplication9="clr-namespace:WpfApplication9"
        Title="MainWindow" Height="300" Width="480">
    <Grid>
        <Grid>
            <Grid.Resources>
                <dxca:ParameterCollection x:Key="parameterSet">
                    <dxca:Parameter Name="Scale">
                        <dxca:Parameter.DistributionFunction>
                            <dxca:PieceLinearFunction>
                                <dxca:PieceLinearFunction.Points>
                                    <dxca:PointCollection>
                                        <Point X="0" Y="0" />
                                        <Point X="0.05" Y="0.1" />
                                        <Point X="0.5" Y="1" />
                                        <Point X="0.95" Y="0.1" />
                                        <Point X="1" Y="0" />
                                    </dxca:PointCollection>
                                </dxca:PieceLinearFunction.Points>
                            </dxca:PieceLinearFunction>
                        </dxca:Parameter.DistributionFunction>
                    </dxca:Parameter>
                    <dxca:Parameter Name="Opacity" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexNr}}" />
                    <dxca:Parameter Name="ZIndex" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexERIntMax}}" />
                </dxca:ParameterCollection>
                <!--<dxca:ParameterCollection x:Key="parameterSet">
                <dxca:Parameter Name="Scale" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexNr}}" />
                <dxca:Parameter Name="Opacity" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexNr}}" />
                <dxca:Parameter Name="ZIndex" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexERIntMax}}" />
                </dxca:ParameterCollection>-->
                <collections:ArrayList x:Key="LanguageArray">
                    <wpfApplication9:ContentModel Name="AAA1" Source="Chrysanthemum.jpg"/>
                    <wpfApplication9:ContentModel Name="BBB2" Source="Desert.jpg"/>
                    <wpfApplication9:ContentModel Name="CCC3" Source="Hydrangeas.jpg"/>
                    <wpfApplication9:ContentModel Name="AAA4" Source="Jellyfish.jpg"/>
                    <wpfApplication9:ContentModel Name="BBB5" Source="Koala.jpg"/>
                    <wpfApplication9:ContentModel Name="CCC6" Source="Lighthouse.jpg"/>
                    <wpfApplication9:ContentModel Name="BBB7" Source="Penguins.jpg"/>
                    <wpfApplication9:ContentModel Name="CCC8" Source="Tulips.jpg"/>
                </collections:ArrayList>
            </Grid.Resources>
            <dxca:CarouselItemsControl x:Name="carouselItemsControl" ItemsSource="{StaticResource LanguageArray}" >
                <dxca:CarouselItemsControl.ItemContainerStyle>
                    <Style TargetType="{x:Type ContentControl}">
                        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
                        <!--<Setter Property="Opacity" Value="{Binding Path=(dxca:CarouselPanel.Parameters).Opacity, RelativeSource={RelativeSource Self}}" />-->
                        <Setter Property="Panel.ZIndex" Value="{Binding Path=(dxca:CarouselPanel.Parameters).ZIndex, RelativeSource={RelativeSource Self}}" />
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="{Binding Path=(dxca:CarouselPanel.Parameters).Scale, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}"
ScaleY="{Binding Path=(dxca:CarouselPanel.Parameters).Scale, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}"
/>
                                    <TranslateTransform X="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetX, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}" 
Y="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetY, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}" 
/>
                                </TransformGroup>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </dxca:CarouselItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="ItemsControl">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="40"/>
                            </Grid.RowDefinitions>
                            <Image Source="{Binding Source}"></Image>
                            <TextBlock Text="{Binding Path=Name}" Grid.Row="1" HorizontalAlignment="Center" FontSize="30" />
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <dxca:CarouselPanel RenderOptions.BitmapScalingMode="HighQuality" Margin="-200,0"
                                x:Name="carousel" AnimationTime="400"
                                VisibleItemCount="5" AttractorPointIndex="2" 
                                PathPadding="10, 0, 10, 0" PathVisible="False"
                                ItemSize="200,200"
                                IsAutoSizeItem="False" 
                                ClipToBounds="True"
                                IsInvertedDirection="False"
                                IsRepeat="False"
                                ActivateItemOnClick="True" 
                                OffsetAnimationAddFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=InvertedSine}}"
                                ParameterSet="{DynamicResource parameterSet}" 
                                MouseDown="Carousel_OnMouseDown" MouseUp="Carousel_OnMouseUp"
                                >
                            <dxca:CarouselPanel.ItemMovingPath>
                                <PathGeometry Figures="M0,0 400,0" />
                            </dxca:CarouselPanel.ItemMovingPath>
                        </dxca:CarouselPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </dxca:CarouselItemsControl >
        </Grid>
    </Grid>
</Window>

后台

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private Point pt1, pt2 = new Point();
        private int firstTouchId = -1;

        private void Carousel_OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            CarouselPanel _canvas = (CarouselPanel)sender as CarouselPanel;
            if (_canvas != null)
            {
                pt1 = e.GetPosition(_canvas);
                // Record the ID of the first touch point if it hasn't been recorded.
            }
        }

        private void Carousel_OnMouseUp(object sender, MouseButtonEventArgs e)
        {
            CarouselPanel _canvas = (CarouselPanel)sender as CarouselPanel;
            if (_canvas != null)
            {
                pt2 = e.GetPosition(_canvas);
                // Record the ID of the first touch point if it hasn't been recorded.
                if (pt2.X < pt1.X)
                {
                    _canvas.MoveNext();
                }
                else if (pt2.X > pt1.X)
                {
                    _canvas.MovePrev();
                }
            }
        }
    }
    public class ContentModel
    {
        public string Name { get; set; }
        public ImageSource Source { get; set; }
    }

 

下面介绍一下菜单如何循环，如3个子项循环。

1、设置水平的几个子项在水平方向上的布局和大小比例

    <dxca:Parameter Name="Scale">
        <dxca:Parameter.DistributionFunction>
            <dxca:PieceLinearFunction>
                <dxca:PieceLinearFunction.Points>
                    <dxca:PointCollection>
                        <Point X="0.3" Y="0.5" />
                        <Point X="0.5" Y="1" />
                        <Point X="0.7" Y="0.5" />
                    </dxca:PointCollection>
                </dxca:PieceLinearFunction.Points>
            </dxca:PieceLinearFunction>
        </dxca:Parameter.DistributionFunction>
    </dxca:Parameter>

2、CarouselPanel中设置 VisibleItemCount="3" AttractorPointIndex="1"  IsRepeat="True"

Margin和ItemSize则根据界面需要调整即可