转载

【Win10】开发中的新特性及原有的变更（二）

声明：本文内容适用于 Visual Studio 2015 RC 及 Windows 10 10069 SDK 环境下，若以后有任何变更，请以新的特性为准。

十一、x:Bind 中使用强制转换

这点是补充上一篇文章的，当时忘了写(-__-)b

场景：需要绑定显示某个纯色背景的控件的背景颜色RGB值（感觉挺绕口的）。

因为在传统的绑定里，由于是动态的，而且我们也能确保 Background 的类型为 SolidColorBrush 。

那么我们可以这么写绑定：

<Page  x:Class="Build2015XamlDemo.XBindDemo2"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:local="using:Build2015XamlDemo"  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  mc:Ignorable="d">  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">   <StackPanel>    <Border x:Name="brd"      Background="Red"      Width="100"      Height="100"/>    <Border BorderBrush="Green" BorderThickness="2">     <StackPanel>      <TextBlock Text="Binding 传统绑定" />      <TextBlock Text="{Binding ElementName=brd,Path=Background.Color.R}" />      <TextBlock Text="{Binding ElementName=brd,Path=Background.Color.G}" />      <TextBlock Text="{Binding ElementName=brd,Path=Background.Color.B}" />     </StackPanel>    </Border>   </StackPanel>  </Grid> </Page>

尽管控件的 Background 属性的类型是 Brush，但我们已经确保为 SolidColorBrush，因此在运行时，不会发生错误。

但是，在新的绑定 x:Bind 里这就没法编译通过了，因为 Brush 类并不存在 Color 属性，但是我们已经可以确保这里的 Background 一定是 SolidColorBrush 。在 x:Bind 里我们可以使用强制转换来完成这个功能。

<Page  x:Class="Build2015XamlDemo.XBindDemo2"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:local="using:Build2015XamlDemo"  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  mc:Ignorable="d">  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">   <StackPanel>    <Border x:Name="brd"      Background="Red"      Width="100"      Height="100"/>    <Border BorderBrush="Green" BorderThickness="2">     <StackPanel>      <TextBlock Text="Binding 传统绑定" />      <TextBlock Text="{Binding ElementName=brd,Path=Background.Color.R}" />      <TextBlock Text="{Binding ElementName=brd,Path=Background.Color.G}" />      <TextBlock Text="{Binding ElementName=brd,Path=Background.Color.B}" />     </StackPanel>    </Border>    <Border BorderBrush="Blue" BorderThickness="2">     <StackPanel>      <TextBlock Text="x:Bind 编译绑定" />      <TextBlock Text="{x:Bind Path=brd.Background.(SolidColorBrush.Color).R}" />      <TextBlock Text="{x:Bind Path=brd.Background.(SolidColorBrush.Color).G}" />      <TextBlock Text="{x:Bind Path=brd.Background.(SolidColorBrush.Color).B}" />     </StackPanel>    </Border>   </StackPanel>  </Grid> </Page>

PS：因为 x:Bind 里没有 ElementName 这个旧绑定的属性，但是 x:Bind 的上下文为 Page 或 UserControl，而控件是 Page 或 UserControl 的成员，因此 Path 改为上面的写法。

十二、根据不同设备类型加载不同的 View

在上一篇里，我们使用了一个自定义 StateTrigger 来实现在 Desktop 和 Mobile 下显示不同的文本。这对于根据设备类型适配是很有效的。当然，园子里的东邪独孤（老周）给出的这篇【Win 10应用开发】如何知道UAP在哪个平台上运行，使用后台代码来判断也是一个方法。

对于 View 里仅仅需要少量区别化的话，上面两种方法都是最理想的方案。但是，假如我们需要 Desktop 和 Mobile 下呈现完完全全不同的内容的话，上面的方法就显得难以应付了，维护起来也麻烦。因此，需要一种方案解决这种问题。而现在微软给出的方案就是类似于解决本地化的方法，使用特定名字的文件夹。

【Win10】开发中的新特性及原有的变更（二）

如上图，文件夹的名字需要以" DeviceFamily- "开头，并且以设备名称结尾，里面 View 的文件名必须跟文件夹外面对应的 View 的文件名一致（即这里同样是 MainPage）。

PS：目前已知的设备名称有： Desktop （代表桌面系统）、 Mobile （代表移动系统）、 Xbox （这个你懂的）、 Team （代表 Surface Hub，就是 Build 大会上那台 72 寸大家伙）。

由于目前官方文档还没出来，应该有更多的设备类型。（据说还有个 Holographic 和 IoT，不过目前情况无法测试嘛~~）

细心的你们可能发现，在上面的图片中文件夹里的 xaml 是没有后台文件的。在 Visual Studio 里创建文件选择这个就可以了：

【Win10】开发中的新特性及原有的变更（二）

那么创建出来的文件就会像我上面图片里的一样了。

十三、x:DeferLoadStrategy（延迟加载）

在 Web 开发中，比较常见的一个例子就是用户注册时，验证码只有在用户焦点落在输入验证码的文本框时才开始正式加载，而不是页面加载的时候就开始加载。

在 XAML 里我们以前可能比较常做的方案就是在页面里先预留一个 Image 控件，并且隐藏它，等到真正输入验证码时再设置 Image 控件的 Source。

而 x:DeferLoadStrategy 则再进一步，在需要的情况下再初始化控件。这就更加节约了内存加改善了效率了。

1、基本 Demo

XAML：

