Databases
StackOverflow2013
Postsdbo
POAnimation Issue with size changing elements
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimation Issue with size changing elements
    text
    copied!<p>So...</p> <p>I've got a listview containing several flag images 20 px apart(as spec'ed) . When the user selects a flag, the flag needs to 'get bigger by 2x' to show that it is selected . So I tried the following:</p> <p>I edited the SelectedUnfocused state on the listview. At first, I just created a scaletransform to zoom the flag. but the problem is that the zoom factor makes the flag overlap its neighbour. So I animated the width of the container to grow by a few pixels so that it can accomodate the size change, however this results in a jagger on quick selection changes.So I thought it is caused by the stackpanel inside the listview not being able to re-measure and layout the containers fast enough. I created a sizechanged event to invalidate and re-layout but no success. Any ideas on what I could try to force the itemspanel to continually re-measure during an animation?</p> <p>A video of the behaviour <a href="http://sdrv.ms/121Meil" rel="nofollow">here</a></p> <p>Note thata the size of the image grows and overlaps a neighbour. only after the animation finishes do they re-layout</p> <pre><code>&lt;VisualState x:Name="SelectedUnfocused"&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="OuterContainer"&gt; &lt;EasingDoubleKeyFrame KeyTime="0" Value="108"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="150"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="OuterContainer"&gt; &lt;EasingDoubleKeyFrame KeyTime="0" Value="100"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="400"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; </code></pre> <p>(I know that it is not traditional metro design and such but I'm following a spec)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload