DevExpress Carousel 設置水平滑動列表

DevExpress中Carousel控件的應用

Carousel，直譯爲旋轉木馬，即旋轉視圖，能夠作爲數據的展現或者菜單項。

 

要實現觸摸左右滑動的效果，實際上是比較容易的，直接在CarouselPanel上實現MouseDown/MouseUp事件，在後臺添加邏輯，判斷是否產生了位置移動，從而控制面板向左或者向右移動子項。

下面介紹一下，Carousel具體使用方法：

一、添加一個CarouselItemsControl

二、設置CarouselItemsControl的ItemContainerStyle。

三、若是是經過數據綁定的，則能夠設置ItemTemplate模板

四、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個子項循環。

一、設置水平的幾個子項在水平方向上的佈局和大小比例

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

二、CarouselPanel中設置 VisibleItemCount="3" AttractorPointIndex="1"  IsRepeat="True"

Margin和ItemSize則根據界面須要調整便可