Animate Carousel

10 posts, 1 answers
  1. Terry
    Terry avatar
    8 posts
    Member since:
    May 2011

    Posted 07 Oct 2011 Link to this post

    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
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 10 Oct 2011 Link to this post

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

  3. UI for WPF is Visual Studio 2017 Ready
  4. Terry
    Terry avatar
    8 posts
    Member since:
    May 2011

    Posted 12 Oct 2011 Link to this post

    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
  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 13 Oct 2011 Link to this post

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

  6. Terry
    Terry avatar
    8 posts
    Member since:
    May 2011

    Posted 13 Oct 2011 Link to this post

    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


  7. Terry
    Terry avatar
    8 posts
    Member since:
    May 2011

    Posted 13 Oct 2011 Link to this post

    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
  8. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 18 Oct 2011 Link to this post

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

  9. Terry
    Terry avatar
    8 posts
    Member since:
    May 2011

    Posted 18 Oct 2011 Link to this post

    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
  10. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 19 Oct 2011 Link to this post

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

  11. Terry
    Terry avatar
    8 posts
    Member since:
    May 2011

    Posted 19 Oct 2011 Link to this post

    THANK YOU!!!
    It's working great!  Telerik + Expression Blend creates very nice effects!
Back to Top
UI for WPF is Visual Studio 2017 Ready