WPF: Zoom User Control Animation

Question

I created a user control:

<UserControl ...> <Grid DataContext="{Binding UserContrlViewModel> <Grid Width="200" Height="100" RenderTransformOrigin="0.5,0.5"> <Grid.Resources> <Storyboard x:Key="zoomIn"> <DoubleAnimation Storyboard.TargetProperty="ScaleTransform.ScaleX" From="0" To="1" Duration="0:0:1" /> <DoubleAnimation Storyboard.TargetProperty="ScaleTransform.ScaleY" From="0" To="1" Duration="0:0:1" /> </Storyboard> </Grid.Resources> <Grid.RenderTransform> <ScaleTransform /> </Grid.RenderTransform> <Grid.Style> <Style TargetType="Grid"> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsActive}" Value="True"> <DataTrigger.EnterActions> <BeginStoryboard> <StaticResource ResourceKey="zoomIn" /> </BeginStoryboard> </DataTrigger.EnterActions> </DataTrigger> </Style.Triggers> </Style> </Grid.Style> <TextBlock Width="60" Text="Input" /> <TextBox Width="80" Margin="80,0,0,0" /> </Grid> ... </Grid> </UserControl> 

What I want to achieve is that when the IsActive property of the user view control model class is true , the zoomIn animation zoomIn . It is assumed that this animation will increase the grid with content inside. When I start the animation, I get the following error message:

It is not possible to resolve all property references in the "ScaleTransform.ScaleX" property path. Verify that applicable objects support properties.

What is wrong with my animation? How should I implement the described increase in animation? Thank you

Answer 1

I understood:

• <ScaleTransform> must have the properties <ScaleTransform ScaleX="0.5" ScaleY="0.5" /> for example, in order to zoom in from 50%.
• In the first <DoubleAnimation> value of the Storyboard.TargetProperty property should be changed from "ScaleTransform.ScaleX" to "RenderTransform.ScaleX" .
• In the second <DoubleAnimation> value of the Storyboard.TargetProperty property should be changed from "ScaleTransform.ScaleY" to "RenderTransform.ScaleY" .