WPF InvalidateMeasure not called during or after animation

Question

I have a custom ListBox whith the following ListBoxItem style. It contains a few animations to scale the ListBoxItem when the mouse hovers over it.

<Style x:Key="notesListBoxStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Grid x:Name="gridItem" 
                          Background="LemonChiffon" 
                          Height="100"
                          Width="100" 
                          RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}">
                    <Grid.RenderTransform>
                        <ScaleTransform ScaleX="1.0"
                                        ScaleY="1.0"/>
                    </Grid.RenderTransform>
                    <Grid.LayoutTransform>
                        <RotateTransform Angle="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1}, Converter={StaticResource listIndexConverter}, ConverterParameter='Rotate'}"/>
                    </Grid.LayoutTransform>
                    <Border BorderBrush="DarkGoldenrod" BorderThickness="2" Margin="2">
                        <ContentPresenter HorizontalAlignment="Stretch" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                          VerticalAlignment="Stretch"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
                        <BeginStoryboard Name="showItemStoryboard">
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetName="gridItem" 
                                                 Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                 From="1.0"
                                                 To="1.5" 
                                                 Duration="0:0:0.3"/>
                                <DoubleAnimation Storyboard.TargetName="gridItem" 
                                                 Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                 From="1.0"
                                                 To="1.5" 
                                                 Duration="0:0:0.3"/>
                                <DoubleAnimation Storyboard.TargetName="gridItem" 
                                                 Storyboard.TargetProperty="Width"
                                                 From="100"
                                                 To="400" 
                                                 Duration="0:0:0.3"/>
                                <DoubleAnimation Storyboard.TargetName="gridItem" 
                                                 Storyboard.TargetProperty="Height"
                                                 From="100"
                                                 To="200" 
                                                 Duration="0:0:0.3"/>
                                <DoubleAnimation Storyboard.TargetName="gridItem" 
                                                 Storyboard.TargetProperty="LayoutTransform.Angle"
                                                 To="0" 
                                                 Duration="0:0:0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
                        <StopStoryboard BeginStoryboardName="showItemStoryboard"/>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I have my own implementation of MeasureOverride for my ListBox which gets called and all is well, except that MeasureOverride is not called before the ListBoxItem is scaled, so it requests a much smaller size than is required.

I have tried calling InvalidateMeasure on my ListBox after the animation is completed but the MeasureOverride method is not fired. At the moment I am applying the animations on the Grid in my ControlTemplate, Is this what is causing MeasureOverride to not be called? How do I apply the same animations on the control itself?

Answer 1

Hi Anon,

RenderTransform modifies the appearance of the element but is applied after the layout pass is complete. That means using a RenderTransform does not incur a layout pass.

Instead, use LayoutTransform. It does affects measure...

Hope this helps,

Cheers, Anvaka