<Page x:Class="Build2015XamlDemo.XDeferLoadStrategyDemo"       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       xmlns:local="using:Build2015XamlDemo"       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"       mc:Ignorable="d">     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  <StackPanel HorizontalAlignment="Center"       VerticalAlignment="Center">      <Border Width="150"       Height="100"       Background="Red"       x:Name="brdDeferLoad"       x:DeferLoadStrategy="Lazy"></Border>      <Button Content="检查"       Click="BtnCheck_Click" />      <Button Content="加载"       Click="BtnLoad_Click" />  </StackPanel>     </Grid> </Page>

后台代码：

using System; using Windows.UI.Popups; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Build2015XamlDemo {  public sealed partial class XDeferLoadStrategyDemo : Page  {   public XDeferLoadStrategyDemo()   {    this.InitializeComponent();   }   private async void BtnCheck_Click(object sender, RoutedEventArgs e)   {    if (brdDeferLoad == null)    {     await new MessageDialog("还没加载").ShowAsync();    }    else    {     await new MessageDialog("已加载").ShowAsync();    }   }   private void BtnLoad_Click(object sender, RoutedEventArgs e)   {    this.FindName(nameof(brdDeferLoad));   }  } }

运行程序，然后点击检查按钮

【Win10】开发中的新特性及原有的变更（二）

点击加载按钮

【Win10】开发中的新特性及原有的变更（二）

PS：执行 this.FindName 方法，XAML 树将会检索给定名字的控件，如果还没初始化的话，就会初始化。

2、使用 StateTrigger 来确定需要加载的控件

XAML：

<Page x:Class="Build2015XamlDemo.XDeferLoadStrategyDemo2"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Build2015XamlDemo"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">   <VisualStateManager.VisualStateGroups>    <VisualStateGroup>     <VisualState x:Name="narrow">      <VisualState.StateTriggers>       <AdaptiveTrigger MinWindowWidth="600" />      </VisualState.StateTriggers>      <VisualState.Setters>       <Setter Target="brdLeft.Visibility"         Value="Visible" />      </VisualState.Setters>     </VisualState>     <VisualState x:Name="wide">      <VisualState.StateTriggers>       <AdaptiveTrigger MinWindowWidth="850" />      </VisualState.StateTriggers>      <VisualState.Storyboard>       <Storyboard>        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="brdRight"                  Storyboard.TargetProperty="Visibility">         <DiscreteObjectKeyFrame Value="Visible"               KeyTime="0" />        </ObjectAnimationUsingKeyFrames>       </Storyboard>      </VisualState.Storyboard>     </VisualState>    </VisualStateGroup>   </VisualStateManager.VisualStateGroups>   <Grid.ColumnDefinitions>    <ColumnDefinition Width="500" />    <ColumnDefinition Width="250" />    <ColumnDefinition Width="*" />   </Grid.ColumnDefinitions>   <Border Background="Red" />   <Border Background="Green"     x:Name="brdLeft"     Grid.Column="1"     x:DeferLoadStrategy="Lazy" />   <Border Background="Blue"     x:Name="brdRight"     Grid.Column="2"     x:DeferLoadStrategy="Lazy" />  </Grid> </Page>

效果：

【Win10】开发中的新特性及原有的变更（二）

可见，在使用 Setter 或者 Storyboard 的情况下，如果控件没加载，那么系统将会帮我们加载，不再需要在后台代码中调用 this.FindName 方法。

十四、InkCanvas 控件

这是一个新的控件，就像一个涂鸦画板一样。

测试代码：

XAML：

<Page x:Class="Build2015XamlDemo.InkCanvasDemo"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:local="using:Build2015XamlDemo"  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  mc:Ignorable="d">     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid.ColumnDefinitions>   <ColumnDefinition Width="Auto" />   <ColumnDefinition />    </Grid.ColumnDefinitions>    <StackPanel Grid.Column="0">   <ComboBox x:Name="cmb"        SelectionChanged="ComboBox_SelectionChanged">       <ComboBoxItem IsSelected="True">Red</ComboBoxItem>       <ComboBoxItem>Green</ComboBoxItem>   </ComboBox>    </StackPanel>    <Grid Grid.Column="1"     Background="DarkGray">   <Border Background="White"      Margin="20">       <InkCanvas x:Name="canvas" />   </Border>    </Grid>     </Grid> </Page>

后台代码：

using Windows.UI; using Windows.UI.Xaml.Controls; // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238 namespace Build2015XamlDemo {  /// <summary>  /// An empty page that can be used on its own or navigated to within a Frame.  /// </summary>  public sealed partial class InkCanvasDemo : Page  {   public InkCanvasDemo()   {    this.InitializeComponent();    UpdateInkCanvas();   }   private void UpdateInkCanvas()   {    var colorStr = ((ComboBoxItem)(cmb.SelectedItem)).Content.ToString();    Color color;    if (colorStr == "Red")    {     color = Colors.Red;    }    if (colorStr == "Green")    {     color = Colors.Green;    }    // 必须设置，否则无法响应设备输入。    canvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | Windows.UI.Core.CoreInputDeviceTypes.Pen | Windows.UI.Core.CoreInputDeviceTypes.Touch;    var attributes = canvas.InkPresenter.CopyDefaultDrawingAttributes();    attributes.Color = color;    canvas.InkPresenter.UpdateDefaultDrawingAttributes(attributes);   }   private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)   {    if (canvas != null)    {     UpdateInkCanvas();    }   }  } }