WPF應(yīng)用開發(fā)項目教程課件5.2 WPF綁定

本章導(dǎo)讀：本章的主要內(nèi)容是WPF的數(shù)據(jù)綁定和數(shù)據(jù)驗證的相關(guān)知識。然后通過項目“注冊信息入庫程序”為導(dǎo)向，四個任務(wù)（創(chuàng)建一個簡單Binding程序、顯示自定義顏色程序、注冊用戶的信息查詢、注冊信息入庫）為驅(qū)動，學(xué)習(xí)有關(guān)WPF綁定的知識，特別是綁定到CLR對象、使用集合對象作為列表控件的ItemsSource，本項目著力使學(xué)習(xí)者對WPF的Binding有一定認(rèn)識，初步掌握數(shù)據(jù)綁定的用法。項目五WPF綁定—注冊信息入庫程序

——任務(wù)二創(chuàng)建顯示自定義顏色的程序

一、任務(wù)描述：通過移動4個Slider滑塊，改變顏色塊中顏色。隨著每個滑塊的移動，顏色也隨著變化。運行效果如圖所示。二、知識準(zhǔn)備：1Binding的路徑（Path）2用Source綁定到CLR對象二、知識準(zhǔn)備：1、Binding的路徑(Path)做為Binding的源可能會有很多屬性，通過這些屬性Binding源可以把數(shù)據(jù)暴露給外界。那么，Binding到底需要關(guān)注哪個屬性值呢？就需要用Binding的Path屬性來指定了。盡管在XAML代碼中或者Binding類的構(gòu)造器參數(shù)列表中我們使用字符串來表示Path，但Path的實際類型是PropertyPath。二、知識準(zhǔn)備：例如，想讓一個TextBlock控件的Background顯示List的的選定項。點擊列表框的不同項，在TextBlock上顯示相應(yīng)字符串，背景色顯示成對應(yīng)顏色。1、Binding的路徑(Path)二、知識準(zhǔn)備：<StackPanelMargin="40,30"><TextBlock

FontSize="20"Height="40"Text="顏色選擇:"/><ListBoxx:Name="lbColor"FontSize="18"Width="200"Height="120"><ListBoxItemContent="Blue"/><ListBoxItemContent="Green"/><ListBoxItemContent="Yellow"/><ListBoxItemContent="Red"/><ListBoxItemContent="Purple"/><ListBoxItemContent="Orange"/></ListBox><TextBlock/></StackPanel>1、Binding的路徑(Path)二、知識準(zhǔn)備：

<TextBlockx:Name="tbk1"Width="200"Height="30"><TextBlock.Text><BindingElementName="lbColor"Path="SelectedItem.Content"/></TextBlock.Text></TextBlock>1、Binding的路徑(Path)對應(yīng)TextBlock的數(shù)據(jù)綁定，采用第1種綁定方式可以這樣寫：

<TextBlockx:Name=“tbk2”Background="{BindingElementName=lbColor,Path=SelectedItem.Content,Mode=OneWay}"/>也可以用第2種綁定方式，這樣寫：二、知識準(zhǔn)備：1、Binding的路徑(Path)Binding還支持多級路徑，例如想讓一個TextBox顯示另外一個TextBox內(nèi)容的長度，如右圖。二、知識準(zhǔn)備：<TextBoxHeight="23"Name="textBox1"Width="158"/><TextBoxHeight="23"Name="textBox2"Text="{BindingPath=Text.Length,ElementName=textBox1,Mode=OneWay}"Width="158"/>1、Binding的路徑(Path)等效的C#代碼是：this.textBox2.SetBinding(TextBox.TextProperty,newBinding("Text.Length"){Source=textBox1,Mode=BindingMode.OneWay});二、知識準(zhǔn)備：1、Binding的路徑(Path)例如我們想讓一個TextBox顯示另外一個TextBox的第4個字符，如下圖。二、知識準(zhǔn)備：<TextBoxHeight="23"Name="textBox1"Width="158"Text="ABCDE"/><TextBoxHeight="23"Name="textBox2"Text="{BindingPath=Text[3],

