Home / Community & Support / Developer Productivity Tools Forums / WPF > Carousel > Animate Carousel

• Terry

  Posted on Oct 7, 2011 (permalink)

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

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on Oct 10, 2011 (permalink)

  Hi Terry,

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

  Attached files

  • CarouselItem.png

  Reply

• Terry

  Posted on Oct 12, 2011 (permalink)

  Here is my project from Expression Blend:
  
  <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

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on Oct 13, 2011 (permalink)

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

  Regards,
  Vanya Pavlova
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Terry

  Posted on Oct 13, 2011 (permalink)

  Thanks for the help so far, I'm getting closer but I still have one issue:
  
  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
  
  
  

  Reply

• Terry

  Posted on Oct 13, 2011 (permalink)

  I just re-read what I typed earlier and it seemed a bit confusing so I will restate what I am after.
  
  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

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on Oct 18, 2011 (permalink)

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

  Regards,
  Vanya Pavlova
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Terry

  Posted on Oct 18, 2011 (permalink)

  Hello, Thanks for your reply, I will try to answer your questions:
  
  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

  Reply

• Answer Vanya Pavlova Vanya Pavlova

  Posted on Oct 19, 2011 (permalink)

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

  Attached files

  • CarouselItemContainer.png
  • AnimateCarouselItem.zip

  Reply

• Terry

  Posted on Oct 19, 2011 (permalink)

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > Carousel > Animate Carousel