在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"/>   

最後如下：

 

在Resource中使用x:Bind