你的位置:首页 > ASP.net教程

[ASP.net教程]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"    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    ="http://schemas.microsoft.com/winfx/2006/xaml"    ="http://schemas.devexpress.com/winfx/2008/xaml/carousel"    ="clr-namespace:System.Collections;assembly=mscorlib"    ="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>

View Code

后台

 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; }  }

View Code

 github地址