How to: Use Custom Parameters

• Jun 07, 2019
• 2 minutes to read

This example shows you how to create a parameter that is used to provide custom scaling for elements along the path and during transition animations. Two new function classes are declared. One is used to increase the element size from the start to the end of the path. Another provides zooming animation effects for element transitions. These functions, and one built-in function, are used to initialize a custom parameter. XAML code then binds the parameter to scaling transformation properties. See Lesson 4 - Using Functions and Parameters for details.

C#

public class MyScaleDistributionFunction : DevExpress.Xpf.Carousel.FunctionBase {
    protected override double GetValueOverride(double x) {
        return x * x * 0.8 + 0.2;
    }
}
public class MyScaleAnimationFunction : DevExpress.Xpf.Carousel.FunctionBase {
    protected override double GetValueOverride(double x) {
        if (x < 0.5)
            return x + 1;
        return 2 - x;
    }
}

VB.NET

Public Class MyScaleDistributionFunction
    Inherits DevExpress.Xpf.Carousel.FunctionBase
    Protected Overrides Function GetValueOverride(ByVal x As Double) As Double
        Return x * x * 0.8 + 0.2
    End Function
End Class
Public Class MyScaleAnimationFunction
    Inherits DevExpress.Xpf.Carousel.FunctionBase
    Protected Overrides Function GetValueOverride(ByVal x As Double) As Double
        If (x < 0.5) Then
            Return x + 1
        End If
        Return 2 - x
    End Function
End Class

XAML

<Page x:Class="CarouselTutorial.TutorialPage1"
    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:local="clr-namespace:CarouselTutorial"
    >
    <dxca:CarouselPanel AttractorPointIndex="6" VisibleItemCount="7" x:Name="myCarousel" PathSizingMode="Stretch">
        <dxca:CarouselPanel.Resources>
        <Style TargetType="{x:Type Rectangle}" BasedOn="{StaticResource 
                {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, 
                ResourceId=advancedCarouselItemStyle}}">
            <Setter Property="Opacity" Value="1" />
            <Setter Property="RenderTransform">
              <Setter.Value>
                <TransformGroup>
                    <ScaleTransform 
                        ScaleX="{Binding Path=(dxca:CarouselPanel.Parameters).MyScalingParameter, 
                                RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UIElement}}}" 
                        ScaleY="{Binding Path=(dxca:CarouselPanel.Parameters).MyScalingParameter, 
                                RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UIElement}}}" />
                    <TranslateTransform 
                        X="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetX, 
                                RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UIElement}}}" 
                        Y="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetY, 
                                RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UIElement}}}" />
                    </TransformGroup>
                </Setter.Value>
             </Setter>
        </Style>
        </dxca:CarouselPanel.Resources>
        <dxca:CarouselPanel.ParameterSet>
            <dxca:ParameterCollection>
                <dxca:Parameter Name="MyScalingParameter">
                    <dxca:Parameter.DistributionFunction>
                        <local:MyScaleDistributionFunction />
                    </dxca:Parameter.DistributionFunction>
                    <dxca:Parameter.AnimationAddFunction>
                        <dxca:ZeroFunction />
                    </dxca:Parameter.AnimationAddFunction>
                    <dxca:Parameter.AnimationMulFunction>
                        <local:MyScaleAnimationFunction />
                    </dxca:Parameter.AnimationMulFunction>
                </dxca:Parameter>
            </dxca:ParameterCollection>
        </dxca:CarouselPanel.ParameterSet>
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"/>
        <Rectangle Fill="Blue"/>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Purple"/>
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"/>
        <Rectangle Fill="Blue"/>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Purple"/>
    </dxca:CarouselPanel>
</Page>