Animation inside of control template

I've created a control template that basically implements an expander that opens when you mouse over the header. I want to make this animated, such that it slides open and slides shut smoothly. The problem is, how do I set the "To" property of the animation inside the control template.

I want the animation to stop when the width of the expander reaches the size it would normally take if I hadn't set the width explicitly and let it auto-size to the contents. How can I set the animation's "To" property?

I'd like to do this all in XAML without making a custom control....

[619 byte] By [farkbert] at [2008-1-4]

«« snapshot folder is on network drive, which requires user and pwd login
»» Management Studio "Katmai" - problem with fonts and colors

# 1

Hello Farkbert,

probably the Sudoku Tutorial on Coding4Fun might help you.

They also animate an expander to smoothly slide open and shut. Not on the mouse over event though, but on the toggle button pressed event, but i guess that might be easily adapted.

Here's some code snippet from that tutorial (for further details see: http://blogs.msdn.com/coding4fun/archive/2006/11/30/1178193.aspx ).

Code Snippet
 <ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="LayoutTransform" TargetName="arrow">
<Setter.Value>
<ScaleTransform ScaleY ="-1"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property ="ToggleButton.IsPressed" Value ="True">
<Setter TargetName ="BackGrad" Property ="RenderTransform">
<Setter.Value>
<TranslateTransform X ="0" Y ="1"/>
</Setter.Value>
</Setter>
</Trigger>
<EventTrigger RoutedEvent ="UIElement.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName ="FadeMask" Storyboard.TargetProperty ="Opacity" To ="0.4" Duration ="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent ="UIElement.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName ="FadeMask" Storyboard.TargetProperty ="Opacity" To ="0" Duration ="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Bye,

Moni

kimoni at 2007-10-3 >

top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...

# 2

kimoni,

Thanks very much for your reply. Unfortunately I already thought of the way they implemented it, and it isn't really the effect I want. In the Sudoku example, they scale the contents from 0% to 100% on open, and then back to 0% when it's closed. This isn't really what I want. I want the contents to slide into place...kinda like sliding a drawer or file out. It shouldn't stretch into view, but slide into view, and be scaled normally throughout the entire motion.

The main sticking point is really knowing the end point of the slide. How big to make it at the end of the animation. Right now, the only way I can see this working is either some code behind or a custom control...or I suppose I could hard-code all of the sizes...but I really DON'T want to do that.

Thanks again for your info. Actually, if nothing else the Sudoku example is pretty neat and I hadn't looked at it before, so it was worth a look for me anyway

Farkbert

farkbert at 2007-10-3 >

# 3

Hello Farkbert,

so I got you wrong, I thought that would be the effect you wanted. Now I understand you, but unfortunately, I got no idea how to handle that...

Perhaps the DesiredSize Property might be helpful?

At least I'm happy to hear, that you liked the Sudoku sample.

Hoping you will find some way of doing it.

All the best,

Moni

kimoni at 2007-10-3 >

Visual Studio Orcas Hot Topic

Visual Studio Orcas New Topic

Visual Studio Orcas

Java / MSDN / Linux Tech / PHP Tech / MSDN DotNet / MSDN TECH / Health Library / Programmers Tech / visual basic Tech / Developer Tech / Ipod faqs / Msdn China Tech