天天看點

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

listview采用垂直堆疊得方式顯示資料,而gridview則采用水準堆疊得方式。

長相的話嘛,它們都差不多。

當然,也可以在背景代碼上添加。我隻是為了将它們放在一起比較而已,這些代碼堆一起肯定是很醜的。

如果隻是像上面這樣來添加内容會不會比較麻煩呢,我們也可以把這些item 1、item 2之類的全部放在list中。

這樣一來所顯示的listview就是兩行,非常簡陋,完全不能夠滿足要求。那麼我們可以用它的itemtemplate屬性來再裡面添加一些東西,如下所示,我們可以在grid中寫一個image綁定頭像,用textblock綁定使用者的id,再來一個textblock綁定使用者的消息,還可以來寫邊框呀什麼的。而這些亂七八糟的binding之類的,以後我們也會一起講的哦,現在隻要它們是資料綁定就好。

還可以像下面這樣哦,通過wrapgrid來決定這些item的擺放方式。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

當然啦,對于listview和gridview而言,知道使用者選擇了哪一項是很重要的。selectionmode屬性決定了listview和gridview的選擇模式:單個、多個、無、擴充。

下面這個函數将選擇的項給了selecteditems啦。我們還可以通過isitemclickenabled來啟用listview和gridview的點選事件,但是務必要注意将selectionmode設定為none。

本文承接“為listview和gridview添加資料”。

在上一節中我們已經了解了怎樣将資料綁定到listview或gridview,但既然要用到這兩個控件往往是因為資料繁多,那麼幾乎就不可避免的要讓其能夠分組。我們所綁定的資料源可能是項清單,其中的每個項甚至還有其自己的項,那麼問題就來了。

一時不會也想不出什麼宏偉的例子,就做一個簡單的鬧鐘的時間表的listview和gridview吧。那麼先在項目中添加一個類,最好在shared下。内容都是很簡易的,鬧鐘的标題、時間、備注等,為了增加一級目錄就加了一個alarmmode,就算作學習和生活吧,學習生活兩不誤……

首先,先來定義一個全局的時間,然後在頁面加載時加載兩個函數(将在下一步定義)。

一大波資料正在靠近!

這些資料都是亂七八糟啦,大家湊合着看。這是兩個函數,資料我都是用list<>來定義的,将資料通過add函數添加到listalarm和listalarmmode中即可。最後再從listalarm中根據alarmmode挑出資料到alasetting,同時還要根據key值進行排序最後選出并連接配接到collectionvsalarm的source屬性中。這個是需要在mainpage.xaml中定義的哦,就像

然後我們還需要建立一個listgridgroupstyle類來繼承groupstyleselector,重載它的selectgroupstylecore方法,并且傳回listgridgroupstyleresource資源,這個資源在部落格後文中有定義,其定義在app.xaml中。相應的代碼如下咯:

方法重載好之後就需要在前面的usercontrol.resources中加上以下這條代碼啦。

然後我們來一系列的基本樣式到app.xaml中就好啦,關于資源檔案的使用我們在後面會系統的來學習。這裡的datatemplate和groupstyle都在資源字典中,前者是template模闆,後者是style風格。内容的排版大家都随意啦,記得設定好key值。

那麼這些各種資源都定義好了之後就在mainpage.xaml把下面這些敲進去。各種資源的調用在這裡尤其需要注意,其實對于稍微複雜一丁點的程式而言,名稱就已經變得讓人崩潰了。是以擁有一個良好的命名習慣很重要。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

我這寫的真是太醜了哎,做産品的時候可得好好調調了。

相信用過windows phone或者windows 8/8.1/10的朋友對下面這張截圖肯定不陌生。這就是通過semanticzoom來實作的,當資料過多時,這種控件尤其适用。它有一個放大視圖zoomedinview和一個縮小試圖zoomedoutview,前者主要用來顯示目前頁面的詳細資訊,後者則緻力于快速導航。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

那麼我就自己來動手實踐咯,首先我們在xaml中添加大緻的界面,就像畫畫要先畫輪廓一樣。

然後分别在這兩個視圖中添加你想要加入的東西。這裡的核心就是,zoomedoutview和zoomedinview都是使用的同一個collectionviewsource對象作為自己的資料集的。而這個屬性我們在“為listview和gridview分組”談到過。

我們先把背景代碼寫好,我就像一篇那樣裝模作樣寫一個類吧。

然後用一個函數來添加一大堆資料……一大堆資料。

因為我們最後要把放大視圖變成縮小視圖,記得縮小視圖上面有一些abcd之類的字母麼,這裡我們用的是時間,就分成中午晚上等好啦。就通過下面這樣的一個函數來搞定。其用了一個鍵值對,用time作為參數。後面再将這些資料篩選出來,綁定到新添加的collectionviewsource中。至于gridview1和gridview2是即将添加到xaml中,這裡可以先不填,一回再補上。

