How to slide in Border to unknown height from a DataTrigger?

Thu, 29 May 2008 14:32:00 Z

Hi,

I want to use a DataTrigger for sliding in a Border by changing its height with a DoubleAnimation. Unfortunately, I can't hard code the resulting Height in the animation, because it depends on the contents of the border. I can get the desired height with a binding, but binding to 'To'-field of the animation can't be done in <Style.Triggers>.

In short my question is this: how do you use a DataTrigger to begin an animation that resizes a Border to a Height that is determined from a binding? I want to apply the animation below to my Border.

Code Snippet
<DoubleAnimation
Storyboard.TargetProperty   = "Height"
     To                          = "{Binding Source={StaticResource getHeight}}"
     BeginTime                   = "0:0:0"
     Duration                    = "0:0:0.5" />

- Jussi

How to slide in Border to unknown height from a DataTrigger?

Tue, 03 Jun 2008 13:20:27 Z

I'll try to clarify my problem further, because I haven't received any answers. I can't use:

1) Style.Trigger, since I can't do binding in styles
2) EventTrigger, since I wan't to bind to data change
3) DataTemplate, since Border doesn't have Template attribute

My question still remains: how can I have a DoubleAnimation with a binding applied to a Border when a data trigger fires? I'll happily accept any solution to this problem, I just want to slide in a Border to a height that is unknown at compile time (when a DataTrigger fires).

- Jussi

How to slide in Border to unknown height from a DataTrigger?

Tue, 03 Jun 2008 13:31:50 Z

You can make the Border invisible (Visibility="Hidden"), and bind its height. Within the trigger set the Visibility to Visible and use From = "0" instead. This should give you the effect you want.

How to slide in Border to unknown height from a DataTrigger?

Tue, 03 Jun 2008 15:16:01 Z

Here's the code that does it for you

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="SlideInAnimation.Window1"

x:Name="Window"

Title="Window1"

Width="640" Height="480">

<Window.Resources>

<Style.Resources>

</Storyboard>

</Storyboard>

</Style.Resources>

<Style.Triggers>

<Trigger.EnterActions>

</Trigger.EnterActions>

<Trigger.ExitActions>

</Trigger.ExitActions>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Window.Triggers>

</Window.Triggers>

</Grid>

</Window>

How to slide in Border to unknown height from a DataTrigger?

Wed, 04 Jun 2008 09:55:58 Z

Brownie Points said:

You can make the Border invisible (Visibility="Hidden"), and bind its height. Within the trigger set the Visibility to Visible and use From = "0" instead. This should give you the effect you want.

That's it! Thank you for answering and also for the code example. I wouldn't have figured this out myself.

I think the markup is way too complicated for such a simple effect, though. Why do we need parentheses, curly braces, x:Nulls, FrameworkElement, and so on in XAML and also computation of the desired height in code behind? It's not the first time I cringe from looking at my XAML markup. :-( Is there a way to do this 'more correctly', or at least make it elegant?

How to slide in Border to unknown height from a DataTrigger?

Wed, 04 Jun 2008 11:59:01 Z

mattilaj said:

Brownie Points said:

You can make the Border invisible (Visibility="Hidden"), and bind its height. Within the trigger set the Visibility to Visible and use From = "0" instead. This should give you the effect you want.

XAML, while editable by man, is not truly made for human consumption. I created the animation in Blend and touched up the XAML to do what I wanted (if someone knows how to do a storyboard that is not based on Keyframes in Blend, I'd greatly appreciate the help).

If Flash had a markup language, it would be just as verbose as XAML. The big benefit we get from an XML based syntax is that it is easier for third-party editors to be made.