备案控制台
探索云世界
开发者社区 安全 文章 正文

DevExpress Carousel 设置水平滑动列表

2016-09-27 1247
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： DevExpress中Carousel控件的应用 Carousel，直译为旋转木马，即旋转视图，可以做为数据的展示或者菜单项。   要实现触摸左右滑动的效果，其实是比较容易的，直接在CarouselPanel上实现MouseDown/MouseUp事件，在后台添加逻辑，判断是否产生了位置移动，从而控制面板向左或者向右移动子项。

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

 

下面介绍一下菜单如何循环，如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则根据界面需要调整即可

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。
文章标签：
前端开发
安全
@winter
目录
相关文章
你挚爱的强哥
|
4月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
你挚爱的强哥
40 0
漏刻有时
|
9月前
layui列表页滚动时弹出窗无法居中的解决方案
layui列表页滚动时弹出窗无法居中的解决方案
漏刻有时
81 0
lqj_本人
|
JavaScript 小程序 Android开发
讲述小程序之组件picker（从底部弹起的滚动选择器）
讲述小程序之组件picker（从底部弹起的滚动选择器）
lqj_本人
290 0
讲述小程序之组件picker（从底部弹起的滚动选择器）
技术小胖子
|
JavaScript 前端开发
上下滑动的swiper，第二个slider高度大于屏幕，如何让它出现滚动条，像单页面那样滑动？？
技术小胖子
2012 0
杰克.陈
|
C#
WPF 实现ScrollViewer的垂直偏移滚动跳转
原文:WPF 实现ScrollViewer的垂直偏移滚动跳转 问题：考虑屏幕大小，一般都是会在表单问卷的页面使用ScrollViewer。问卷中问题漏填漏选时，在提交时校验不过，需要滚动跳转至漏填漏选项。
杰克.陈
939 0
android_bigman
tablayout支持改变选中文字大小，支持左右滑动，支持viewpager，支持三角可移动指示器
TabLayout [简书地址] (https://www.jianshu.com/p/2c3f868266e8) 基于大神的FlycoTabLayout 传送地址和基本用法 用法和属性和这个库一样 效果图如下 Gif_20180828_142709.
android_bigman
2457 0
杰克.陈
|
C#
WPF中获取TreeView以及ListView获取其本身滚动条的方法，可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条)
原文:WPF中获取TreeView以及ListView获取其本身滚动条的方法，可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条) 对于TreeView而言: TreeViewAutomationPeer lvap = new TreeViewAuto...
杰克.陈
2315 0
莫非有道
|
Android开发 索引
Android图片控件，跟随列表(recyclerView)的上下滚动而同步平移。
莫非有道
10141 0
老朱教授
如何让easyui gridview 宽度自适应窗口改变
老朱教授
985 0
技术小牛人
|
UED
实现winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部
技术小牛人
1533 0