隨着微軟顏齡中文網cn.how-old.net的上線,她也順勢來到了3大移動平臺。git
用戶在微軟顏齡這一應用中選擇一張包含若干人臉的照片,就能夠經過雲計算獲得他們的性別和年齡。github
今天咱們就和你們分享一下開發windows phone 平臺的 微軟顏齡 中的經驗。windows
用Windows Phone的小夥伴也能夠掃描下面的二維碼來安裝體驗一下:api
微軟顏齡的技術來自必應和微軟研究院的Oxford項目。該項目包含大量面部、語言和視覺方面的服務。微軟顏齡 這款有趣的應用僅僅使用了其中人臉偵測的部分api。有興趣的小夥伴能夠訪問http://www.projectoxford.ai/來嘗試一下其餘api,或許結合上你的好點子,一個有趣的應用就會從你手中誕生。app
微軟顏齡windows phone版從開始開發到初版發佈只有短短几天時間,能作到這麼快的發佈,得益於Project Oxford優秀的SDK和例子程序,以及咱們在以前的CNBLOGS等UAP應用開發中的積累。async
在引用了Project Oxford的.Net SDK以後,咱們只要調用FileOpenPicker在應用中獲得用戶所選擇照片的Stream,就能夠經過SDK的api分析出照片中人臉的信息:佈局
/// <summary>this
/// Detects an image asynchronously.雲計算
/// </summary>spa
/// <param name="imageStream">The image stream.</param>
/// <param name="analyzesFaceLandmarks">If set to <c>true</c> [analyzes face landmarks].</param>
/// <param name="analyzesAge">If set to <c>true</c> [analyzes age].</param>
/// <param name="analyzesGender">If set to <c>true</c> [analyzes gender].</param>
/// <param name="analyzesHeadPose">If set to <c>true</c> [analyzes head pose].</param>
/// <returns>The detected faces.</returns>
public async Task<Face[]> DetectAsync(Stream imageStream, bool analyzesFaceLandmarks = false, bool analyzesAge = false, bool analyzesGender = false, bool analyzesHeadPose = false)
SDK的api自己能夠設置檢測包括人臉的總體位置,五官位置(analyzesFaceLandmarks),年齡(analyzesAge),性別(analyzesGender),甚至相對照片平面的三維角度(analyzesHeadPose),而微軟顏齡應用則只是利用了其中的年齡和性別信息。具體能夠查看SDK中的Face.cs文件,或是經過在API Sample上提交一張照片取得分析結果來查看。
在經過SDK的api取得必要的人臉信息以後,咱們就能夠通過一系列計算,將其展現在用戶的圖片之上了。這一過程在SDK的例子程序的UIHelper.cs文件中也有現成的,咱們能夠根據本身的需求對其進行自定義。好比在windows phone版微軟顏齡的第二版中,咱們就將性別替換爲相應圖標的路徑,而且增長了邊框顏色的屬性,使得男女在界面上區別更明顯:
原版:
第二版:
接下來咱們結合在以前的開發中積累的經驗與創新的思路,終於很快地將cn.how-old.net上的體驗在windows Phone平臺展示出來:
好比首頁的自帶圖片選擇控件,就是巧妙地控制了ScrollViewer與StackPanel的共同運做。經過設置ScrollViewer的HorizontalSnapPointsAlignment 及 HorizontalSnapPointsType屬性,使得在滑動的時候,Image元素能夠老是停在屏幕的正中,就像在瀏覽相冊同樣。
<ScrollViewer x:Name="sc" Grid.Row="1" Margin="0,20,0,0"
HorizontalScrollBarVisibility="Hidden"
HorizontalSnapPointsAlignment="Center"
HorizontalSnapPointsType="Mandatory"
VerticalAlignment="Top" ViewChanged="sc_ViewChanged"
HorizontalAlignment="Center" Width="780" Background="{ThemeResource BackgroundColor}">
<StackPanel Orientation="Horizontal" Height="260" HorizontalAlignment="Center">
<Image Source="Assets/Images/Left_Edge.png" Stretch="UniformToFill" Width="260"/>
<Image Source="Assets/Images/0.png" Stretch="UniformToFill" Width="260"/>
<Image Source="Assets/Images/1.png" Stretch="UniformToFill" Width="260"/>
…
<Image Source="Assets/Images/13.png" Stretch="UniformToFill" Width="260"/>
<Image Source="Assets/Images/14.png" Stretch="UniformToFill" Width="260"/>
<Image Source="Assets/Images/Right_Edge.jpg" Stretch="UniformToFill" Width="260"/>
</StackPanel>
</ScrollViewer>
然而ScrollViewer並不像ListView那樣有SelectedIndex屬性,那麼咱們如何知道用戶選擇的是哪張圖片呢?由於咱們設置了相同的Image元素寬度,而且ScrollViewer是3倍Image元素的寬度,加上Image元素序列首尾有單獨的首尾元素,因此簡單的計算一下index就能夠了:
private int idx = 0;
private void sc_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
idx = (int)(this.sc.HorizontalOffset / 260.0f);
}
另外一方面頁面佈局則是咱們的designer的設計與咱們在實現UI佈局的經驗的結合。咱們的頁面上有很多固定大小的元素,好比上面用來選擇自帶例子圖片的ScrollViewer控件。若是不作任何處理,在大屏手機上就會顯得比較小。因此咱們在這裏利用了Grid與Viewbox的組合:
<Grid x:Name="grid_Main" Opacity="0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Margin="10">
…title行
</StackPanel>
<Viewbox Grid.Row="1" Width="10000" HorizontalAlignment="Center" Margin="-5000,20">
…ScrollViewer等圖片選擇控件
</Viewbox>
<StackPanel Grid.Row="2" Orientation="Vertical" VerticalAlignment="Center" Margin="0,10">
…footer行
</StackPanel>
</Grid>
用Grid設置title和footer爲固定高度,而中間ScrollViewer等圖片選擇控件所佔據的空間能夠隨屏幕變化。加入Viewbox讓咱們固定大小的控件能夠在佈局中自動縮放而沒必要費心費力地經過代碼來調整:
Wxga: 1080p:
是否是很方便呢?
今天就先向你們分享這些心得,歡迎你們繼續關注和拍磚,讓咱們共同進步。
咱們的已經發布的應用和代碼能夠在下面找到:
Windows Phone Store App link:
http://www.windowsphone.com/zh-cn/store/app/博客園-uap/500f08f0-5be8-4723-aff9-a397beee52fc
Windows Store App link:
http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059
GitHub open source link:
https://github.com/MS-UAP/cnblogs-UAP
MSDN Sample Code:
https://code.msdn.microsoft.com/CNBlogs-Client-Universal-9c9692d1