Question

我想要一种显示文本字符串列表的方法，如下所示：

enter image description here

如果您使用的是Office 2010，则会在新的初始屏幕中使用该效果。

我想要的是选择最后一项并且上面的所有项目都褪色，这样我们就能达到类似的效果。随着项目的添加，新项目被选中，前一项目向上移动并消失。

有什么想法吗？

Answer 1

您可以使用ListBox来实现您的目标。

在Silverlight 4中，ListBoxItem样式中有一组新的状态LayoutStates。

它有三种视觉状态，AfterLoaded，BeforeUnloaded和BeforeLoaded。

正如名称所暗示的那样，BeforeLoaded状态恰好发生在 ListBoxItem被添加到ListBox并且发生AfterLoaded状态添加ListBoxItem之后。在删除ListBoxItem之前发生BeforeUnloaded。

在您的情况下，当您尝试添加新行时，需要为Opacity状态中的淡入（TranslateY和BeforeLoaded）设置动画。当您尝试删除顶行时，文本，并在BeforeUnloaded状态中为淡出设置动画。以下是一个简单的例子。

<Style x:Key="AnimatedListBoxItemStyle" TargetType="ListBoxItem">
...
<VisualStateGroup x:Name="LayoutStates">
    <VisualStateGroup.Transitions>
        <VisualTransition GeneratedDuration="0:0:0.4" To="BeforeUnloaded">
            <Storyboard>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="LayoutRoot">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-37" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </VisualTransition>
        <VisualTransition GeneratedDuration="0:0:1" />
    </VisualStateGroup.Transitions>
    <VisualState x:Name="BeforeUnloaded" />
    <VisualState x:Name="BeforeLoaded">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="37" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="AfterLoaded" />
</VisualStateGroup>

因为删除第一行后，其余的ListBoxItems会立即跳起来填充空白区域。要以流畅的方式进行此转换，您可以使用正常ListBox覆盖ItemsPanel的{{1}}，并附加FluidMoveBehavior。记得将StackPanel设置为AppliesTo。这意味着动画将发生在Children的{{1}}个孩子身上。

ListBox

希望这会有所帮助。：）

<强>更新

您使用ListBoxItems创建淡入淡出。

enter image description here

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
        <StackPanel>
            <i:Interaction.Behaviors>
                <ei:FluidMoveBehavior AppliesTo="Children"/>
            </i:Interaction.Behaviors>
        </StackPanel>
    </ItemsPanelTemplate>

Silverlight 4“清单”淡出效果

1 个答案: