How to use animation to change size of grid? - wpf

Question

I would like to enlarge (i.e. ScaleTransform) a whole grid depending on a property of my custom class.
My Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="0">
<TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding BoxId}" />
</Viewbox>
<Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="1" >
<TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding ProdNr}" />
</Viewbox>
</Grid>
This is the style I used. The problem is, there is no scaling to be seen at all. I tested the code with another animation (changing the background color) which worked fine.
<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsReadyToUnload}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX" To="2" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" To="2" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Could you give me any hints on how to achieve the correct scaling behavior?

Answer 1

Try attaching this to your ViewBox.
<Viewbox x:Name="viewbox" RenderTransformOrigin="0.5,0.5" ...>
<Viewbox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
</TransformGroup>
</Viewbox.RenderTransform>
Also try changing your animation to this, name your first ViewBox viewbox.
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="2"/>
</DoubleAnimationUsingKeyFrames>
Sorry, didn't see that you are using LayoutTransform. You should use RenderTransform instead, try changing the Setter Property as well as the Storyboard.TargetProperty to RenderTransform and it should work.
<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Also if you want to keep the LayoutTransform you can try changing your Grid to a Canvas, that might work too.

Answer 2

Your Grid is defining the space your ViewBoxes are allowed to occupy, so you should animate your Grid's properties, not your ViewBoxes.
You can either animate it's Height/Width, or apply a ScaleTransform to it.
Also, a LayoutTransform gets applied before rendering, while a RenderTransform gets applied afterwards. You might want to try using a RenderTransform instead of a Layout one with your existing code to see if it will all your ViewBoxes to expand outside of their allowed area.

Answer 3

I have done something similair to you this way (done in the code behind on a mouse over event):
DoubleAnimation animation = new DoubleAnimation();
animation.From = MenuBorder.Width;
animation.To = 170;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(350));
MenuBorder.BeginAnimation(WidthProperty, animation);
Here i have a grid with a border inside. The grids with is set to automatic. Therefore it looks like it is the grid I am animating but it is really the border inside the grid I am animating.

Answer 4

You should add the Type to the animation:
<DoubleAnimation Storyboard.TargetProperty="(Grid.LayoutTransform).(ScaleTransform.ScaleX)" To="2" Duration="0:0:0.5" />
I would set the value of ScaleX explicitly at the control:
<ScaleTransform ScaleX="1" />

Answer 5

I think what you are trying to achieve is to change the width/height of the ViewBox, and then the content will Scale accordingly.