UWP?UWP! - Build 2015有些啥?(2)

UWP?UWP! - Build 2015有些啥？

Build 2015圓滿落幕了，不知大家有多少人刷夜看了直播呢？不管怎么說，想必各位都很好奇在這場微軟開發者盛宴上，Microsoft又發布了什么令人驚嘆的消息吧。筆者略微整理了一些與UWP相關的內容，拋磚引玉，並不全面，希望讀者多多指正。

(文章中涉及的圖片均來源於Build)

4. UWP開發框架的新特性

作為全新的應用類型，UWP自然有了全新的開發框架。用C#+XAML來說，基本保持了UAP的開發模式，但是新增了諸多特性。在這里簡單為大家列舉一二。

新加入的通用控件

在UWP中，由於沒有平台區別，幾乎所有控件都成為跨平台控件了，而非UAP下不同平台的使用限制。其中值得注意的一些新控件有：

• Pivot：是的，就是大家耳熟能詳的Pivot，現在可以在所有平台使用了。區別在於在大屏環境下其行為、展現方式會有略微不同。
  
  
• AutoSuggestBox：有自動補齊功能的搜索框，將替代傳統的SearchBox。
• UniversalMaps：跨平台的地圖控件，再也不用為不同平台的定位應用設計不同的地圖展示邏輯了。
• SplitView： 提供可伸縮的導航欄用於導航容器中的頁面，作為一個全新的控件，其具有極高的頁面適配性，利用下文介紹的自適配技術可以輕松地讓其適配復雜的頁面。
  
• InkCanvas：新封裝的控件以支持用戶筆記，其應用場景還是很多的，可以省去在這些情況下開發者的不少精力了，畢竟實現一個用戶友好的圖畫版並不輕松。

自適配輔助

由於UWP將面對復雜多變的應用分辨率，曾經為一些固定分辨率設計頁面的日子一去不復返。從這點來說，UWP也更靠近網頁設計一些。可是對於html，我們有relative、有流式布局；XAML呢，總不能老是把自適配實現在csharp代碼里吧？別急，XAML足夠做絕大部分的工作。且看：

VisualStateManager

這是XAML的一個元素，其功能，一言以蔽之，就是管理在不同條件下頁面各元素的屬性以及其切換時過渡方式。我們先看下面的一段代碼：

<VisualStateGroup x:Name="WindowSizeStates">
    <VisualState x:Name="WideState">
        <VisualState.Setters>
            <Setter Target="splitView.DisplayMode" Value="Inline" />
        </VisualState.Setters>
        <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="720" />
        </VisualState.StateTriggers>
    </VisualState>
    <VisualState x:Name="NarrowState">
        <VisualState.Setters>
            <Setter Target="splitView.DisplayMode" Value="Overlay" />
        </VisualState.Setters>
        <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="0" />
        </VisualState.StateTriggers>
    </VisualState>
</VisualStateGroup>

上述代碼的作用是當頁面寬度大於720時，將splitView.DisplayMode屬性調節為inline；否則為Overlay。其語法和規則都相當簡單，只需在不同的VisualState中定義對應的Trigger和Setter即可，如果有需要還可以定義不同State間的切換動畫。 

其中值得注意的是，Trigger並非只能使用框架給出的指定觸發器這么簡單，它是可以自定義的，再看下面這個例子：

public class InputTypeTrigger : StateTriggerBase
{
        private FrameworkElement _targetElement;
        private PointerDeviceType _lastPointerType, _triggerPointerType;

        public FrameworkElement TargetElement
        {
            get { return _targetElement; }
            set
            {
                _targetElement = value;
                _targetElement.AddHandler(FrameworkElement.PointerPressedEvent, new PointerEventHandler(_targetElement_PointerPressed), true);
            }
        }
        public PointerDeviceType PointerType
        {
            get { return _triggerPointerType; }
            set { _triggerPointerType = value; }
        }

        private void _targetElement_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            _lastPointerType = e.Pointer.PointerDeviceType;
            SetActive(_triggerPointerType == _lastPointerType);
        } 
}

其自定義了Trigger，用於判斷某個元素的按下類型是鼠標/手指，並在滿足條件時觸發。我們再看看它在XAML里的用法：

<VisualStateGroup x:Name="InputTypeStates">
    <VisualState>
        <VisualState.StateTriggers>
            <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Touch" />
            <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Pen" />
        </VisualState.StateTriggers>
        <VisualState.Setters>
            <Setter Target="GoToTopButton.Visibility" Value="Visible" />
        </VisualState.Setters>
    </VisualState>
</VisualStateGroup>

如果使用熟練，其能發揮的作用異常強大。

RelativePanel

可能有讀者會疑惑了：即使有很強大、可自定義的Trigger，我能做的也不就只有定制一些屬性么？如果我想根據具體情況調節位置、尺寸，該怎么辦，還是只能訴諸代碼么？當然不是：RelativePanel將提供你想要的：
有想過html的流式布局么，有考慮過float一類的css屬性在xaml中實現么？RelativePanel正是支持他們的容器。請看下面一段代碼：(省略該控件所特化的屬性)

<RelativePanel>
    <Image x:Name="img" …/>
    <TextBlock x:Name="title" RelativePanel.RightOf="img" RelativePanel.AlignTopWith="img" …/>
    <TextBlock x:Name="authors" RelativePanel.RightOf="img" RelativePanel.Below="title" …/>
    <TextBlock x:Name="summary" RelativePanel.RightOf="img" RelativePanel.Below="authors" …/>
    <Button Content="Download" RelativePanel.RightOf="img" RelativePanel.AlignBottomWithPanel="True" …/>
</RelativePanel>

其實際展示效果如下：

看到了其中類似於Rightof/below的屬性了嗎？這種相對布局方式正式RelativePanel的精髓所在，利用它可以實現零代碼達到頁面適配，而精通流式布局的網頁設計者們更完全可以僅僅利用其就使自己的頁面達到網頁的適配程度。當然，配合VisualState的屬性設置，它們能帶來極靈活的頁面行為，足夠滿足大部分頁面布局需求，只有少部分相當定制化的頁面行為需要書寫代碼了。

已經進行過設備適配的控件們

對於大家日常使用的控件，在不同設備上運行時也有不同的效果，它們是微軟專門設計以適配不同操控類型、屏幕大小設備，從這一點來說，可以省去頁面設計者不小功夫。如：

• MenuFlyout控件在鼠標激發和手指激發時的菜單間距並不相同，以給兩種操控方式提供最好的用戶體驗。
• Pivot在不同尺寸屏幕下的選定標簽位置有所區別，以方便單手/雙手觸控。

全新的綁定方式：編譯時綁定

新的XAML提供了一種不一樣的綁定方式：編譯時綁定({x:bind})。其綁定關系將會在編譯時得到檢查，運行時僅存在他們之間的數據依賴。正因如此，這種綁定在運行時的效率得到了極大的提升。從Build展示的數據來看，其綁定效率、屬性修改響應效率以及資源節省度都有了數倍提升。

<DataTemplate x:DataType="model:FileItem">
　　<Grid Width="200" Height="80">
　　　　<TextBlock Text="{x:Bind DisplayName}" />
　　　　<TextBlock Text="{x:Bind prettyDate}" />
　　</Grid>
</DataTemplate>

盡管編譯時綁定有不能再運行時動態修改、不能綁定style等缺點，但其效率表明這將是數據綁定模式在未來的發展方向。各位拭目以待吧~

界面響應速度全面提升

既然要做UWP了，如果效率本身不夠過硬，怎么適應各種多變的部署平台？微軟在這方面也是煞費苦心，大幅提升其運行效率和穩定度，以求用UWP替代傳統的pe文件作為微軟產品主力軍。可以在Build展示里窺見UWP風格的Office，可見未來的Office甚至VS都可能是UWP的囊中之物。那么究竟有什么改動呢？

• XAML元素的惰性加載特性：想必大家都聽說過一些函數式編程語言中惰性求值的概念，這里這種概念移植到了界面渲染上。惰性載入可以保證更快的程序啟動時間和用戶在一般情況下操作的響應速度。
• 文字渲染效率提升：UWP渲染文字的效率提升了50%
• 綁定加速：上文已經講過，此處並不贅述。
• 新增加的Visual Layer訪問API將允許開發者碰觸一些更底層的渲染機制，從而在實現動畫、變換等操作時擁有更高的效率。

5. 能不能更給力一點？

想獲得更多有關Build的展示情況，請訪問
http://channel9.msdn.com/events/build/2015?Media=true&wt.mc_id=build_hp
查看更多展示的視頻和ppt吧。