重新想象 Windows 8 Store Apps (52) - 綁定: 與 Element Model Indexer Style RelativeSource 綁定, 以及綁定中的數據轉換 原文:重新想象 Windows 8 Store Apps (52) - 綁定: 與 Element Model Indexer Style RelativeSource 綁定, 以及綁定中的數據轉換

[源碼下載]

重新想象 Windows 8 Store Apps (52) - 綁定: 與 Element Model Indexer Style RelativeSource 綁定, 以及綁定中的數據轉換

作者：webabcd


介紹
重新想象 Windows 8 Store Apps 之?綁定

• 與 Element 綁定
• 與 Model 綁定
• 與 Indexer 綁定
• 對 Style 中的 Setter 進行綁定（綁定靜態資源）
• Binding 的一個擴展標記 RelativeSource 的應用
• 綁定中的數據轉換

示例
1、演示如何與 Element 綁定，以及 OneTime, OneWay, TwoWay 的區別
Binding/BindingElement.xaml

<Pagex:Class="XamlDemo.Binding.BindingElement"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Binding"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="120 0 0 0"><!--本例用于演示如何與 Element 綁定，以及 OneTime, OneWay, TwoWay 的區別--><!--OneTime 方式綁定元素--><Slider Name="sliderOneTime" Minimum="1" Maximum="100" Value="10" Width="180" HorizontalAlignment="Left" /><TextBox Text="{Binding ElementName=sliderOneTime, Path=Value, Mode=OneTime}" Width="150" HorizontalAlignment="Left" /><!--OneWay 方式綁定元素（OneWay 是默認方式）--><Slider Name="sliderOneWay" Minimum="1" Maximum="100" Value="10" Width="180" HorizontalAlignment="Left" Margin="0 50 0 0" /><TextBox Text="{Binding ElementName=sliderOneWay, Path=Value, Mode=OneWay}" Width="150" HorizontalAlignment="Left" /><!--TwoWay 方式綁定元素--><Slider Name="sliderTwoWay" Minimum="1" Maximum="100" Value="10" Width="180" HorizontalAlignment="Left" Margin="0 50 0 0" /><TextBox Text="{Binding ElementName=sliderTwoWay, Path=Value, Mode=TwoWay}" Width="150" HorizontalAlignment="Left" /></StackPanel></Grid> </Page>

2、演示如何與 Model 進行雙向綁定
Binding/BindingModel.xaml

<Pagex:Class="XamlDemo.Binding.BindingModel"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Binding"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="120 0 0 0" Name="root"><TextBlock Name="lblMsg" FontSize="14.667" /><TextBox FontSize="14.667" Text="{Binding Path=Name, Mode=TwoWay}" Margin="0 10 10 0" /><TextBox FontSize="14.667" Text="{Binding Age, Mode=TwoWay}" Margin="0 10 10 0" /><ToggleSwitch OffContent="女" OnContent="男" Header="性別" Margin="0 10 10 0"><ToggleSwitch.IsOn><Binding Path="IsMale" Mode="TwoWay" /></ToggleSwitch.IsOn></ToggleSwitch></StackPanel></Grid> </Page>

Binding/BindingModel.xaml.cs

/** 演示如何與 Model 進行雙向綁定*/using System; using System.ComponentModel; using Windows.System.Threading; using Windows.UI.Core; using Windows.UI.Xaml.Controls; using XamlDemo.Model;namespace XamlDemo.Binding {public sealed partial class BindingModel : Page{private Employee _employee;public BindingModel(){this.InitializeComponent();this.Loaded += BindingModel_Loaded;}void BindingModel_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e){// 創建一個需要綁定的實體對象（注：Employee 實現了 INotifyPropertyChanged 接口，想要 OneWay 或者 TwoWay 的話必須要實現 INotifyPropertyChanged 接口）_employee = new Employee();_employee.Name = "webabcd";_employee.Age = 33;_employee.IsMale = true;// 每 5 秒更新一次數據 ThreadPoolTimer.CreatePeriodicTimer((timer) =>{var ignored = Dispatcher.RunAsync(CoreDispatcherPriority.High,() =>{Random random = new Random();_employee.Age = random.Next(10, 100);_employee.IsMale = random.Next() % 2 == 0 ? true : false;});},TimeSpan.FromMilliseconds(5000));// Employee 對象的屬性的值發生變化時觸發的事件_employee.PropertyChanged += _employee_PropertyChanged;root.DataContext = _employee;}// 每次屬性的值發生變化時，顯示變化后的結果void _employee_PropertyChanged(object sender, PropertyChangedEventArgs e){lblMsg.Text = "屬性：“" + e.PropertyName + "”的值發生了變化";lblMsg.Text += Environment.NewLine;lblMsg.Text += string.Format("當前的值為：Name-{0}, Age-{1}, IsMale-{2}", _employee.Name, _employee.Age, _employee.IsMale);}} }

3、演示如何與索引器進行綁定
Binding/BindingIndexer.xaml

<Pagex:Class="XamlDemo.Binding.BindingIndexer"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Binding"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="120 0 0 0"><!--演示如何綁定集合中的某個元素--><TextBlock Name="textBlock" FontSize="14.667" Text="{Binding Path=[3] }" /><!--示如何綁定集合中的某個對象的某個屬性--><TextBlock Name="textBlock2" FontSize="14.667" Text="{Binding Path=[5].Name }" Margin="0 10 0 0" /><!--演示如何綁定 string 類型的索引器--><TextBlock Name="textBlock3" FontSize="14.667" Text="{Binding Path=[webabcd] }" Margin="0 10 0 0" /><!--演示如何綁定字典表中指定 key 的數據--><TextBlock Name="textBlock4" FontSize="14.667" Text="{Binding Path=[hello] }" Margin="0 10 0 0" /></StackPanel></Grid> </Page>

Binding/BindingIndexer.xaml.cs

/** 演示如何與索引器進行綁定*/using System.Collections.Generic; using Windows.UI.Xaml.Controls; using XamlDemo.Model;namespace XamlDemo.Binding {public sealed partial class BindingIndexer : Page{public BindingIndexer(){this.InitializeComponent();this.Loaded += BindingIndexer_Loaded;}void BindingIndexer_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e){// 用于演示如何綁定集合中的某個元素List<string> list = new List<string>();for (int i = 0; i < 10; i++){list.Add("索引：" + i.ToString());}textBlock.DataContext = list;// 用于演示如何綁定集合中的某個對象的某個屬性textBlock2.DataContext = TestData.GetEmployees();// 用于演示如何綁定 string 類型的索引器textBlock3.DataContext = this;// 用于演示如何綁定字典表中指定 key 的數據Dictionary<string, string> dic = new Dictionary<string, string>();dic["hello"] = "hello webabcd";textBlock4.DataContext = dic;}// 自定義一個索引器public object this[string indexer]{get{return indexer;}}} }

4、演示 Style 中的 Setter 如何做數據綁定（綁定靜態資源）
Binding/BindingStyleSetter.xaml

<Pagex:Class="XamlDemo.Binding.BindingStyleSetter"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Binding"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="120 0 0 0"><!--演示 Style 中的 Setter 如何做數據綁定--><StackPanel.Resources><!--設置一些資源--><x:Double x:Key="TextFontSize">24.667</x:Double><SolidColorBrush x:Key="TextForeground" Color="#00FF00" /><!--為 Style 的 Setter 的 Value 做數據綁定--><Style x:Key="MyStyle" TargetType="TextBox"><Setter Property="FontSize" Value="{Binding Source={StaticResource TextFontSize}}"/><Setter Property="Foreground" Value="{Binding Source={StaticResource TextForeground}}"/></Style></StackPanel.Resources><!--應用樣式--><TextBox Text="我是TextBox" Style="{StaticResource MyStyle}" /></StackPanel></Grid> </Page>

5、演示 Binding 中的一個擴展標記 RelativeSource 的應用
Binding/BindingRelativeSource.xaml

<Pagex:Class="XamlDemo.Binding.BindingRelativeSource"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Binding"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="120 0 0 0"><!--演示 Binding 中的一個擴展標記 RelativeSource 的應用，其用于指定關聯數據源為 Self 或 TemplatedParent另外簡要說明 TemplateBinding 的應用--><StackPanel.Resources><Style x:Key="MyStyle" TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><StackPanel><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" /><!--TemplateBinding 是一個簡單版的 Binding，用于在模板中綁定控件的某個屬性如果設計模板時需要用到雙向綁定，則 TemplateBinding 就無能為力了（TemplateBinding 是 OneWay 的）只能通過 Binding 來做雙向綁定，然后通過 RelativeSource={RelativeSource TemplatedParent} 指定數據源來自引用了該 ControlTemplate 的 Control--><Slider Minimum="1" Maximum="100" Width="{TemplateBinding Width}" Value="{Binding Content, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" /></StackPanel></ControlTemplate></Setter.Value></Setter></Style></StackPanel.Resources><Button Width="300" Content="10" Style="{StaticResource MyStyle}" /><!--RelativeSource={RelativeSource Self} - 指定數據源為自己本身--><TextBlock Text="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Tag="webabcd" FontSize="14.667" Margin="0 10 0 0" /></StackPanel></Grid> </Page>

6、演示如何在綁定中做數據轉換
Binding/IntegerLetterConverter.cs

/** 繼承 IValueConverter 以實現一個“整數-字母”轉換器*/using System; using Windows.UI.Xaml.Data;namespace XamlDemo.Binding {public sealed class IntegerLetterConverter : IValueConverter{/// <summary>/// 正向轉換器。將值從數據源傳給綁定目標時，數據綁定引擎會調用此方法/// </summary>/// <param name="value">轉換之前的值</param>/// <param name="targetType">轉換之后的類型</param>/// <param name="parameter">轉換器所使用的參數（它是通過 Binding 的 ConverterParameter 傳遞過來的）</param>/// <param name="language">轉換器所使用的區域信息（它是通過 Binding 的 ConverterLanguage 傳遞過來的）</param>/// <returns>轉換后的值</returns>public object Convert(object value, Type targetType, object parameter, string language){if ((double)value == 1)return "a";else if ((double)value == 2)return "b";else if ((double)value == 3)return "c";elsereturn "unknown";}/// <summary>/// 反向轉換器。將值從綁定目標傳給數據源時，數據綁定引擎會調用此方法/// </summary>/// <param name="value">轉換之前的值</param>/// <param name="targetType">轉換之后的類型</param>/// <param name="parameter">轉換器所使用的參數（它是通過 Binding 的 ConverterParameter 傳遞過來的）</param>/// <param name="language">轉換器所使用的區域信息（它是通過 Binding 的 ConverterLanguage 傳遞過來的）</param>/// <returns>轉換后的值</returns>public object ConvertBack(object value, Type targetType, object parameter, string language){if ((string)value == "a")return 1;else if ((string)value == "b")return 2;else if ((string)value == "c")return 3;elsereturn 1;}} }

Binding/ValueConverter.xaml

<Pagex:Class="XamlDemo.Binding.ValueConverter"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamlDemo.Binding"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="120 0 0 0"><!--配置 IValueConverter 資源--><StackPanel.Resources><local:IntegerLetterConverter x:Key="IntegerLetterConverter"/></StackPanel.Resources><Slider Name="slider" Minimum="1" Maximum="3" Value="1" Width="180" HorizontalAlignment="Left" /><TextBox Width="150" HorizontalAlignment="Left"Text="{Binding Value, Mode=TwoWay, ElementName=slider, Converter={StaticResource IntegerLetterConverter},ConverterParameter=param, ConverterLanguage=zh_cn}" /><!--注：ConverterParameter 和 ConverterLanguage 不能實現動態的綁定，只能傳遞靜態的參數--></StackPanel></Grid> </Page>

OK
[源碼下載]

posted on 2014-03-09 15:35 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/3590106.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。