DevExpress Carousel 设置水平滑动列表

2016-09-28 11:37:08来源:cnblogs.com作者:WinterFish人点击

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

 github地址

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台