Rewriting Animation in Templates doesnt work

[david]

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

[Hristo]

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.

[david]

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

[Hristo]

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.

[david]

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