我們先來寫主視圖(也就是放大視圖)。

相信大家都能看得懂,另外稍後我會在截圖中添加一些注釋的哦。然後是縮小視圖。

那麼代碼就到這裡為止了,接下來自然就是截圖了。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器
Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

(這種圖檔如果看不清的話可以儲存到電腦上再看。)

想了解字型相關的資訊,可以看第九章的“使用更多字型”。

相比于理論,我更傾向于從實踐中開始部落格,尤其是對于資料綁定。那麼,我們先來看看幾個簡單的例子。

1.資料綁定到textbox

我們依舊使用前面的鬧鐘類來開始。在下面的代碼中,我們有屬性、構造函數,還有一個tostring()方法的重載。之是以重載這個方法是因為我們想在最後綁定的時候,這三個屬性能夠在textbox上顯示得更加工整。

接下來再在xaml中添加textbox控件如下,因為textbox此時是用作顯示而非輸入,是以建議設定其的隻讀屬性。資料綁定的核心就是text屬性中的那麼一個binding關鍵字。

但是光這樣還不夠,我們還需要在背景代碼中将資料綁定到textbox1的datacontext(資料上下文)中。

相信大家并不為覺得這個很難,相反我在學資料綁定的時候一上來就是一大堆理論,以至于我對資料一詞有了陰影——是以我學資料結構非常痛苦。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

2.資料綁定到combobox

才儲存一個鬧鐘沒太大意思,我們多來幾個。

但是……

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

很顯然我們用了observablecollection< t >類,它為資料綁定提供了一個集合,這是因為它實作了inotifypropertychanged和inotifycollectionchanged接口。顧名思義,當屬性改變時,它可以通知它所綁定的控件,并且如果你希望該空間能夠同步更新,則将用于綁定的對象也實作inotifypropertychanged接口。這個類好歸好,但相對于textbox而言算有些高端了,以至于它無法顯示出來。但是我們可以用combobox來代替它,我們的類并不需要修改,前面的usefulalarm執行個體化也都不用改,隻需要将textbox1改成combobox1即可。以下是新的combobox代碼。

在圖示中我們也容易發現textbox和combobox兩個控件的width屬性的應用差別。在textbox中,我們将資料綁定到text中;而在combobox中,我們則是将資料綁定到itemssource中,簡單的說就是combobox拿來所有的資料,再将它們分成小的細節發給它的子對象,這些子對象都在combobox的datatemplate(資料容器)中。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

在這裡我們并沒有用到前面所重載的tostring()函數,因為我們已經分别将title、description、alarmtime綁定到相應的textbox控件了。那圖示中又為什麼這些資料都是一行一行的表示呢,這都是布局控件stackpanel的功勞,全靠它的orientation屬性。如果将這個屬性設定成horizontal呢,那标題、描述已經時間就是全排在一行了。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

3.資料綁定到listbox

聽說listbox和combobox很類似哦,它們都是box……xbox呀。部落客我有點懶,那可不可以直接将combobox的名字改成listbox就直接運作呢,答案是可以哦!那麼差別到底在哪裡呢?看看這張圖就知道啦。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

咦?怎麼隻有一條鬧鐘了?别驚慌……拖動右邊的滾動條就可以檢視到全部的鬧鐘咯。我真的隻把combobox改成listbox還有相應的name屬性(包括背景代碼中的名字哦),以下就是完整的代碼啦,我會騙你?

4.資料綁定到listview

看了前面的代碼相信我沒有騙你吧,童鞋們看到listbox有沒有想到listview呢?我要是想說還是和前面一樣隻用改名字等就可以用listview,你還是不信麼?

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

當然了,還是用右邊的滾動條來下拉以檢視所有的資料。不過listview君的最佳姿勢不是這樣哦,将height改為600才是呢。看下圖——這才是高大上的listview君嘛!

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

好了不玩了,gridview也是可以這樣弄得,不信你試試。

1.我們為什麼要用資料綁定

很顯然,我們不可能把所有的資料全部固定在特定的控件上。比如,遊戲的積分、設定的鬧鐘、天氣預報甚至的通訊類的消息,它們都并非是一成不變的。但是也并非所有的控件都需要綁定,比如你的app的名字、發送消息時所用的發送按鈕上面的文本等。

2.那資料和ui之間又有哪些關系呢

首先我們得明确,資料的顯示和其背景的管理是不一樣的。資料與ui綁定之後,我們的資料就可以在這兩者之間進行溝通,如果資料發生變化時,綁定到資料的ui則會自動将相應的屬性進行調整,不僅僅是前面用到的text屬性,還有fontsize、width、foreground、image屬性都可以。

