數據模板常用在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 Margin="8 0 0 0" Content="刪除" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
完成操作, 然后后台進行該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 = "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.cnblogs.com/zh7791/p/11372473.html
ContentTemplate
長話短說, 這個東西用的太少了, 詳細的可以搜索一下相關的使用資料。