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

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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 x:Key="SlideInBorder" TargetType="{x:Type Border}">

<Style.Resources>

<Storyboard x:Key="Storyboard1">

<DoubleAnimation BeginTime="00:00:00" From="0" Duration="00:00:01" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(FrameworkElement.Height)"/>

<DoubleAnimation BeginTime="00:00:00" To="1" Duration="00:00:00" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(FrameworkElement.Opacity)"/>

</Storyboard>

<Storyboard x:Key="Storyboard2">

<DoubleAnimation BeginTime="00:00:00" To="0" Duration="00:00:01" Storyboard.TargetName="{x:Null}" Storyboard.TargetProperty="(FrameworkElement.Height)"/>

</Storyboard>

</Style.Resources>

<Style.Triggers>

<Trigger Property="IsEnabled" Value="True">

<Trigger.EnterActions>

<BeginStoryboard Storyboard="{StaticResource Storyboard1}" Name="SlideStoryboard"/>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>

</Trigger.ExitActions>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Window.Triggers>

</Window.Triggers>

<Grid x:Name="LayoutRoot">

<CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" Content="Activate Panel" IsChecked="{Binding Path=IsEnabled, ElementName=HiddenBorder, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

<Border HorizontalAlignment="Stretch" Background="Blue" x:Name="HiddenBorder" VerticalAlignment="Bottom" Width="Auto" Height="100" IsEnabled="False" Opacity="0" Style="{DynamicResource SlideInBorder}"/>

</Grid>

</Window>

Answer 4

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?

Answer 5

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.

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?

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.