CODEWITHSUNDEEP
wpfanimation
nabulke
nabulke

Reputation: 11275

How to use animation to change size of grid?

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?

Upvotes: 3

Views: 12391

Answers (5)

Justin XL
Justin XL

Reputation: 39006

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.

Upvotes: 2

7heViking
7heViking

Reputation: 7587

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.

Upvotes: 1

Rachel
Rachel

Reputation: 132618

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.

Upvotes: 1

GameAlchemist
GameAlchemist

Reputation: 19294

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

Upvotes: 0

chaosr
chaosr

Reputation: 494

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" />

Upvotes: 0

Related Questions