DevExpress Carousel sets the horizontal slide list, devexpresscarousel

DevExpress Carousel sets the horizontal slide list, devexpresscarousel

Application of the Carousel control in DevExpress

Carousel usel, which is a Carousel view, can be used as a data display or menu item.

 

To achieve sliding between the left and right of the touch, it is actually relatively easy to implement the MouseDown/MouseUp event directly on the CarouselPanel, and add logic in the background to determine whether the position is moved, this allows the Control Panel to move the child item left or right.

The following describes how to use Carousel:

1. Add a CarouselItemsControl

2. Set ItemContainerStyle of CarouselItemsControl.

3. if data is bound, you can set the ItemTemplate template.

4. ItemsPanel generally has the default CarouselPanel. However, in most cases, you must modify the style and attributes to achieve the interface effect. Important points in CarouselPanel:

A. ItemMovingPath: The sub-item moving path. By setting the path, the sub-item is moved according to the fixed path. <PathGeometry Figures = "M0, 0 400,0"/>

B. ParameterSet: Set the relative attributes of the CarouselPanel subitem, such as the relative location and size of Scale, Opacity transparency, and ZIndex stack. It is used to set the front and back.

After the style is set, you can directly bind the ItemSource of CarouselItemsControl to generate a list.

These are the main details. You can set them through attributes.

The following is a Demo:

Front-end

<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. resources> <dxca: ParameterCollection x: Key = "parameterSet"> <dxca: Parameter Name = "Scale"> <dxca: Parameter. distributionFunction> <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: specified use LPanel}, 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} "/> <dx Ca: Parameter Name = "ZIndex" DistributionFunction = "{StaticResource {ComponentResourceKey TypeInTargetAssembly = {x: Type dxca: ususelpanel}, ResourceId = Linear3PConvexERIntMax}"/> </dxca: parameterCollection> --> <collections: ArrayList x: Key = "LanguageArray"> <wpfApplication9: ContentModel Name = "AAA1" Source = "Chrysanthemum.jpg"/> <wpfApplication9: contentModel Name = "BBB2" Source = "Desert.jpg"/> <wpfApplica Tion9: 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: RrayList> </Grid. resources> <dxca: Using uselitemscontrol x: Name = "using uselitemscontrol" ItemsSource = "{StaticResource using agearray}"> <dxca: Using uselitemscontrol. 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. 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 = "-400, 0" x: Name = "carousel" AnimationTime = "" VisibleItemCount = "5" AttractorPointIndex = "2" PathPadding = "10, 0, 10, 0 "PathVisible =" False "ItemSize =" 200,200 "IsAutoSizeItem =" False "ClipToBounds =" True "IsInvertedDirection =" False "IsRepeat =" False "ActivateItemOnClick =" True "Expiration =" {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> </Window>View Code

Background

Public partial class MainWindow: Window {public MainWindow () {InitializeComponent ();} private Point pt1, pt2 = new Point (); private int firstTouchId =-1; private void upload usel_onmousedown (object sender, MouseButtonEventArgs e) {export uselpanel _ canvas = (CarouselPanel) sender as your uselpanel; if (_ canvas! = Null) {pt1 = e. getPosition (_ canvas); // Record the ID of the first touch point if it hasn't been recorded .}} private void upload usel_onmouseup (object sender, MouseButtonEventArgs e) {export uselpanel _ canvas = (CarouselPanel) sender as your uselpanel; 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 address