WPF學習筆記 04 簡單的控制項和資料繫結

我們今天要學習如何使用簡單的wpf控制項。在本節中我們將通過乙個簡單的演示程式，向大家展示如何使用幾個常見且簡單的控制項，並且領略wpf的ui元素自由組合的思想。還要學習wpf的一項重要的特性——資料繫結，該功能將令資料呈現和處理變得輕鬆和有趣。不用擔心，編寫這些具有wpf特性的程式將比你想象中簡單！

首先，我們的這個演示程式要實現下面的目標：

ok，下面我們開始啦喔！

我們在visual studio 2008新建乙個wpf視窗專案，並開始調整我們的視窗（大小、標題等）。接著如下圖所示，我們從工具箱中拖放幾個控制項，上端的是textblock，下面是label和textbox。其中textblock是用來顯示文字的。textbox也有類似的功能，不過可以用來輸入和編輯文字。

大家可以適當調整他們的外觀，比如foreground（前景色），background（背景色），button的content（內容）屬性等。

為了程式設計的方便，我們在安放控制項的時候，都不要忘記都給他們改乙個好記的名字（在屬性欄的頂端，輸入name屬性）。label控制項的名字為lbinput，textbox控制項的名字為tbinput，textblock控制項的名字為tbkoutput，button控制項的名字為btnexit。

大家剛開始接觸wpf的時候，肯定會有點奇怪，label和textblock都可以用來顯示唯讀文字，那麼究竟label有什麼不同呢？label其實通常不是單獨出現的，label一般是他旁邊的控制項（本例中的textbox）的說明標識，最重要的是label可以利用快捷鍵使它的目標控制項取得焦點。這下明白啦嘛，label可以讓其他控制項得到快捷鍵的功能（即游標立刻移動到該控制項），方便使用者的操作。

為了使label控制項具有快捷鍵，我們還需要修改它的內容屬性。在它的content屬性裡面輸入「_input here: 」，其中「_」會成為後面的字母的下劃線，它的作用是使此字母成為快捷鍵。另外我們還需要定製究竟它為誰（什麼控制項）服務，我們還需要在xaml**中加入target屬性。xaml的label片段如下：

<
label 
horizontalalignment
="left" 
margin
="12,0,0,102" 
name
="lbinput" 
width
="84" 
height
="28" 
verticalalignment
="bottom" 
target
="">
_input here:
label
>

這樣我們在按下alt+i的時候，tbinput將會獲得焦點，不妨執行試試。

資料繫結是wpf中的重要功能，可以令某ui元素中的屬性與某物件的變數進行繫結，這樣當某一方發生改變時，可以立即更新到繫結的目標上。資料繫結為資料傳遞建立了一種強大而簡易的方式，為開發者省去了很多處理資料同步的程式**。如本例當中，我們演示資料繫結，令tboutput中的內容始終與tbinput中的內容同步，讓使用者輸入的內容可以立即顯示出來。

我們要在tbkoutput中把text屬性與tbinput的text屬性繫結起來，要在xaml中為tbkoutput中的text屬性新增繫結物件，**如下：

<
textblock 
height
="37" 
margin
="12,50,12,0" 
name
="tbkoutput" 
verticalalignment
="top" 
fontsize
="20" 
foreground
="white" 
background
="lightblue" 
text
=""/>

在**中，我們可以看到，text屬性中是乙個花括號包含的內容，這表示要顯示的是這個物件的資訊，而不是這些字元。在這個binding物件中elementname屬性指示需要繫結哪個控制項，path屬性指示需要繫結的屬性。在這裡完成了tbkoutput的text屬性與tbinput的text屬性的繫結。效果如下圖所示，實現了同步輸出：

不過這個效果實在太單調了，wpf又怎會這麼枯燥呢，我們可以完全定製tooltip。因為在wpf中，tooltip是乙個容器，不只是字串，這意味著你可以自由搭配，安放任何物件。其實在wpf中，很多控制項都有這樣功能，如button等，利用這種自由搭配的思想可以極大地豐富我們的程式。現在我們利用xaml**對tooltip進行改造，為其新增影象和文字格式。

首先，我們在vs中新增影象檔案到工程資料夾。在解決方案資源管理器中，右擊專案，選擇新增-現有項，選擇一些影象新增到專案中，如下圖所示。然後在屬性中更改複製到輸出目錄屬性為始終複製。

text="提示"

fontweight="bold"

fontsize="18"

textblock

text="請在這裡輸入你想顯示的內容"

foreground="#ff555555"

padding="6"

stackpanel

textbox.tooltip

textbox

關於stackpanelstackpanel是乙個容器，是乙個供控制項安放在上面的面板，是wpf諸多面板中最為常用的面板之一，它的最大特點就是，控制項按順序乙個挨著乙個排列，可以用orientation屬性控制其排列方向（垂直或者水平）。

執行一下，漂亮的效果出來了，我們同理可以為退出按鈕新增定製的tooltip。

最後，我們需要為退出按鈕新增要執行的**。方法很簡單，只要雙擊該按鈕，就會自動生成相應點選動作的方法。在這裡我們之需要新增關閉視窗的**就可以了，如下：

private
void btnexit_click(object sender, routedeventargs e)

這樣我們的程式就大功告成了。關於資料繫結的使用，我們以後還會進一步學習，畢竟這是wpf中必須掌握而且是解放勞動力的重要功能！

WPF學習筆記 04 簡單的控制項和資料繫結

WPF學習總結和記錄（二）內容控制項

WPF學習總結和記錄（四）Items控制項下

Redis的學習筆記04

WPF學習筆記 04 簡單的控制項和資料繫結

WPF學習總結和記錄（二）內容控制項

WPF學習總結和記錄（四）Items控制項下

Redis的學習筆記04

相關推薦