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则根据界面需要调整即可
作者：
唐宋元明清2188
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。
