Silverlight 中的小动画答案

【问题标题】：Small animations in SilverlightSilverlight 中的小动画
【发布时间】：2010-10-08 14:30:18
【问题描述】：

我制作了一个简单的故事板，它采用特定的 ListBoxItem 并让它增长 1.3 倍。我想将此动画添加到我动态创建的每个 ListBoxItem 中，以便在鼠标悬停时激活它，但情节提要似乎被硬编码为第一个项目：

    <Storyboard x:Name="ListItem_MouseEntered">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RecentNews" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RecentNews" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

我应该如何复制这个故事板并将目标设置为每个列表框项？

干杯

尼克

PS，我相信我在动画中有一些错误，别担心，这不是我的问题的一部分 :-)

【问题讨论】：

标签： silverlight animation

【解决方案1】：

您可以在 UserControl 的 Resources 部分中为 ListBoxItem 定义 ControlTemplate，如下所示：

<ControlTemplate x:Key="LIT" TargetType="ListBoxItem">
    <Border x:Name="MainBorder" BorderBrush="Red" BorderThickness="2" Background="Yellow" MouseEnter="Border_MouseEnter">
        <Border.Resources>
            <Storyboard x:Name="ItemStory">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ItemTransform" Storyboard.TargetProperty="ScaleX">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ItemTransform" Storyboard.TargetProperty="ScaleY">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.3"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Border.Resources>
        <Border.RenderTransform>
            <ScaleTransform x:Name="ItemTransform" />
        </Border.RenderTransform>
        <TextBlock Text="{TemplateBinding Content}" />
    </Border>
</ControlTemplate>

处理 MouseEnter 事件：

private void Border_MouseEnter(object sender, MouseEventArgs e)
{
    Border itemBorder = (Border)sender;
    Storyboard itemStory = (Storyboard)itemBorder.FindName("ItemStory");

    itemStory.Begin();
}

并在 XAML 中像这样使用它：

<ListBox x:Name="MyList">
    <ListBox.Items>
        <ListBoxItem Content="Toto 1" Template="{StaticResource LIT}" />
    </ListBox.Items>
</ListBox>

或者像这样在 C# 中：

MyList.Items.Add(new ListBoxItem()
{
    Content="Toto 2",
    Template = (ControlTemplate)Resources["LIT"]
});

【讨论】：

太好了，非常感谢。我不知道 ControlTemplate 机制，这似乎正是我所需要的。很好的例子！ :-) 再次感谢 :-)

【解决方案2】：

如果您使用可视状态管理器，您可以将其应用于所有类型：

This 展示了如何做到这一点。

【讨论】：

非常感谢，我不知道 Visual State Manager。我一定会读一读，听起来很有用。 :-)