I have 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 IsActive property of the user control's view model class is set to true, the zoomIn animation is run. This animation is supposed to zoom in the grid with it's content inside. When I trigger the animation, I get the following error message:
Cannot resolve all property references in the property path 'ScaleTransform.ScaleX'. Verify that applicable objects support the properties.
What is wrong with my animation? How should I implement the described zoom in animation? Thanks.
I got it:
<ScaleTransform> should have <ScaleTransform ScaleX="0.5" ScaleY="0.5" /> properties
set in order to make the zoom start from 50%, for example. <DoubleAnimation> the value of the Storyboard.TargetProperty property
should be changed from "ScaleTransform.ScaleX" to "RenderTransform.ScaleX".<DoubleAnimation> the value of the Storyboard.TargetProperty property
should be changed from "ScaleTransform.ScaleY" to "RenderTransform.ScaleY".If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With