ElementName=textBox1,Mode=OneWay}"Width="158"/></TextBox>1、Binding的路徑(Path)等效的C#代碼是：this.textBox2.SetBinding(TextBox.TextProperty,newBinding("Text.[3]"){Source=textBox1,Mode=BindingMode.OneWay});二、知識準(zhǔn)備：2、用Source綁定到CLR對象Binding類的ElementName屬性表示綁定到WPF元素，而Source屬性表示綁定的數(shù)據(jù)源為CLR對象。CLR對象，即非元素對象。既可以是.NET框架提供的類的實例，也可以是自定義類的實例。二、知識準(zhǔn)備：<Window.Resources>

<FontFamily

x:Key="CustomFont">Calibri</FontFamily>

</Window.Resources>（1）.NET框架提供的類的實例，即系統(tǒng)自帶的類的實例。例如：<TextBlock

Text=“{Binding

Source={StaticResource

CustomFont},

Path=Source}”/>在TextBlock控件中使用該字體，即綁定到該資源上。代碼如下：2、用Source綁定到CLR對象二、知識準(zhǔn)備：2、用Source綁定到CLR對象（2）Binding類的Source屬性，綁定到自定義類的實例。先創(chuàng)建一個Person的類，作為數(shù)據(jù)源用。classStudent{publicstringName{get;set;}publicstringSex{get;set;}}二、知識準(zhǔn)備：2、用Source綁定到CLR對象該類的對象通過Name、Sex屬性將數(shù)據(jù)暴露給UI上的元素。設(shè)計WPF外觀如下：二、知識準(zhǔn)備：2、用Source綁定到CLR對象外觀布局的主要代碼如下：<StackPanelMargin="30"Width="180"><TextBlockText="學(xué)生的姓名"Height="40"FontSize="18"/><TextBoxx:Name="textBox1"Height="40"Width="150"/><TextBlockText="學(xué)生的性別"Height="40"FontSize="18"/><TextBoxx:Name="textBox2"Height="40"Width="150"/></StackPanel>二、知識準(zhǔn)備：2、用Source綁定到CLR對象

創(chuàng)建Student的一個實例，使用Binding把數(shù)據(jù)源和UI元素連接起來。將對象2個屬性分別綁定在2個TextBox控件的Text屬性上。

InitializeComponent();Studentstu=newStudent();

stu.Name="鄭佳";

stu.Sex="女";二、知識準(zhǔn)備：2、用Source綁定到CLR對象Bindingbind1=newBinding();bind1.Source=stu;bind1.Path=newPropertyPath("Name");

BindingOperations.SetBinding(this.textBox1,TextBox.TextProperty,bind1);Bindingbind2=newBinding();bind2.Source=stu;bind2.Path=newPropertyPath("Sex");

BindingOperations.SetBinding(this.textBox2,TextBox.TextProperty,bind2);二、知識準(zhǔn)備：2、用Source綁定到CLR對象BindingOperations是個值得注意的類，它調(diào)用靜態(tài)方法SetBinding()方法實現(xiàn)綁定。BindingOperations.SetBinding(…)：第1個參數(shù)用于指定Binding的目標(biāo)第2個參數(shù)用于為Binding指明把數(shù)據(jù)送達目標(biāo)的哪個屬性。是類的一個靜態(tài)只讀屬性DependencyProperty類型成員。第3個參數(shù)，指定使用哪個Binding實例將數(shù)據(jù)源與目標(biāo)關(guān)聯(lián)起來。二、知識準(zhǔn)備：2、用Source綁定到CLR對象運行效果如下：二、知識準(zhǔn)備：2、用Source綁定到CLR對象

