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?
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
精彩评论