Windows Store App 控件動畫

在開發Windows應用商店應用時，開發工具中已經封裝了大量的控件供開發人員使用，而其中有一部分控件，例如FlipView、ToolTip、ListView以及SemanticZoom等控件中已經默認集成了內置的動畫，這種集成在控件中的動畫被稱爲控件動畫，開發人員可根據不一樣的應用場景，選擇具備動畫效果的控件來知足對特定動畫的使用須要，從而爲用戶提供良好的操做體驗。例如，當應用從網絡獲取數據時，爲避免頁面長時間等待所形成的界面停頓給用戶形成誤解，能夠在頁面中使用不肯定進度環來形象的告知用戶，此時應用程序正在運行當中，而不肯定進度環控件就是一個典型的內置了動畫效果的控件。

在控件中內置動畫能夠爲經常使用的控件提供更好的用戶體驗，因爲在本章前面的第五章中已經對大部分的經常使用控件進行了詳細的講解，其中就包括了內置有動畫效果的控件，因此在本小節中將不對前面所講述過的控件進行重複的介紹。僅以具備典型特徵的FlipView控件爲例來講明控件動畫的含義。

FlipView控件能夠實現交替顯示所包含的界面元素，並在交替顯示的過程當中提供過分動畫效果，而最多見的狀況是使用FlipView控件來展現一組圖片就像播放一組幻燈片那樣，用戶能夠經過單擊FlipView自帶的切換視圖按鈕或使用手勢左右滑動屏幕來切換其中所展現的每個圖片。下面就來經過一個示例演示如何使用FlipView控件實現交替播放圖片的動畫效果。

在Visual Studio 2012中新建一個Windows應用商店的空白應用程序項目，並命名爲FlipViewApp，在項目的Assets文件夾下添加3個名爲「Flower.jpg」、「Mountain.jpg」、「Car.jpg」的圖片文件，接着雙擊打開MainPage.xaml文件，在Grid元素中添加以下代碼。

<!-- FlipView控件-->

<FlipView>

    <Image Source="Assets/Flower.jpg"/>

    <Image Source="Assets/Mountain.jpg"/>

    <Image Source="Assets/Car.jpg"/>

</FlipView>

在上面的代碼中，添加了一個用於展現圖片的FlipView控件，而後向FlipView控件中添加3個Image控件並經過設置這些控件的Source屬性指定圖片的路徑，這樣將能夠經過FlipView控件展現3個Image控件中的圖片。

按下F5運行程序，界面顯示效果如圖10-1所示。

 

圖10-1 FlipView控件的交替播放動畫效果

經過以上示例，讀者會發現FlipView控件動畫加強了用戶與控件的交互，用戶能夠經過點擊圖片左右兩側的切換視圖按鈕，來欣賞本身感興趣的圖片。在圖片交替播放的過程當中，產生的動畫效果天然流暢，給用戶帶來了良好的操做體驗。