如果讓作為Binding源的對象具有自動通知Binding屬性值已經(jīng)變化的能力，就需要讓類實現(xiàn)INotifyPropertyChanged接口，并在屬性的set語句中激發(fā)PropertyChanged事件。Binding是一種自動機制，當(dāng)值變化后屬性要有能力通知Binding，讓Binding把變化傳達給UI元素。當(dāng)實現(xiàn)了INotifyPropertyChanged接口的對象有所改變時，會激發(fā)OnPropertyChanged這個接口方法，該方法保證了UI界面的數(shù)據(jù)同步。二、知識準(zhǔn)備：2、用Source綁定到CLR對象我們需要在對象的屬性里set語句中激發(fā)一個PropertyChanged事件。修改Student類讓其實現(xiàn)System.ComponentModel名稱空間下的INotifyPropertyChanged接口即可。classStudent:INotifyPropertyChanged{

publiceventPropertyChangedEventHandler

PropertyChanged;

//類的具體實現(xiàn)}二、知識準(zhǔn)備：2、用Source綁定到CLR對象//類的具體實現(xiàn)privatestringname="鄭佳";publicstringName{get{returnname;}set{name=value;if(this.PropertyChanged!=null){

this.PropertyChanged.Invoke(this,new

PropertyChangedEventArgs("Name"));}}二、知識準(zhǔn)備：2、用Source綁定到CLR對象

如上代碼即指當(dāng)Name發(fā)生變化時通知UI元素更新。使用Binding把數(shù)據(jù)源和UI元素連接起來。將對象的Name屬性綁定在第2個TextBox控件的Text屬性上。InitializeComponent();Bindingbind1=newBinding();bind1.Source=stu;bind1.Path=newPropertyPath("Name");BindingOperations.SetBinding(this.textBox2,TextBox.TextProperty,bind1);二、知識準(zhǔn)備：2、用Source綁定到CLR對象在textBox1中輸入新的姓名，點擊按鈕對Student對象的Name屬性進行修改。給Button添加了Click事件。privatevoidbtn1_Click(objectsender,RoutedEventArgse){

stu.Name=textBox1.Text.Trim();}二、知識準(zhǔn)備：2、用Source綁定到CLR對象二、知識準(zhǔn)備：3、使用Binding的RelativeSource

有些時候我們不能確定作為Source的對象叫什么名字，但知道它與作為Binding目標(biāo)的對象在UI布局上有相對關(guān)系，比如控件自己關(guān)聯(lián)自己的某個數(shù)據(jù)、關(guān)聯(lián)自己某級容器的數(shù)據(jù)。這個時候我們就要使用Binding的RelativeSource屬性。

為了設(shè)置Binding.RelativeSource屬性，需要使用RelativeSource對象。這樣就需要除了創(chuàng)建一個Binding對象之外，還需要在其中創(chuàng)建一個嵌套的RelativeSource對象。二、知識準(zhǔn)備：3、使用Binding的RelativeSource為TextBlock.Text屬性創(chuàng)建一個Binding對象，這個Binding對象使用了一個查找父窗口并顯示窗口標(biāo)題的RelativeSource對象。<TextBoxx:Name=”textBox1”Margin="30"><TextBox.Text><BindingPath="Title"><Binding.RelativeSource><RelativeSourceMode="FindAncestor"AncestorType="{x:TypeWindow}"/></Binding.RelativeSource></Binding></TextBox.Text></TextBox>二、知識準(zhǔn)備：3、使用Binding的RelativeSource

RelativeSource對象使用FindAncestor模式，該模式告知查找元素樹直到發(fā)現(xiàn)AncestorType屬性定義的元素類型。

編寫綁定更常用的方法就是使用Binding和RelativeSource標(biāo)記擴展，將其合并到一個字符串中。<TextBoxMargin="30"x:Name=”textBox1”Text="{BindingPath=Title,RelativeSource={RelativeSource

FindAncestor,

AncestorType={x:TypeWindow}}}“/>二、知識準(zhǔn)備：3、使用Binding的RelativeSource運行效果如圖所示。二、知識準(zhǔn)備：3、使用Binding的RelativeSource我們也可以在后臺以C#代碼實現(xiàn)：

InitializeComponent();RelativeSource

