Animating width and height of a template

590 Views Asked by At

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.

0

There are 0 best solutions below