How to use animation to change size of grid?

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?

Solution 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.

Solution 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.

Solution 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.

Comments

[nabulke]

Hmm, could be the content of a viewbox stretches automatically to viewbox width/height, so a ScaleTransform doesn't work at all?

[GameAlchemist]

yes this is the kind of thing i m suggesting. Another idea would be to put ViewBox in a Border, and Scale the LayoutTransform, while the ViewBoxes would stretch to fill the border. Would avoid you to change width AND height of your ViewBoxes.

[nabulke]

DoubleAnimationUsingKeyFrames gives an error TargetName property cannot be set on a Style Setter.

[nabulke]

I tried animating the grid at first. But it didn't work too (no scaling). I'll try your suggestion to use a RenderTransform in combination with animating the grid.

[nabulke]

After applying your sample code to a surrounding Border element instead of the viewbox, it worked! Last issue I got is that the enlarged contents are rendered behind the surrounding visual elements. So I got to find out how to change Z-order. Thanks for your help.