Rewriting Animation in Templates doesnt work

5 posts, 1 answers
  1. david
    david avatar
    18 posts
    Member since:
    Jan 2009

    Posted 26 Jan 2009 Link to this post

    Hi,

    I want to overwrite VSM behavior on radmenu control, but if I change the ObjectAnimationUsingKeyFrames for ColorAnimation, the control disapears..
    for example in your telerik.windows.control.dll I extract the menu.xml and overwrite the template like this:
    (in TopLevelHeaderTemplate)

                      <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Bg"
                                        Storyboard.TargetProperty="Fill" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Yellow" />
                                </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
                        </vsm:VisualState>

    to this:
                        <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Bg" Duration="0:0:1" To="Red"/>
                            </Storyboard>
                        </vsm:VisualState>

    after aplying the new template (using RadControl.SetTheme() ), after focusing on the menu item, the whole menu just disapears..
    Can you please provide a feedback?
    Thanks,
    David
  2. Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 27 Jan 2009 Link to this post

    Hi david,

    Your code will work only if you explicitly set a SolidColorBrush as a background on RadMenuItem.
    You can do this in the RadMenuItem Style like:
    <Style TargetType="telerikNavigation:RadMenuItem">  
       <Setter Property="Background" Value="Red" /> 
    </Style> 

    or you can explicitly set it to all RadMenuItem you create.

    Let me know if you need more information.

    Kind regards,
    Hristo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. david
    david avatar
    18 posts
    Member since:
    Jan 2009

    Posted 27 Jan 2009 Link to this post

    Thank you Hristo for the answer.
    What you suggest doesnt help. Besides, sorry, but I dont understand why should I set explicitly the background of RadMenuItem.
    Can you please test it?
    I cant overwrite any of the vsm behavour of radmenuitem *templates if it is a ObjectAnimationUsingKeyFrames animation..
    What I want to achieve is, when mouse over on a menu item, the icon will resize to 125% over time of 0:0:0.3.
    David

  4. Answer
    Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 28 Jan 2009 Link to this post

    Hello david,

    From your first post I was with the impression that you want to animate the background:
     <ColorAnimation Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Bg" Duration="0:0:1" To="Red"/>  
     

    This is why I've suggested that in order this animation to work you should have a SolidColorBrush as a background to all RadMenuItems.

    Adding this two animation in Hightlighted and Focused visual states will scale the Icon content:
    <DoubleAnimation To="2" Duration="0:0:3"   
       Storyboard.TargetName="scaleTransform"   
       Storyboard.TargetProperty="ScaleX" /> 
    <DoubleAnimation To="2" Duration="0:0:3" 
       Storyboard.TargetName="scaleTransform" 
       Storyboard.TargetProperty="ScaleY" /> 

    And also you should add a ScaleTransform to the content presenter for the Item content like:
    <ContentPresenter x:Name="Icon" Margin="4,0,0,0" VerticalAlignment="Center" 
            Content="{TemplateBinding Icon}">  
        <ContentPresenter.RenderTransform> 
            <ScaleTransform x:Name="scaleTransform" /> 
        </ContentPresenter.RenderTransform> 
    </ContentPresenter> 

    You should do this for all template that requires scaling the Icon.

    I hope this helps. Let me know if you need more help.

    Best wishes,
    Hristo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. david
    david avatar
    18 posts
    Member since:
    Jan 2009

    Posted 28 Jan 2009 Link to this post

    Thank you Hristo, that helped.
    Have a nice day
    David
Back to Top