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 = -; 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则根据界面需要调整即可