array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 【Win10】UAP/UWP/通用 开发之 x:Bind - 爱码网

[Some information relates to pre-released product which may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.]

[涉及某信息预发布的版本可能在它的商业版本大幅修改。对于这里提供的信息,微软不作任何担保。]

在MSDN中,Windows 10 SDK 的东东上,都会声明这一句话,我也引过来吧啦,他不担保,我也保不了。

 

正文

  在Win10 UWP开发中,新加入了一个关键字 x:Bind. 它好在哪?为什么要用他。

  build大会视频资源:http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10-preview?prid=ch9courselink

一、x:Bind 好在哪?

【Win10】UAP/UWP/通用 开发之 x:Bind

【Win10】UAP/UWP/通用 开发之 x:Bind

从这两张画可以看出来,x:Bind的性能要优于Binding。为什么?

这个绑定被称为 "compiled data bindings", 从字面上看 编译的数据绑定。

我们以前常用的Binding,是运行时(Run Time)的绑定,而这个 在编译时(Build Time)就已经决定。

好处就是效率高,速度快,绑定的错误在编译时就会提示出来,方便调试。

二、x:Bind

x:Bind 主要的几点:

1. 强类型

2.上下文为page 或 UserControl

3.绑定的默认Mode为OneTime

我们用Binding的时候,有的时候可以不用去考虑类型,因为有好多默认的转换(如,TypeConverter),但是使用x:Bind时,如果类型不匹配编译时,就会出错。

例如:

<CheckBox IsChecked="{x:Bind}" />

我们把当前的上下文绑定到 IsChecked(bool?) 上

Invalid binding path '' : Cannot bind type 'BindDemo.MainPage' to 'System.Nullable(System.Boolean)' without a converter

【Win10】UAP/UWP/通用 开发之 x:Bind

结果就会这样子。当然,如果你绑到String类型的属性上是不会错的,他会帮你ToString()地。

而绑定的上下文,现在看来就是当前的类的本身了,就是继承自Page和UserControl的本身。

对于在初学的同学,再也不怕找不到对象了,也不用设置DataContext。

对于熟悉MVVM的同学,要用x:Bind 就要把ViewModel写到CodeBehand中一个,真心怪怪的说,好多框架可能也得调整啦。

三、小试牛刀

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="{x:Bind}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center" />
    </Grid>

CodeBehand不做任何代码啦.

结果:【Win10】UAP/UWP/通用 开发之 x:Bind

 

从这结果也可以看出来,他的上下文,是当前的这个页。

咱们在CodeBehand里加一Title的属性。

    public sealed partial class MainPage : Page
    {
        public string Title { get; set; } = "Bind Demo";

        public MainPage()
        {
            this.InitializeComponent();
        }
    }
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="{x:Bind Title}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center" />
    </Grid>

【Win10】UAP/UWP/通用 开发之 x:Bind

这里,熟悉MVVM的人就要想了,我们怎么绑定ViewModel呢。其实就是把ViewModel的对象,写在CodeBehand里一个就好啦。

    public class MainViewModel
    {
        public string Name { get; set; } = "Bind";

        public string Content { get; set; } = "Demo";
    }
    public sealed partial class MainPage : Page
    {
        public string Title { get; set; } = "Bind Demo";

        public MainViewModel ViewModel { get; set; } = new MainViewModel();

        public MainPage()
        {
            this.InitializeComponent();
        }
    }
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center">
            <TextBlock Text="{x:Bind Title}" />
            <TextBlock Text="{x:Bind ViewModel.Name}" />
            <TextBlock Text="{x:Bind ViewModel.Content}" />
        </StackPanel>
    </Grid>

结果

【Win10】UAP/UWP/通用 开发之 x:Bind

四、数据模板中使用

因为x:Bind 是强类型,所以你在使用DataTemplate的时候,要指定x:DataType,我们改写一下上面的例子。

CodeBehand的代码不用变,我们直接变Xaml中的。加一个Key为TestDataTmpleate的数据模板,为了区别,我们给一个背景色,把顺序也换一下.

<Page x:Class="BindDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:BindDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="TestDataTemplate"
                      x:DataType="local:MainViewModel">
            <StackPanel Background="Orange">
                <TextBlock Text="{x:Bind Content}" />
                <TextBlock Text="{x:Bind Name}" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center">
            <TextBlock Text="{x:Bind Title}" />
            <ContentControl ContentTemplate="{StaticResource TestDataTemplate}"
                            Content="{x:Bind ViewModel}" />
        </StackPanel>
    </Grid>
</Page>

结果:【Win10】UAP/UWP/通用 开发之 x:Bind

如果,我们不设置x:DataType呢。他就会告诉我们这个Error。

【Win10】UAP/UWP/通用 开发之 x:Bind

 

五、绑定事件到方法

x:Bind 是支持事件绑定到方法的,例如我给MainViewModel 加一个Test方法。然后在数据模板中加一个Button。

Click这个不用想都支持,我就随便试了一个PointerEntered事件啦。

绑定的这个方法,可以不写参数,也可以把事件的参数写全。

        <DataTemplate x:Key="TestDataTemplate"
                      x:DataType="local:MainViewModel">
            <StackPanel Background="Orange">
                <TextBlock Text="{x:Bind Content}" />
                <TextBlock Text="{x:Bind Name}" />
                <Button  PointerEntered="{x:Bind Test}" />
            </StackPanel>
        </DataTemplate>

【Win10】UAP/UWP/通用 开发之 x:Bind

完美进入断点。

六、总结

  现在Binding也是可以一同使用的,至少不带表x:Bind可以全完替代Binding,至少在动态类型的绑定上,x:Bind是玩不转的。而且使用x:Bind 多少打乱一些我们已习惯的MVVM的结构。

  但是x:Bind所带来的性能的提升,真心让人心动,可以的话,可以尽量的使用这个。

 

本文只是我的x:Bind的初步理解,也没找到什么文档,如果有不对的地方,请大家指出来。谢谢。

本文地址:http://www.cnblogs.com/gaoshang212/p/4534138.html

 

相关文章: