背水一戰 Windows 10 (21) - 綁定: x:Bind 綁定, x:Bind 綁定之 x:Phase, 使用綁定過程中的一些技巧
作者：webabcd
介紹
背水一戰 Windows 10 之 綁定
- x:Bind 綁定
- x:Bind 綁定之 x:Phase
- 使用綁定過程中的一些技巧
示例
1、演示 x:Bind 綁定的相關知識點
Bind/BindDemo.xaml
<Page x:Class="Windows10.Bind.BindDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Bind" xmlns:common="using:Windows10.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- 關於 x:Bind 的相關說明： 1、Binding 是在運行時（RunTime）綁定；而 x:Bind 是在編譯時（BuildTime）綁定（其會在編譯時自動生成一些輔助代碼，參見對應的 g.cs 代碼），所以 x:Bind 的效率要高 2、x:Bind 是強類型綁定，類型必須比配；Binding 在綁定時如果類型不必配，會做自動轉換 3、x:Bind 只具有 Binding 的一部分功能，如下: Path, Mode. FallbackValue, TargetNullValue, Converter, ConverterParameter, ConverterLanguage 4、x:Bind 的 Mode 的默認值是 OneTime；Binding 的 Mode 的默認值是 OneWay 5、x:Bind 的數據上下文是其所屬的 Page 或 UserControl, 不能為 x:Bind 指定其他的數據上下文 6、x:Bind 在 DataTemplate 中使用時，必須指定 DataTemplate 的 DataType；而 Binding 則不必 7、x:Bind 只能在 xaml 中使用，無法在 CodeBehind 中使用 8、x:Bind 支持事件綁定到方法 9、仔細看看上面的說明，x:Bind 與 Binding 的大部分不同的本質原因是，他們一個是編譯時綁定，一個是運行時綁定 --> <!--綁定到屬性--> <TextBlock Name="textBlock" Text="{x:Bind Path=CurrentEmployee.Name, Mode=OneWay}" Margin="5" /> <!--事件綁定到方法，無參數--> <Button Content="修改 CurrentEmployee 的 MyName" Click="{x:Bind EventBindNoArgs}" Margin="5" /> <!--事件綁定到方法，參數與對應的事件的參數相同--> <Button Content="修改 CurrentEmployee 的 MyName" Click="{x:Bind EventBindRegularArgs}" Margin="5" /> <!--事件綁定到方法，參數與對應的事件的參數相同，但是其中的事件參數為 object 類型--> <Button Content="修改 CurrentEmployee 的 MyName" Click="{x:Bind EventBindBaseArgs}" Margin="5" /> <!--事件綁定到方法，也可以綁定到指定對象中的指定方法--> <Button Content="修改 CurrentEmployee 的 MyName" Click="{x:Bind CurrentEmployee.ChangeName}" Margin="5" /> <!--在 DataTemplate 中使用 x:Bind 的注意事項：必須要指定 DataTemplate 的 DataType--> <ListView x:Name="listView" ItemsSource="{x:Bind AllEmployees}" Margin="5"> <ListView.ItemTemplate> <DataTemplate x:DataType="common:Employee"> <TextBlock Text="{x:Bind Name}" /> </DataTemplate> </ListView.ItemTemplate> </ListView> <!--可以與索引器綁定--> <TextBlock Name="textBlock2" Text="{x:Bind Path=AllEmployees[0].Name, Mode=OneWay}" Margin="5" /> <!--可以與 Element 綁定--> <TextBlock Name="textBlock3" Text="{x:Bind textBlock2.Text, Mode=OneWay}" Margin="5" /> </StackPanel> </Grid> </Page>
Bind/BindDemo.xaml.cs
/* * 演示 x:Bind 綁定的相關知識點 */ using System; using System.Collections.ObjectModel; using System.ComponentModel; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows10.Common; namespace Windows10.Bind { // x:Bind 的數據上下文就是它所屬的 Page 或 UserControl public sealed partial class BindDemo : Page { public BindDemo() { this.InitializeComponent(); } // 事件綁定到方法，無參數 private void EventBindNoArgs() { CurrentEmployee.Name = "wanglei" + new Random().Next(1000, 10000).ToString(); } // 事件綁定到方法，參數與對應的事件的參數相同 private void EventBindRegularArgs(object sender, RoutedEventArgs e) { CurrentEmployee.Name = "wanglei" + new Random().Next(1000, 10000).ToString(); } // 事件綁定到方法，參數與對應的事件的參數相同，但是其中的事件參數為 object 類型 private void EventBindBaseArgs(object sender, object e) { CurrentEmployee.Name = "wanglei" + new Random().Next(1000, 10000).ToString(); } public Employee CurrentEmployee { get; set; } = new Employee() { Name = "wanglei", Age = 36, IsMale = true }; public ObservableCollection<Employee> AllEmployees { get; set; } = TestData.GetEmployees(5); } }
2、演示 x:Bind 綁定之 x:Phase 的相關知識點
Bind/PhaseDemo.xaml
<Page x:Class="Windows10.Bind.PhaseDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Bind" xmlns:common="using:Windows10.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <!-- 關於 x:Phase 的相關說明： 1、x:Phase 可以實現元素的分階段顯示，用於避免繪制大量數據時的卡頓 2、ListView 和 GridView 均繼承自 ListViewBase 3、在 windows 8.1 及以后版本中，ListViewBase 是支持 UI 虛擬化的 4、x:Phase 只適用於 ListViewBase 中的 DataTemplate 里的元素 5、x:Phase 屬於 x:Bind 的一項功能，所以其必須在指定了 x:Bind 的元素中使用才有效 6、x:Phase 的作用是解決如下問題：當 ListViewBase 滾動時，如果一屏的 item 多，且每個 item 中的 element 也多，那么繪制時會占用大量的資源以至卡頓 7、在 windows 8.1 及以后版本中，我們可以通過 ContainerContentChanging 事件手動控制列表項的呈現，而 x:Phase 的原理其實就是在編譯時自動生成這種手動控制代碼（參見對應的 g.cs 代碼） 關於如何手動控制列表項的呈現，請參見 /Controls/CollectionControl/ListViewBaseDemo/ListViewBaseDemo4.xaml --> <DataTemplate x:Key="PhasedFileTemplate" x:DataType="common:Employee"> <StackPanel Width="200" Margin="10" Background="Blue"> <TextBlock Margin="5" Text="{x:Bind Name}" Foreground="Red" x:Phase="9" /> <TextBlock Margin="5" Text="{x:Bind Name}" Foreground="White" /> <TextBlock Margin="5" Text="{x:Bind Name}" Foreground="Green" x:Phase="1" /> <TextBlock Margin="5" Text="{x:Bind Name}" Foreground="Orange" x:Phase="2" /> <TextBlock Margin="5" Text="{x:Bind Name}" Foreground="Orange" x:Phase="2" /> </StackPanel> </DataTemplate> </Page.Resources> <Grid Background="Transparent"> <!-- ShowsScrollingPlaceholders="false" - 不顯示占位符 ContainerContentChanging - 項容器的內容發生變化時觸發的事件（在本例中，其用於人為減慢每階段的顯示速度，以便演示） 關於 ShowsScrollingPlaceholders, ContainerContentChanging 的詳細說明請參見 ListView, GridView 部分 --> <GridView Name="gridView" Margin="10 0 10 10" ShowsScrollingPlaceholders="false" ContainerContentChanging="gridView_ContainerContentChanging" ItemsSource="{x:Bind AllEmployees}" ItemTemplate="{StaticResource PhasedFileTemplate}" /> </Grid> </Page>
Bind/PhaseDemo.xaml.cs
/* * 演示 x:Bind 綁定之 x:Phase 的相關知識點 */ using System.Collections.ObjectModel; using System.Threading; using Windows.UI.Xaml.Controls; using Windows10.Common; namespace Windows10.Bind { public sealed partial class PhaseDemo : Page { public PhaseDemo() { this.InitializeComponent(); } // 用於人為減慢每階段的顯示速度，以便演示 private void gridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args) { AutoResetEvent h = new AutoResetEvent(false); h.WaitOne(1); uint phase = args.Phase; if (phase < 10) args.RegisterUpdateCallback(gridView_ContainerContentChanging); } // 數據源 public ObservableCollection<Employee> AllEmployees { get; set; } = TestData.GetEmployees(1000); } }
3、演示使用綁定過程中的一些技巧
Bind/Tips.xaml
<Page x:Class="Windows10.Bind.Tips" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Bind" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:common="using:Windows10.Common" Background="Red"> <Page.Resources> <common:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter" /> </Page.Resources> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <!--綁定附加屬性，注意要用括號括起來--> <TextBox Name="textBox1" Margin="5" Text="{Binding Path=(Grid.Row), RelativeSource={RelativeSource Self}}" Grid.Row="0" /> <!--使用綁定時，可以在 Binding 或 x:Bind 后直接加 Path 的值，而不用寫“Path=”--> <TextBox Name="textBox2" Margin="5" Text="{Binding (Grid.Row), RelativeSource={RelativeSource Self}}" Grid.Row="1" /> <!--在 CodeBehind 端綁定附加屬性--> <TextBox Name="textBox3" Margin="5" Grid.Row="2" /> </Grid> <!--綁定自定義附加屬性（在 CodeBehind 端綁定自定義附加屬性暫時沒有成功）--> <TextBox Name="textBox4" Margin="5" local:MyAttachedProperty.SubTitle="custom attached property" Text="{Binding (local:MyAttachedProperty.SubTitle), RelativeSource={RelativeSource Self}}" /> <!--綁定指定對象的指定屬性--> <TextBox Name="textBox5" Margin="5" Text="{Binding Margin.Top, RelativeSource={RelativeSource Self}}" /> <!-- Background 是 Brush 類型 SolidColorBrush 繼承自 Brush Background.(SolidColorBrush.Color) 的意思就是將 Background 的 Brush 類型轉換為 SolidColorBrush 類型並取其 Color 屬性 --> <TextBox Name="textBox6" Margin="5" Text="{x:Bind Background.(SolidColorBrush.Color)}" /> <!-- x:Bind 沒有 ElementName，那如何與其他元素綁定呢，像下面這樣即可 --> <TextBox Name="textBox7" Margin="5" Text="{x:Bind textBox6.Text}" /> <!-- x:Bind 如何綁定到其他元素的附加屬性呢，像下面這樣即可 --> <TextBox Name="textBox8" Margin="5" Text="{x:Bind textBox2.(Grid.Row)}" /> <!-- x:Bind 如何綁定到其他元素的自定義附加屬性呢，像下面這樣即可 --> <TextBox Name="textBox9" Margin="5" Text="{x:Bind textBox4.(local:MyAttachedProperty.SubTitle)}" /> <!-- 在本例中 CurrentEmployee 是 object 類型，要將他轉換為 Employee 類型，然后再使用其屬性，寫法如下 --> <TextBox Name="textBox10" Margin="5" Text="{x:Bind CurrentEmployee.(common:Employee.Name)}" /> <!-- Binding 也可以這么寫（x:Bind 不支持這么寫） --> <TextBox Name="textBox11" Margin="5"> <TextBox.Text> <Binding Path="Text" ElementName="textBox6" /> </TextBox.Text> </TextBox> <!-- 下面的示例用於演示如何綁定到 DataContext 對象的某個屬性 --> <TextBox Name="textBox12" DataContext="{x:Bind CurrentEmployee}" Text="{Binding Name}" Margin="5" /> <!-- 下面的示例用於演示如何直接綁定到 DataContext 對象（而不是綁定 DataContext 對象的某個屬性） --> <TextBox Name="textBox13" DataContext="{x:Bind MyName}" Text="{Binding}" Margin="5" /> <!-- Binding 綁定時，如果數據類型不一致，會嘗試自動轉換，比如此例：bool? 會被自動自動轉換為 bool --> <TextBox Name="textBox14" Text="我是 textBox14" IsReadOnly="{Binding IsChecked, ElementName=chk1}" Margin="5" /> <CheckBox Name="chk1" Content="textBox14 IsReadOnly" IsChecked="True" Margin="5 0 0 0" /> <!-- x:Bind 是編譯時的強類型綁定，如果數據類型不一致，不會自動轉換，比如此例：要通過 Converter 把 bool? 轉換為 bool --> <TextBox Name="textBox15" Text="我是 textBox15" IsReadOnly="{x:Bind chk2.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverter}}" Margin="5" /> <CheckBox Name="chk2" Content="textBox15 IsReadOnly" IsChecked="True" Margin="5 0 0 0" /> <!-- 再看看綁定此種路徑時的寫法，要理解 --> <Rectangle Name="rectangle1" Height="20" Fill="Orange" Margin="5" /> <TextBox Name="textBox16" Margin="5 0 0 0" Text="{x:Bind rectangle1.(Shape.Fill).(SolidColorBrush.Color)}" /> <!-- 再來個更長的看看，要理解 --> <Rectangle Name="rectangle2" Height="20" Width="100" HorizontalAlignment="Left" Fill="Orange" Margin="5"> <!-- 注：這里必須先要聲明出 ScaleTransform，這樣才能與之綁定（否則運行時會報錯） --> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <TextBox Name="textBox17" Margin="5 0 0 0" Text="{x:Bind rectangle2.(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX), Mode=TwoWay}" /> </StackPanel> </Grid> </Page>
Bind/Tips.xaml.cs
/* * 用於演示使用綁定過程中的一些技巧 * * 在這里插一句： * 在 xaml 使用的 {Binding}, {x:Bind}, {StaticResource} 之類的這種帶大括號的語法被稱為標記擴展（Markup Extension），在 uwp 中無法開發自定義標記擴展（但是在 wpf 中是可以的） */ using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Data; using Windows10.Common; namespace Windows10.Bind { public sealed partial class Tips : Page { public Tips() { this.InitializeComponent(); this.Loaded += Tips_Loaded; } private void Tips_Loaded(object sender, RoutedEventArgs e) { BindingAttachedProperty(); } // 在 CodeBehind 端綁定附加屬性 private void BindingAttachedProperty() { Binding binding = new Binding() { Path = new PropertyPath("(Grid.Row)"), // 注意要有括號，另外在 CodeBehind 端綁定自定義附加屬性暫時沒有成功 Source = textBox3 }; BindingOperations.SetBinding(textBox3, TextBox.TextProperty, binding); } // 通過 x:Bind 綁定時，要做轉換 public object CurrentEmployee { get; set; } = new Employee() { Name = "wanglei", Age = 36, IsMale = true }; public string MyName { get; set; } = "webabcd"; } /// <summary> /// 用於附加屬性的演示 /// </summary> public class MyAttachedProperty { // 獲取附加屬性 public static string GetSubTitle(DependencyObject obj) { return (string)obj.GetValue(SubTitleProperty); } // 設置附加屬性 public static void SetSubTitle(DependencyObject obj, string value) { obj.SetValue(SubTitleProperty, value); } // 注冊一個附加屬性 public static readonly DependencyProperty SubTitleProperty = DependencyProperty.RegisterAttached( "SubTitle", // 附加屬性的名稱 typeof(string), // 附加屬性的數據類型 typeof(MyAttachedProperty), // 附加屬性所屬的類 new PropertyMetadata("", PropertyMetadataCallback)); // 指定附加屬性的默認值，以及值發生改變時所調用的方法 private static void PropertyMetadataCallback(DependencyObject sender, DependencyPropertyChangedEventArgs args) { object newValue = args.NewValue; // 發生改變之后的值 object oldValue = args.OldValue; // 發生改變之前的值 } } }
OK
[源碼下載]