3.資料綁定到底是綁定什麼

首先,我們得有綁定源,這些就是我們需要綁定的資料,沒有資料,即使你綁定了,它也顯示不出來。

其次,我們還需要綁定目标,也就是framework類的dependencyproperty屬性,說得白話文點就是将資料綁定到ui的相應屬性上。

最後,我們還需要一個binding對象,它就像是搬運工,沒有它,資料也是無法動彈的。它能夠幫助我們将資料從資料源移動到綁定目标,并且将綁定目标的相應消息通知給綁定源。它還有一些巧妙的工具,能夠将綁定源的資料加工成特定的格式。

4.綁定源有哪些

所有的公共語言運作時對象,我們前面用的alarm類就是這種對象,另外ui元素也是哦。

5.聽說有的搬運工隻能将資料源的資料一次性搬到綁定目标後就不再搬了,而有的搬運工則會在資料修改後再搬一次,甚至還有的能夠在綁定目标更改後再将資料搬回到資料源

onetime綁定:這個搬運工的工作就是第一種,它隻負責在建立時将源資料更新到綁定目标。

oneway綁定:這是系統預設的搬運工,它是第二種,負責在建立時以及源資料發生更改時更新綁定目标。

twoway綁定:這個搬運工則是第三種,它能夠在綁定源和綁定目标的一邊發生更改時同時更新綁定源和綁定目标。但它在一種時候卻會偷懶,那就是對于textbox.text每次點選之後,它就不會将這個text屬性的更改更新到綁定源。不過如果碰到boss,它也隻能繼續搬了。那就是将binding.updatesourcetrigger設定成propertychanged。而預設情況下,隻有textbox失去焦點時才會去更新。

以下分别是oneway和twoway的例子:

拖動滑動條,就可以看到在textbox中顯示它的值的變化了。如果希望它隻變化一次,那就将代碼中的oneway改成onetime即可。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

如下圖所示,點選item 1後textbox則會顯示相應的item 1,将textbox中的item 1修改為item 5後再listbox中也自動修改成了item5。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器
Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

簡單示例:foreground的資料綁定

前面已經說到了foreground也可以綁定,想不想試試呢。我們現在textbox中寫一個textbox,然後在背景代碼中添加一個綁定就可以了。這個和前面的比較簡單,這裡隻是用來引出後面的東東哦

1.silder綁定到textblock,不使用更改通知

首先定義一個簡單的類bindingslider,同時在xaml中作如下定義。

雖然這裡隻是用到了oneway傳遞,但還是需要使用twoway。因為在這裡oneway是指從bindingslider類的slidervalue屬性單向傳遞到slider控件的value屬性。但我們需要的則是slider控件的value屬性單向傳遞到bindingslider類的slidervalue屬性,是以才得使用twoway方式。

首先執行個體化bindingslider類,再在背景代碼中獎bindingslider對象綁定到slider1的資料上下文。最後通過click事件來将bindingslider對象的slidervalue屬性傳遞給textblock控件的text屬性。

這裡的效果就是,拖動slider但是textblock不會有變化,而需要button來不斷的更改textblock的text。如果想要textblock的text能夠根據slider實時的更改,這就需要”更改通知“了。

2.silder綁定到textblock,使用更改通知

既然要使用通知更改的技術,那就可以在xaml代碼中将button控件删除掉了,包括背景代碼中的click事件。

緊接着來修改bindingslider類,首先得使用inotifypropertychanged接口。這個接口有propertychanged事件,而這個事件則會告知綁定目标綁定源已經發生修改,這樣綁定目标也會實時的進行更改。在新的set中,我們将slidervalue值傳遞到notifypropertychanged中。

最後我們還需要将bindingslider對象綁定到textblock的資料上下文。

這樣一來就全部更改完成了,試試就會發現textblock的text會根據slider的拖動而實時修改了。

有時候預設的輸出方式不能滿足我們的需要,比如前面的oneway示例,可能我們需要的是在textbox中顯示“開始加載“、”加載一半了“、”很快就加載完了“以及”已經加載好“等,甚至還可以讓其能夠轉換成英文哦。

那麼首先建立一個類slidervalueconverter.cs,然後實作ivalueconverter接口。然後按自己的需要寫它的converter方法即可。

最後還需要在xaml中添加如下代碼哦,值轉換器converter所使用的靜态資源已經在

以下是slider的value取不同值時textblock的不同顯示。

Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器
Windows App開發之集合控件與資料綁定為ListView和GridView添加資料為ListView和GridViewt添加分組縮放視圖SemanticZoom資料綁定介紹更改通知值轉換器

這裡僅僅是一個比較簡單的示例,在項目産品中往往有資料綁定的地方都會有值轉換器的,就像c++中經常重載ostream一樣。