WPF中的資料模板用法介紹
資料模板常用在3種類型的控制元件,下圖形式:
- 1.Grid這種列表表格中修改Cell的資料格式,CellTemplate可以修改單元格的展示資料的方式。
- 2.針對列表型別的控制元件,例如樹形控制元件,下拉列表,列表控制元件,可以修改其中的ItemTemplate。
- 3.修改ContentTemplate,例UserControl控制元件的資料展現形式。
CellTemplate 模板
下面用一個例子,來演示CellTemplate使用。例子實現一個DataGrid 展示一個普通的資料標,同時新增一列CellTemplate新增兩個自定義的按鈕,如下圖所示。
<DataGrid Name="gd" AutoGenerateColumns="False" CanUserSortColumns="True" CanUserAddRows="False"> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding UserName}" Width="100" Header="學生姓名"/> <DataGridTextColumn Binding="{Binding ClassName}" Width="100" Header="班級名稱"/> <DataGridTextColumn Binding="{Binding Address}" Width="200" Header="地址"/> <DataGridTemplateColumn Header="操作" Width="100" > <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"> <Button Content="編輯"/> <Button MargiAFbUIIn="8 0 0 0" Content="刪除" /> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>
完成操作,然後後臺http://www.cppcns.com進行該DataGrid進行繫結資料,查詢繫結後的效果。
List<Student> students = new List<Student>(); students.Add(new Student() { UserName = "小王",ClassName = "高二三班",Address = "廣州市" }); students.Add(new Student() { UserName = "小李",ClassName = "高三六班",Address = "清遠市" }); students.Add(new Student() { UserName = "小張",ClassName = "高一一班",Address = "深圳市" }); students.Add(new Student() { UserName = "小黑",ClassName = "高一三班",Address = "贛州市" }); gd.ItemsSource = students;
最終的效果,在資料的表格最後一列,將會在一列中分別生成 兩個普通按鈕。
ItemTemplate
在列表的控制元件中,常常會出現一些需求,類似在下拉控制元件或樹控制元件中新增一個 CheckBox選擇框,一個圖示或圖片,這個時候,我們就可以利用自定義的DataTemplate 來實現這個功能,
接下來,用一個示例來簡單演示其功能,同樣,該例子演示利用 ListBox 和 ComboBox來繫結一個 顏色程式碼列表,同時展示其顏色。
<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>
上面的程式碼中,定義了一個DataTemplate,頂一個 長寬10px的border用於顯示顏色程式碼,繫結到Border背景顏色上,定義了一個TextBlock用於展示顏色的程式碼。
下面為後臺的繫結程式碼
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;
最終的測試效果如下所客棧示:
ItemsControl
定義ItemsControl 主要分兩個步驟:
- 1.設定ItemsPanel容器,用於容納列表的最外層容器
- 2.定義子項的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>
上面程式碼中,定義了一個WarpPanel 容器為ItemControl的 最外層容器,子項資料模板則綁定了一個按鈕,後臺程式碼繫結幾條資料,檢視其效果: 橫排排列五個按鈕,內容分別是 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 =www.cppcns.com "3" }); tests.Add(new Test() { Code = "4" }); tests.Add(new Test() { Code = "6" }); ic.ItemsSource = tests;
檢視ItemsControl視覺化樹的結構組成?
剖析該結構,可以看到,紫色的1處,為最外層的WrapPanel容器,用於容納排列按鈕,由於該示例設定了 Orientation="Horizontal",所以按鈕則按水平排列,再看 橘色 2處,可以看見子項外層由一個內容呈現包括著,內容為一個按鈕,由於繫結搞得資料是5個,所以分別生成了內容為1~6的5個按鈕。
說明: 那是不是以為則ItemsPanel 放置任何元素都行? 很明顯是不行的。 ItemsPanel的容器需要滿足一個條件,則是屬於Panel族的元素,否則會提示以下錯誤:
關於每種元素的分類可以看關於控制元件介紹的文章: https://www.jb51.net/article/236066.htm
ContentTemplate
長話短說,這個東西用的太少了,詳細的可以搜尋一下相關的使用資料。
本章測試程式碼下載
到此這篇關於WPF中的資料模板用法介紹的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支援我們。