爲ListBox的SelectedItem添加動畫（附源碼）

在這篇文章中，我將演示如何使用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" };

我希望，這些文章對大家有幫助的。完整的源代碼可以在這裏找到：

源代碼請猛擊這裏