I did a search and was not able to find anything similar to what I am trying to do. Is there a way to animate using Expression blend the mouse click of selecting one of the items in the panel? I would like to 'shake' the item when it is selected.
Thanks,
Terry
9 Answers, 1 is accepted
You may predefine the template of a Carouseltem using Expression Blend and when it enters into its IsSelected state you may define an animation based on your needs, something like the following:
<
ControlTemplate.Triggers
>
<
Trigger
Property
=
"IsSelected"
Value
=
"True"
>
<
Setter
Property
=
"Background"
TargetName
=
"CarouselItemBackground"
>
<
Setter.Value
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFCE79F"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFFDD3A8"
/>
</
LinearGradientBrush
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"BorderBrush"
TargetName
=
"CarouselItemBackground"
>
<
Setter.Value
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FF282828"
/>
<
GradientStop
Color
=
"#FF5F5F5F"
Offset
=
"1"
/>
</
LinearGradientBrush
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
<
Setter
Property
=
"RenderTransform"
TargetName
=
"grid"
>
<
Setter.Value
>
<
TransformGroup
>
<
ScaleTransform
/>
<
SkewTransform
/>
<
RotateTransform
Angle
=
"-45"
/>
<
TranslateTransform
/>
</
TransformGroup
>
</
Setter.Value
>
</
Setter
>
</
Trigger
>
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
Feel free to modify this snippet in the way you need.
Please give it a try and if you need any further assistance let us know!
Regards,
Vanya Pavlova
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
x:Class="WpfTACSCarouselItem.MainControl"
x:Name="UserControl"
mc:Ignorable="d"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
<Style x:Key="TACSCarouselItemStyle" TargetType="{x:Type telerik:CarouselItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:CarouselItem}">
<Grid>
<Border>
<Grid>
<Border BorderThickness="1" CornerRadius="6">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.804"/>
<GradientStop Color="#FFBDEEFB" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border BorderThickness="1" CornerRadius="6" Background="White">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#66000000" Offset="0"/>
<GradientStop Color="#2BFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
</Grid>
</Border>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Storyboard x:Key="TACSCarouselItemME">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="TACSCarouselItemML">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="TACSCarouselItemSEL">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-7"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="7"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard x:Name="TACSCarouselItemME_BeginStoryboard" Storyboard="{StaticResource TACSCarouselItemME}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard x:Name="TACSCarouselItemML_BeginStoryboard" Storyboard="{StaticResource TACSCarouselItemML}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Control.MouseDoubleClick">
<BeginStoryboard x:Name="TACSCarouselItemSEL_BeginStoryboard" Storyboard="{StaticResource TACSCarouselItemSEL}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot">
<telerik:CarouselItem x:Name="carouselItem" Content="CarouselItem" Margin="271,157,228,177" Style="{DynamicResource TACSCarouselItemStyle}" RenderTransformOrigin="0.5,0.5" MouseEnter="carouselItem_MouseEnter" MouseLeave="carouselItem_MouseLeave">
<telerik:CarouselItem.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</telerik:CarouselItem.RenderTransform>
</telerik:CarouselItem>
</Grid>
</UserControl>
There are 3 triggers defined: MouseEnter, MouseLeave and MouseDoubleClick
I'm still a little confused how I plug this into a RadCarousel. Can you offer any additional guidance?
Thanks,
Terry
In my opinion it would be better if you move the defined triggers (MouseEnter, MouseLeave ..) to the ControlTemplate triggers collection of CarouselItem. Finally you may mark this style as an implict one and it will be applied to all RadCarousel's items. The following online resources might be of help on that matter:
"Databinding and reflection control problem"
"How to double click a selected image from de carousel?"
"Data bind folder content to Carousel"
Vanya Pavlova
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

I have new defined a:
<
Style TargetType="{x:Type telerik:CarouselItem}">
...
and have defined 2 storyboards in the ControlTemplate.Resourses section. I have also defined the ControlTemplate.Triggers section in the Template.
I have defined a:
<
Style TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
...
This seems to work ok then the Storyboard.TargetName= Border as in the examples you mentioned. But I actually want to move the CarouselItem itself. How do I define a CarouselItem as part of the RadCarousel?
Thanks,
Terry

I have implicitly defined the various sections as per your previous assistance, but in my storyboards I need to specify a storyboard.Target. My animation is done on the CarouselItem itself so I guess I need to explicitly create a CarouselItem. In all examples I've seen so far, I can't find one that has an explicity CarouselItem declaration. Is there an example somewhere that I can have a look at?
Thanks,
Terry
As I stated before if you have defined an implicit style targeted at CarouselItem it will be applied to all carousel items.
Will you please answer to the following questions:
1.Do you have problems to define implicit style or maybe I am missing something?
2.What is the xaml markup behind your animation and what should be the target name for this storyboard?
3. How is this related to an explicit style targeted at CarouselItem?
Any additional information about the desired final result will be highly appreciated as well.
I look forward to hearing from you!
Vanya Pavlova
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

1.Do you have problems to define implicit style or maybe I am missing something?
No, I am not having any problems with the implicit declaration of the CaroselItem as per the examples you have provided. Currently, the implicit declaration of the CaroselItem works for the example in that the animation changes the color of the border when you the mouse hovers over the border. The border in the example is explicitly declared.
2.What is the xaml markup behind your animation and what should be the target name for this storyboard?
In my XAML, at least as generated using Expression Blend, the DoubleAnimationUsingKeyFrames requires a TargetName of the ACTUAL caroselItem object. Which means I have to explicitly declare a CaroselItem object somewhere.
Here is the storyboard xaml that Blend produced:
<Storyboard x:Key="TACSCarouselItemML">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="carouselItem">
<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
3. How is this related to an explicit style targeted at CarouselItem?
The relation is because I'm try to make the caroselItem grow and shrink when you mouse over the caroselItem, I'm also trying to shake the caroselItem when you select it. So I need something declared explicitly to apply my animations to.
Hopefully this makes sense. Or perhaps I'm misunderstanding how the RadCarousel works.
Thanks.
Terry
Thank you for the detailed answers! Indeed you do not have to instantiate the carousel item in these animations, because you are animating elements from its template.
If you want to perform the animation you should change the TargetName, as shown below:
<
Storyboard
x:Key
=
"OnMouseEnter1"
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetName
=
"grid"
>
<
EasingDoubleKeyFrame
KeyTime
=
"0"
Value
=
"1.2"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0.2"
Value
=
"1"
/>
</
DoubleAnimationUsingKeyFrames
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Storyboard.TargetName
=
"grid"
>
<
EasingDoubleKeyFrame
KeyTime
=
"0"
Value
=
"1.2"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0.2"
Value
=
"1"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
<
Storyboard
x:Key
=
"OnMouseLeave1"
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
Storyboard.TargetName
=
"grid"
>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:1"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
In this case the grid is the primary container of the CarouselItem, you may refer to the Expression Blend preview from the attached picture. Furthermore I am attaching you sample application which demonstrates how to implement MouseEnter/MouseLeave animations in CarouselItem using a single implicit style.
Regards,
Vanya Pavlova
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

It's working great! Telerik + Expression Blend creates very nice effects!