淺談WPF本質中的數據和行為
WPF縮寫為Windows Presentation Foundation的縮寫,本文所要談的就是WPF本質中的數據和行為,希望通過本文能對大家了解WPF本質有所幫助。
如果自己來做一個UI框架,我們會首先關注哪些方面?我想UI框架主要處理的一定包括兩個主要層次的內容,一個是數據展現,另一個就是數據操作,所以UI框架必須能夠接收各種不同的數據并通過UI界面展現出來,然后可以通過控件行為來操作這些數據,也就是UI框架的數據(Data)和行為(Behavior)。
#T#
本篇從總體上講解一下WPF如何處理和操作Data,看完之后大家應該對WPF框架如何把數據轉變為展現界面有初步的認識,這也是WPF本質的核心設計之一。
數據(Data)以前的UI框架的控件對控件數據類型都有規定,按鈕上顯示的是文本或者加上一個圖片,下拉框顯示的都是字符串或者帶上一個object類型屬性的作為保存對象引用用。而WPF則不同,它缺省的數據類型為object,這就允許控件能夠操作任意類型的數據,這也是它靈活和強大的地方之一。
數據類型原始數據:字符串、布爾、整形等
列表數據:數組、列表等,集合中的內容可以是相同類型或者不同類型的數據
層級數據:樹、列表的列表或者圖等,具有層級關系的數據
組合數據:包含以上多種數據的數據,如用戶聯系方式包括電話、地址1、地址2、手機號等
但是如果是object類型,那WPF如何知道具體該如何顯示這些數據呢?這就要通過Templates、Presenters、Binding and Converters、Layout和Styles了。
模板(Templates)
控件模板(control template):控件模板定義一個控件的外觀,這個控件主要和UI相關,一般也不和Data有關。每個控件都有個一個缺省的控件模板。
- <ControlTemplate x:Key=”buttonTemplate”>
- <Grid>
- <Ellipse Width=”100” Height=”100”>
- <Ellipse.Fill>
- <LinearGradientBrush StartPoint=”0,0” EndPoint=”0,1”>
- <GradientStop Offset=”0” Color=”Blue”/>
- <GradientStop Offset=”1” Color=”Red”/>
- </LinearGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- <Ellipse Width=”80” Height=”80”>
- <Ellipse.Fill>
- <LinearGradientBrush StartPoint=”0,0” EndPoint=”0,1”>
- <GradientStop Offset=”0” Color=”White”/>
- <GradientStop Offset=”1” Color=”Transparent”/>
- </LinearGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- </Grid>
- </ControlTemplate>
數據模板(data template):數據模板負責定制任何一個.Net對象的外觀,這對于非UIElement控件非常重要,非UIElement控件的默認模板僅僅是一個TextBlock,其中包含了一個由ToString方法反會的字符串。
- <ListBox x:Name=”pictureBox” ItemsSource=”{Binding Source={StaticResource photos}}” …>
- <ListBox.ItemTemplate>
大家可以通過工具ShowMeTheTemplate 來查看一下現有控件的默認模板。
通過Templates講解,我們現在知道控件模板定義控件外觀,數據模板定義特定的數據如何顯示,那么現在如何將定義的數據顯示在控件外觀上顯示呢?那就需要content presenter了。每個控件都有一個默認的ContentPresenter用于顯示Content內容,我們稱這種控件為內容控件,ContentPresenter負責將ContentControl的Content屬性顯示出來,如以下代碼示例:
- <Grid>
- <Grid.Resources>
綁定(Binding) 和 轉換(Converters)
數據模板描述了數據顯示的外觀,我們如何使得這些外觀和數據關聯起來呢?這就是數據綁定(data binding)來做的事情。WPF的數據綁定是一個強大的功能,它允許單項和雙向的綁定,當對象更改時UI會自動刷新,當UI操作后數據也可以自動更改。
有時候數據的格式并不只是簡答的顯示,比如bool類型需要顯示成三態,可以通過一個轉換器來實現。
Binding和Converters代碼示例:網上很多這個資料,可以參考WPF Data Binding、Binding Converters
布局(Layout)經過前面的步驟,模板已經定義了,數據也有了,轉換器和綁定也觸發了,內容顯示也生成了,剩下最后一步就是布局(layout)。布局系統將確定前面生產的所有UI控件的大小和位置。在WPF中panel以及其繼承類負責提供layout功能。布局是一種遞歸的分兩個步驟進行的過程,第一步叫做檢測(measuer),第二步叫做排列(arrange)。
檢測:面板詢問其子元素到底需要多少空間,這里假設有足夠的控件。面板會重載FrameworkElement的MeasureOverride方法來實現這一步。
排列:在檢測步驟完成后,就該排列元素了。面板會告訴子元素它們將放在哪里,它們有多少空間可以用。面板會重載FramworkElement的ArrangeOverride方法來實現這一步驟。
樣式(Style)樣式是一種簡單的機制,通過它可以把屬性值和用戶界面元素分類開來,有點類似CSS與HTML的關系
以上內容可以表達為下圖:Person數據經過控件模板、數據模板以及樣式和布局,再加上數據綁定就可以展現數據了。
行為(Behavior)
把數據顯示出來只是做了一半工作,還有一半就是提供用戶方式與UI進行交互。下圖說明了輸入操作示意圖:
WPF控件支持鼠標、鍵盤和寫字板等輸入設備來與UI進行交互,還可以通過外部和內部時間進行操作,經過觸發后可以通過事件處理或者command機制來進行Action。
原文標題:WPF - 本質:數據和行為
鏈接:http://www.cnblogs.com/zhoujg/archive/2009/11/19/1605424.html