为ListBox的SelectedItem添加动画（附源码）

概述在这篇文章中，我将演示如何使用Expression Blend在ListBox中对选定的项目添加一个翻转动画。 首先，首先创建一个Windows Phone 7应用程序项目，添加一个ListBox和一些ListBoxItems。 代码如下： <ListBox Height="200" VerticalAlignment="Top"> <ListBoxItem Content="ListB

在这篇文章中，我将演示如何使用Expression Blend在ListBox中对选定的项目添加一个翻转动画。

首先，首先创建一个windows Phone 7应用程序项目，添加一个ListBox和一些ListBoxItems。 代码如下：

<ListBox Height="200"  VerticalAlignment="top">    <ListBoxItem Content="ListBoxItem1"/>    <ListBoxItem Content="ListBoxItem2"/>    <ListBoxItem Content="ListBoxItem3"/>    <ListBoxItem Content="ListBoxItem4"/></ListBox>

复制代码

在这里我不得不感谢一直支持我的卤面网版主，是他让我提起兴趣写了这么一篇文章，再次感谢卤面网，一个非常不错的wp7开发论坛,后面我也将再次向大家发布几篇高质量文章，请大家到卤面上找我吧，呵呵

进入正题：

Expression Blend

下一步是在Expression Blend中打开项目。我们的最终目标是给选定的ListBoxItem加动画翻转效果。

创建一个样本ListBoxItem样式

我们要做的第一件事是检查ListBoxItem控件可用的VisualStates。要做到这一点，先选择一个项目，按鼠标右键并选择“编辑模板” - >“编辑副本“选项，就像接下来的屏幕截图一样：

可用的VisualStates

现在，您可以在ControlTemplate，通过添加/删除项或加入新动画在VisualStates中完全定制其外观。在不同的状态之间切换时，你还可以添加一些过渡和渐变动画控制。对有关visualstatemanager的信息，你可以看看MSDN相关文档。
在我们的例子中，我们可以选择的可用状态是：
1.SelectedUnfocused
2.Unselected
3。Selected

修改选定的VisualState
我们将修改选定状态。要做到这一点，只要按下鼠标左按钮在选定的状态和将出现一个新窗口：“Objecst and Timeline”
注：如果由于某种原因你没有看到“Objecst and Timeline”窗口，然后去blend菜单，并选择：窗口- > Objecst and Timeline。
我们将增加一个动画关键点

下一步，我们将添加翻转动画。

了解transforms
比方说，我们希望有一个绕X轴的翻转效果。
我们与动画开始之前，让我们先提供一些Silverlight中有关的元素绘制方式的知识。
您可以使用旋转，缩放，倾斜和移动（平移）等二维（2D）变换处理元素.
Silverlight提供以下的常见的2-D变换 *** 作：
Rotatetransform - 以指定的角度旋转元素。
Scaletransform - 以指定的ScaleX和ScaleY拉伸元素。
Skewtransform - 倾斜变换。
Translatetransform可 - 移动（转换）
你可以使用3-D效果，即使用所谓的“Perspective transforms”给任何UIElement。
PlaneProjection类用于创建对象的角度变换（3-D效果）。
注：视角转换不是个完整的3-D引擎，但是，它们可以被用来制造一定的3d效果
下面的插图演示了使用这些属性的效果。

翻转动画
接下来去“属性”窗口中，选择变换部分。下面是我们将添加翻转效果的地方。
因此，为了有一个绕X轴的翻转效果，你需要做的仅仅是改变旋转角度为360和确认CernerofRotationX和CenterOfRotationY设置为0.5（这是默认值，你不需要改变任何东西）。最后，在“Objecst and Timeline”窗口中选择播放按钮，你可以看到翻转动画：

<Style x:Key="ListBoxItemStyle1" targettype="ListBoxItem">    <Setter Property="Background" Value="transparent"/>    <Setter Property="borderThickness" Value="0"/>    <Setter Property="borderBrush" Value="transparent"/>    <Setter Property="padding" Value="0"/>    <Setter Property="HorizontalContentAlignment" Value="left"/>    <Setter Property="VerticalContentAlignment" Value="top"/>    <Setter Property="Template">        <Setter.Value>            <ControlTemplate targettype="ListBoxItem">                <border x:name="LayoutRoot" borderBrush="{TemplateBinding borderBrush}"                   borderThickness="{TemplateBinding borderThickness}"                   Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"                   VerticalAlignment="{TemplateBinding VerticalAlignment}">                    <visualstatemanager.VisualStateGroups>                        <VisualStateGroup x:name="CommonStates">                            <VisualState x:name="normal"/>                            <VisualState x:name="MouSEOver"/>                            <VisualState x:name="Disabled">                                <Storyboard>                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.Targetname="LayoutRoot">                                        <discreteObjectKeyFrame KeyTime="0" Value="{StaticResource transparentBrush}"/>                                    </ObjectAnimationUsingKeyFrames>                                    <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.Targetname="ContentContainer"/>                                </Storyboard>                            </VisualState>                        </VisualStateGroup>                        <VisualStateGroup x:name="SelectionStates">                            <VisualState x:name="Unselected"/>                            <VisualState x:name="Selected">                                <Storyboard>                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.Targetname="ContentContainer">                                        <discreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>                                        <discreteObjectKeyFrame KeyTime="0:0:1">                                            <discreteObjectKeyFrame.Value>                                                <SolIDcolorBrush color="#FF1BA1E2"/>                                            </discreteObjectKeyFrame.Value>                                        </discreteObjectKeyFrame>                                    </ObjectAnimationUsingKeyFrames>                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.Targetname="ContentContainer">                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>                                    </DoubleAnimationUsingKeyFrames>                                </Storyboard>                            </VisualState>                        </VisualStateGroup>                    </visualstatemanager.VisualStateGroups>                    <ContentControl x:name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"                      Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"                      margin="{TemplateBinding padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">                        <ContentControl.Projection>                            <PlaneProjection/>                        </ContentControl.Projection>                    </ContentControl>                </border>            </ControlTemplate>        </Setter.Value>    </Setter></Style>

复制代码

为ListBox的ItemContainerStyle创建的样式，代码如下：

<ListBox x:name="List" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" FontSize="40"></ListBox>

复制代码

this.List.ItemsSource = new List<string> { "ListItem1","ListItem2","ListItem3","ListItem4" };

我希望，这些文章对大家有帮助的。完整的源代码可以在这里找到：

源代码请猛击这里

总结

以上是内存溢出为你收集整理的为ListBox的SelectedItem添加动画（附源码）全部内容，希望文章能够帮你解决为ListBox的SelectedItem添加动画（附源码）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。