在Resource中使用x:Bind

Build2015上，MS热情高涨的演示了x:Bind,一种新的Binding方式，新的方式有如下优点：

1更好的性能（内存占用，CPU占用）

2BuildTime的Binding

具体在Channel9有视频

Data Binding: Boost Your Apps‘ Performance Through New Enhancements to XAML Data Binding

新的绑定方式，有如下特点：

x:Bind 主要的几点：

1. 强类型

2.上下文为page 或 UserControl

3.绑定的默认Mode为OneTime

更多了解，请访问：

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

其它的都比较简单，本文主要讲解在Resource中使用x:Bind

1.定义一资源文件DataTemplaterResources.xaml

<ResourceDictionary
    x:Class="SLWeek.CustomTheme.DataTemplaterResources"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:behaviors="using:MVVMSidekick.Behaviors"
    xmlns:controls="using:Q42.WinRT.Controls"
    xmlns:models="using:SLWeek.Models">
</ResourceDictionary>

注意：要使用x:Class，命名此xmal的部分类，与下面.cs文件从命名空间和类名称上保持一致

2.定义同名的部分类DataTemplaterResources.xaml.cs

namespace SLWeek.CustomTheme
{
  public  partial  class DataTemplaterResources
    {
        public DataTemplaterResources()
        {
            InitializeComponent();
         }
    }
}

注意：一定要在构造函数中使用初如化InitializeComponent();

其结构如下图所示

3.引用资源文件，我们可以在页面引用，也可以直接在APP.xaml中引用，引用方式，不是我们通常的ResourceDictionary，而是如下方式：

  <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light" Source="CustomTheme/ThemeResourcesLight.xaml" />
                <ResourceDictionary x:Key="Dark" Source="CustomTheme/ThemeResourcesDark.xaml" />
            </ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CustomTheme/CustomStyleResources.xaml" />
                <ResourceDictionary Source="CustomTheme/FlatUIColorsResources.xaml" />
                <theme:DataTemplaterResources/>
            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>
    </Application.Resources>

其中theme是为我们为其所有命名空间起的别名

4.我们可以根据业务需要，在Resource中添加自己需要的Datatemplate了

 <DataTemplate x:Key="PostDetailItemDataTemplate" x:DataType="models:PostDetail">
        <Grid  Margin="0,5,0,5" Background="{ThemeResource SystemControlChromeLowBackgroundBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="Tapped">
                    <behaviors:SendToEventRouterAction EventRoutingName="NavToPostDetailByEventRouter"   IsEventFiringToAllBaseClassesChannels="True"  EventData="{Binding}"/>
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
            <Image  controls:ImageExtensions.CacheUri="{x:Bind Icon}" Stretch="Fill" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
            <!--<c:DelayLoadImage DefaultImageSource="../Assets/Icon/no.png"  ActualImageSource="{Binding Icon}" Stretch="Fill" Grid.Row="0" Grid.ColumnSpan="2"/>-->
            <TextBlock Text="{x:Bind Creattime,Converter={StaticResource StringFormatConverter},ConverterParameter=‘{}{0:MMM dd}‘,Mode=OneWay}" FontSize="22" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Margin="0,10,0,0"/>
            <TextBlock Text="{x:Bind Title}" FontSize="22" Grid.Row="1" Grid.Column="1" Margin="0,2,0,2"/>
            <TextBlock Text="{x:Bind Des}" TextTrimming="CharacterEllipsis" Style="{StaticResource MenuTitleTextBlockStyle}"  Grid.Row="2" Grid.Column="1"  Margin="0,10" VerticalAlignment="Stretch"/>
        </Grid>
    </DataTemplate>

注意，由于x:Bind是强类型，我们需要在Datatempalte声明中 使有 x:DataType="models:PostDetail" 来确定要绑定的数据类型，

5.在页面中引用这个资源即可

 <ListView  ItemsSource="{x:Bind StrongTypeViewModel.SoureList}"  Style="{StaticResource ListViewWrapItemsPanel}"  ItemTemplate="{StaticResource PostDetailItemDataTemplate}" SizeChanged="ListView_SizeChanged"/>   

最后效果图如下：