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:

前台

后台

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、设置水平的几个子项在水平方向上的布局和大小比例

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

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