使用WPF技術類比手機介面

標籤：for   運行程式   通過   資料   net   相關   現在   ast   系統   

原文:使用WPF技術類比手機介面

1. 前言
WPF（Windows Presentation Foundation），即“Windows呈現基礎”，它的目的非常明確，就是用來把資料“顯示”給使用者看的（說白了就是用來做UI的）。接下來將會介紹一個小項目，用WPF來實現類比手機介面設計。

2. 實現的功能
本項目類比手機介面，實現了如下幾個功能：

• 滑動解鎖
• 頂部狀態列顯示
• 查看系統時間
• 附有背景以及應用表徵圖的介面及切換
• 點擊日曆表徵圖跳轉到顯示日曆的介面
• 點擊鎖屏表徵圖進入滑動解鎖狀態

3. 效果展示

• 滑動解鎖、頂部狀態列顯示 、查看系統時間
  
  實現情況：
  1.實現了仿蘋果手機的滑動解鎖效果，同時滑動解鎖模組上面的文字具有動畫效果。當滑動解鎖箭頭滑動長度不足進度條的一半則箭頭回到起點，超過一半解鎖成功。
  2.在螢幕頂部顯示狀態列，在鎖定畫面實現顯示系統時間的功能，能夠即時顯示系統時間。

• 附有背景以及應用表徵圖的介面及切換
  
  實現情況：
  1.每個頁面必須設定一個背景圖片，每個表徵圖必須有自己的映像。
  2.點擊頁面下方的左右箭頭可以實現兩個介面之間的順序切換，點擊中間的home鍵則返回主介面。當介面切換時，具有仿蘋果手機的翻頁效果（淡入淡出的動畫效果），同時可以通過底下的圓點的顏色來判斷當前所在介面。

• 類比Icon的事件響應
  
  實現情況：
  1.部分應用表徵圖點擊事件，能夠跳轉到指定介面。點擊日曆則能夠顯示日曆。點擊鎖屏的應用表徵圖能夠進入滑動解鎖的狀態。

4. 部分功能程式碼分析

• App.xaml
  
  程式啟動的地方，其實是在程式的App.xaml檔案裡面：StartupUri=”Window1.xaml“這個就是程式的進入點，運行程式之後，我們就將window1顯示在了顯示屏上。

• Window1.xaml
  
  Page是我們真正的Ui，而NavigationWindow不過是為我們提供了一個架構，Page是附在上面的。因為VS2010不能直接建立NavigationWindow和Page相關的項目，所以我們要自己修改。首先建立一個WPF應用程式，在後台將繼承的Window類改為NavigationWindow類。然後在XAML中同樣將< window………標記改為NavigationWindow。NavigationWindow上不能有任何控制項。。。包括Grid等。。。。記住現在我們的UI是Page。建立Page，在上面隨便畫畫。然後將NavigationWindow.Source設為預設頁面(Default Page)。即將主表單的XAML裡NavigationWindow的Source屬性設為Page的名字，就OK了。另外Page之間的切換也是很簡單方便的。NavigationService.Navigate(newUri(“XXXXX.xaml”,UriKind.Relative)); XXXXX為Page的名字。

• Window1.xaml.cs
  
  為Page增加淡入淡出(Fade)效果：
  Window1繼承自NavigationWindow，那麼顯然抓住Navigating事件不放，做如下操作：
  　　取消當前Navigate請求，如果有當前頁的前提下。
  　　淡出當前頁，如果有當前頁的前提下。
  　　完成淡出過程後Navigate到目標頁。
  　　淡入目標頁。

• Slide.xaml
  
  用於顯示背景圖片。

• Slide.xaml.cs
  
  
  完成滑動解鎖功能。

完成顯示系統時間的功能。

• Slide.xaml
  
• RepeatBehavior：擷取或設定此時間軸的重複行為。Forever迴圈動畫
• DoubleAnimation：它在指定的期間內將動畫從指定的起始值繼續到指定的目標值。

• From，To：動畫開始到結束變化的值

• Slide.xaml.cs
  
  實現了滑動解鎖成功切換到主介面的功能。

• index.xaml
  
  
  實現頁面切換以及頁面底部顯示頁面切換狀態的圓點。

5. 下載連結
http://download.csdn.net/download/qq_22408539/10185109

使用WPF技術類比手機介面