Changing height of Grid in WPF using Storyboard - wpf

Question

I'm trying to change the height of a WPF grid from 0 to Auto using Storyboard. I know I can't do it without tricking, so I tried to change the MaxHeight Value, using Databinding in the Storyboard. But I can't make it works (height is always equals to 0). Here is the code I use :
The two visualstates :
<VisualState x:Name="SelectionMode">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CurrentToolGrid" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="EditionMode">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CurrentToolGrid" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)">
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding ElementName=CurrentToolGrid, Path=ActualHeight}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Here is my grid definition :
<Grid x:Name="CurrentToolGrid" Background="#FFDEDEDE" Grid.Row="1" Height="Auto">
[... some controls that extends the grid's height ...]
</Grid>
Why the height of the CurrentToolGrid is always 0 ?
Thanks for helping me :)

Answer 1

Please refer to following code, I use TranslateTransform instead of MaxWidth, it make scense for Slide scenario.The key to impl this is StoryBoard should define in resource, then storyboard can find the specify control which binding in doubleanimation.
<Window x:Class="SlideUpWPFTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
x:Name="Window"
Title="MainWindow"
Width="640"
Height="480">
<Window.Resources>
<Storyboard x:Key="sb1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="grdContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="{Binding ElementName=grdContent, Path=ActualWidth}" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="sb2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="grdContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="{Binding ElementName=grdContent, Path=ActualWidth}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="EditMode" Storyboard="{StaticResource sb1}" />
<VisualState x:Name="SelectionMode" Storyboard="{StaticResource sb2}" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Content="Enter Edit Mode">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="EditMode" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="Enter Selected Mode">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="SelectionMode" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<Grid x:Name="grdContent"
Grid.Row="1"
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Grid.RenderTransform>
<!-- some content -->
<Rectangle Height="65" Fill="LightBlue" />
</Grid>
</Grid>
</Window>