[Win10] UAP/UWP/universal development x: Bind, win10uap

Source: Internet
Author: User

[Win10] UAP/UWP/universal development x: Bind, win10uap

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

[The commercial version of a prerelease may be greatly modified. Microsoft does not provide any guarantee for the information provided here.]

In MSDN, Windows 10 SDK Dongdong will declare this sentence. I will also introduce it. He does not guarantee it, and I cannot protect it.

 

Body

In Win10 UWP development, a New Keyword x: Bind is added. Where is it? Why.

Build conference video resources: http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10-preview? Prid = ch9courselink

I. x: Where is Bind?

From the two pictures, we can see that x: Bind has better performance than Binding. Why?

This binding is called "compiled data bindings", which literally refers to the compiled data binding.

The commonly used Binding is the runtime Binding, which is determined by the Build Time.

The advantage is high efficiency and high speed. The binding errors will be prompted during compilation to facilitate debugging.

Ii. x: Bind

X: Main Points of Bind:

1. Strong type

2. The context is page or UserControl.

3. The default binding Mode is OneTime.

When Binding is used, we sometimes do not need to consider the type, because there are many default conversions (such as TypeConverter), but when using x: Bind, if the type does not match the Compilation Time, an error occurs.

For example:

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

We bind the current context to IsChecked (bool ?) Upper

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

The result is like this. Of course, it will not be wrong if you bind the String type attribute, it will help you ToString.

The binding context seems to be the current class itself, that is, it inherits from the Page and UserControl itself.

If you are a beginner, you no longer need to find the object or set DataContext.

If you are familiar with MVVM, you need to write the ViewModel into CodeBehand using x: Bind. It is strange to say that many frameworks may have to be adjusted.

Iii. Test the knife

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

CodeBehand does not do any code.

Result:

 

From this result, we can also see that the context is the current page.

Add a Title attribute to CodeBehand.

    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>

Here, people familiar with MVVM will think about how to bind ViewModel. In fact, it is good to write the ViewModel object in 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>

Result

Iv. Use in data templates

Because x: Bind is strongly typed, you must specify x: DataType when using DataTemplate. Let's rewrite the above example.

CodeBehand Code does not need to be changed. We directly change the code in Xaml. Add a data template whose Key is TestDataTmpleate. For the difference, we will give a background color and change the order.

<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>

Result:

If we do not set x: DataType. He will tell us this Error.

 

5. Bind events to methods

X: Bind supports event binding to methods. For example, I add a Test method to MainViewModel. Then add a Button in the data template.

Click. I tried a PointerEntered event.

This method can be bound without writing parameters or writing all event parameters.

        <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>

Perfectly enters the breakpoint.

Vi. Summary

Now, Binding can be used together. At least the Table x: Bind can be used to replace Binding. At least the dynamic Binding, x: Bind cannot be used. In addition, the use of x: Bind breaks down some of the MVVM structures we are used.

However, x: the performance improvement brought about by Bind is really exciting. If you can, try to use this.

 

This article is just my preliminary understanding of x: Bind, and I have not found any documents. If there is anything wrong, please point it out. Thank you.

Address: http://www.cnblogs.com/gaoshang212/p/4534138.html

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.