rsTemp=newRelativeSource(RelativeSourceMode.FindAncestor);rsTemp.AncestorType=typeof(Window);Bindingbind=newBinding("Title"){RelativeSource=rsTemp};textBox1.SetBinding(TextBox.TextProperty,bind);二、知識準(zhǔn)備：3、使用Binding的RelativeSourceRelativeSource類的Mode屬性的類型是RelativeSourceMode枚舉：名稱說明Self表達式綁定到同一元素的另一個屬性上FindAncestor表達式綁定到父元素。WPF將查找元素樹直到發(fā)現(xiàn)期望的父元素。為了指定父元素，還必須設(shè)置AncestorType屬性以指示查找父元素的類型。此外，還可以使用AncestorLevel屬性略過發(fā)現(xiàn)的一定數(shù)量的特定元素。默認(rèn)情況下，AncestorLevel屬性設(shè)置為1，并且找到第一個匹配的元素時停止查找。PreviousData表達式綁定到數(shù)據(jù)綁定列表中的前一個數(shù)據(jù)項。在一個列表項目中會使用這種模式TemplateParent表達式綁定到應(yīng)用模板的元素。只有當(dāng)綁定位于一個控件模板或數(shù)據(jù)模板內(nèi)部時，這種模式才能工作三、任務(wù)分析：（1）通過移動4個Slider滑塊，改變顏色塊中顏色。這里采用Rectangle元素顯示顏色，用到Fill屬性。在WPF中，對Fill屬性的顏色填充。（2）在本任務(wù)中對顏色的修改包含了Alpha值、紅色通道、藍色通道、綠色通道的修改，所以調(diào)用Color.FromArgb（a,r,b,g）方法。自定義一個MyColor類，當(dāng)其屬性發(fā)生變化時，UI元素也隨之變化，還需要實現(xiàn)INotifyPropertyChanged接口。（3）最后通過本節(jié)的內(nèi)容實現(xiàn)數(shù)據(jù)綁定。四、任務(wù)實施：1、啟動VisualStudio2012，建立名為“MyColorBinding”的WPF項目。2、主要用到的控件及設(shè)置如下：控件類型控件名稱說明Gridgrid1用于生成2列的布局RectanglePreviewColor一個顯示顏色的塊，變化時可以清晰看到TextBlock

用于顯示提示信息TextBoxtextBox1用來顯示Slider變化的值SliderAlphaSlider、RedSlider、BlueSlider、GreenSlider拖動滑塊變化，用于改變顏色的值。四、任務(wù)實施：3、外觀布局設(shè)計，Grid設(shè)計成2列，代碼略。設(shè)計StackPanel控件，形成TextBlock和Slider間隔排列，放在第1列。代碼如下：<StackPanel

Grid.Column="0"VerticalAlignment="Center"><TextBlockText="Alpha"Margin="10"/><Sliderx:Name="AlphaSlider"Maximum="255"Value="185"/><TextBlockText="Red"FontSize="12"/><Sliderx:Name="RedSlider"Maximum="255"Value="255"/><TextBlockText="Green"Margin="10"/><Sliderx:Name="GreenSlider"Maximum="255"Value="102"/><TextBlockText="Blue"Margin="10"/><Sliderx:Name="BlueSlider"Maximum="255"Value="0"/></StackPanel>四、任務(wù)實施：publicclassMyColor:INotifyPropertyChanged{publiceventPropertyChangedEventHandler

PropertyChanged;publicSolidColorBrush

myColorExam;publicSolidColorBrush

MyColorExam{get{returnmyColorExam;}set{myColorExam=value;if(this.PropertyChanged!=null){

this.PropertyChanged.Invoke(this,newPropertyChangedEventArgs("MyColorExam"));}}}}四、任務(wù)實施：5、將自定義類MyCommand的對象綁定在Rectangle上。代碼如下：MyColor

myColor=newMyColor();publicMainWindow(){InitializeComponent();Bindingbind=newBinding();

bind.Source=myColor;

bind.Path=newPropertyPath("MyColorExam");

BindingOperations.SetBinding(this.Preview