How can I animate the width and height of a template in XAML? For example in the code below,
<Style x:Key="myStyle" TargetType="{x:ListItem}">
<Grid x:Name="container">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TouchEnter">
<ei:GoToStateAction StateName="Visible"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<VisualState x:Name="Visible">
<VisualState.Storyboard>
<Storyboard Duration="0:0:1">
<DoubleAnimation Storyboard.TargetProperty="Width" From="200" To="400" Storyboard.TargetName="container"/>
<DoubleAnimation Storyboard.TargetProperty="Height" From="200" To="400" Storyboard.TargetName="container"/>
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<!-- Other ui elements -->
</Grid>
</Style>
Can I, instead of animating the size of the 'container' grid, animate the size of the whole control, i.e. the control which this style is applied to? Since the current approach the size of the container does not change, which results in clipping the contents.
Thanks in advance.