WPF中的數(shù)據(jù)模板用法介紹
數(shù)據(jù)模板常用在3種類型的控件, 下圖形式:
- 1.Grid這種列表表格中修改Cell的數(shù)據(jù)格式, CellTemplate可以修改單元格的展示數(shù)據(jù)的方式。
- 2.針對(duì)列表類型的控件, 例如樹形控件,下拉列表,列表控件, 可以修改其中的ItemTemplate。
- 3.修改ContentTemplate, 例UserControl控件的數(shù)據(jù)展現(xiàn)形式。
CellTemplate 模板
下面用一個(gè)例子, 來演示CellTemplate使用。例子實(shí)現(xiàn)一個(gè)DataGrid 展示一個(gè)普通的數(shù)據(jù)標(biāo), 同時(shí)新增一列CellTemplate添加兩個(gè)自定義的按鈕, 如下圖所示。
<DataGrid Name="gd" AutoGenerateColumns="False" CanUserSortColumns="True" CanUserAddRows="False"> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding UserName}" Width="100" Header="學(xué)生姓名"/> <DataGridTextColumn Binding="{Binding ClassName}" Width="100" Header="班級(jí)名稱"/> <DataGridTextColumn Binding="{Binding Address}" Width="200" Header="地址"/> <DataGridTemplateColumn Header="操作" Width="100" > <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"> <Button Content="編輯"/> <Button Margin="8 0 0 0" Content="刪除" /> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>
完成操作, 然后后臺(tái)進(jìn)行該DataGrid進(jìn)行綁定數(shù)據(jù), 查詢綁定后的效果。
List<Student> students = new List<Student>(); students.Add(new Student() { UserName = "小王", ClassName = "高二三班", Address = "廣州市" }); students.Add(new Student() { UserName = "小李", ClassName = "高三六班", Address = "清遠(yuǎn)市" }); students.Add(new Student() { UserName = "小張", ClassName = "高一一班", Address = "深圳市" }); students.Add(new Student() { UserName = "小黑", ClassName = "高一三班", Address = "贛州市" }); gd.ItemsSource = students;
最終的效果, 在數(shù)據(jù)的表格最后一列, 將會(huì)在一列中分別生成 兩個(gè)普通按鈕。
ItemTemplate
在列表的控件中, 常常會(huì)出現(xiàn)一些需求, 類似在下拉控件或樹控件中添加一個(gè) CheckBox選擇框, 一個(gè)圖標(biāo)或圖片, 這個(gè)時(shí)候, 我們就可以利用自定義的DataTemplate 來實(shí)現(xiàn)這個(gè)功能,
接下來, 用一個(gè)示例來簡(jiǎn)單演示其功能, 同樣, 該例子演示利用 ListBox 和 ComboBox來綁定一個(gè) 顏色代碼列表, 同時(shí)展示其顏色。
<Window.Resources> <DataTemplate x:Key="comTemplate"> <StackPanel Orientation="Horizontal" Margin="5,0"> <Border Width="10" Height="10" Background="{Binding Code}"/> <TextBlock Text="{Binding Code}" Margin="5,0"/> </StackPanel> </DataTemplate> </Window.Resources> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <ComboBox Name="cob" Width="120" Height="30" ItemTemplate="{StaticResource comTemplate}"/> <ListBox Name="lib" Width="120" Height="100" Margin="5,0" ItemTemplate="{StaticResource comTemplate}"/> </StackPanel> </Grid>
上面的代碼中, 定義了一個(gè)DataTemplate , 頂一個(gè) 長寬10px的border用于顯示顏色代碼, 綁定到Border背景顏色上, 定義了一個(gè)TextBlock用于展示顏色的代碼。
下面為后臺(tái)的綁定代碼
List<Color> ColorList = new List<Color>(); ColorList.Add(new Color() { Code = "#FF8C00" }); ColorList.Add(new Color() { Code = "#FF7F50" }); ColorList.Add(new Color() { Code = "#FF6EB4" }); ColorList.Add(new Color() { Code = "#FF4500" }); ColorList.Add(new Color() { Code = "#FF3030" }); ColorList.Add(new Color() { Code = "#CD5B45" }); cob.ItemsSource = ColorList; lib.ItemsSource = ColorList;
最終的測(cè)試效果如下所示:
ItemsControl
定義ItemsControl 主要分兩個(gè)步驟:
- 1.設(shè)置ItemsPanel容器, 用于容納列表的最外層容器
- 2.定義子項(xiàng)的DataTemplate
<ItemsControl Name="ic"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Button Width="50" Height="50" Content="{Binding Code}"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>
上面代碼中, 定義了一個(gè)WarpPanel 容器為ItemControl的 最外層容器, 子項(xiàng)數(shù)據(jù)模板則綁定了一個(gè)按鈕, 后臺(tái)代碼綁定幾條數(shù)據(jù), 查看其效果: 橫排排列五個(gè)按鈕, 內(nèi)容分別是 1~6.
List<Test> tests = new List<Test>(); tests.Add(new Test() { Code = "1" }); tests.Add(new Test() { Code = "2" }); tests.Add(new Test() { Code = "3" }); tests.Add(new Test() { Code = "4" }); tests.Add(new Test() { Code = "6" }); ic.ItemsSource = tests;
查看ItemsControl可視化樹的結(jié)構(gòu)組成?
剖析該結(jié)構(gòu), 可以看到, 紫色的1處, 為最外層的WrapPanel容器, 用于容納排列按鈕, 由于該示例設(shè)置了 Orientation="Horizontal" , 所以按鈕則按水平排列, 再看 橘色 2處, 可以看見子項(xiàng)外層由一個(gè)內(nèi)容呈現(xiàn)包括著, 內(nèi)容為一個(gè)按鈕, 由于綁定搞得數(shù)據(jù)是5個(gè), 所以分別生成了內(nèi)容為1~6的5個(gè)按鈕。
說明: 那是不是以為則ItemsPanel 放置任何元素都行? 很明顯是不行的。 ItemsPanel的容器需要滿足一個(gè)條件, 則是屬于Panel族的元素, 否則會(huì)提示以下錯(cuò)誤:
關(guān)于每種元素的分類可以看關(guān)于控件介紹的文章: http://www.dbjr.com.cn/article/236066.htm
ContentTemplate
長話短說, 這個(gè)東西用的太少了, 詳細(xì)的可以搜索一下相關(guān)的使用資料。
到此這篇關(guān)于WPF中的數(shù)據(jù)模板用法介紹的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- C#?WPF數(shù)據(jù)綁定模板化操作的完整步驟
- WPF使用ValidationRules對(duì)MVVM架構(gòu)數(shù)據(jù)驗(yàn)證
- WPF實(shí)現(xiàn)數(shù)據(jù)綁定
- WPF PasswordBox進(jìn)行數(shù)據(jù)綁定方法
- C# WPF如何反射加載Geometry幾何圖形數(shù)據(jù)圖標(biāo)
- WPF簡(jiǎn)單的數(shù)據(jù)庫查詢實(shí)例
- C#中WPF ListView綁定數(shù)據(jù)的實(shí)例詳解
- wpf將表中數(shù)據(jù)顯示到datagrid示例
- 解析WPF綁定層次結(jié)構(gòu)數(shù)據(jù)的應(yīng)用詳解
- WPF的數(shù)據(jù)綁定詳細(xì)介紹
相關(guān)文章
WPF框架Prism中導(dǎo)航Navigation用法介紹
這篇文章介紹了WPF框架Prism中導(dǎo)航Navigation的用法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02ASP.NET?Core?MVC路由(Routing)的用法
這篇文章介紹了ASP.NET?Core?MVC路由(Routing)的用法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04ASP.NET中Application、Cookie、Session、Cache和ViewState
本文主要介紹Application、Cookie、Session、Cache和ViewState,并總結(jié)了在什么情況下使用他們,希望對(duì)大家有所幫助。2016-04-04ASP.NET處理HTTP請(qǐng)求的流程:IHttpModule、IHttpHandler與管道事件
這篇文章介紹了ASP.NET處理HTTP請(qǐng)求的流程:IHttpModule、IHttpHandler與管道事件,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05Visual Studio快速開發(fā)以及Visual Studio 2010新功能介紹
一直以來都在摸索著vb6.0的一些用法和語法,趁這次培訓(xùn)的機(jī)會(huì)正好整理Visual Studio的一些快速開發(fā)的技巧,還有一些vs2010的新功能收集和體會(huì),把培訓(xùn)的一些文檔性質(zhì)的記錄下來,希望對(duì)各位有用2011-12-12