WPF數據模板(7)

時間 2020-06-15

標籤 wpf 數據模板简体版

原文原文鏈接

數據模板經常使用在3種類型的控件, 下圖形式:
html

1.Grid這種列表表格中修改Cell的數據格式, CellTemplate能夠修改單元格的展現數據的方式。
2.針對列表類型的控件, 例如樹形控件，下拉列表，列表控件, 能夠修改其中的ItemTemplate。
3.修改ContentTemplate, 例UserControl控件的數據展示形式。

CellTemplate 模板

下面用一個例子, 來演示CellTemplate使用。例子實現一個DataGrid 展現一個普通的數據標, 同時新增一列CellTemplate添加兩個自定義的按鈕, 以下圖所示。git

<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;

最終的效果, 在數據的表格最後一列, 將會在一列中分別生成兩個普通按鈕。
code

ItemTemplate

在列表的控件中, 經常會出現一些需求, 相似在下拉控件或樹控件中添加一個 CheckBox選擇框, 一個圖標或圖片, 這個時候, 咱們就能夠利用自定義的DataTemplate 來實現這個功能,
接下來, 用一個示例來簡單演示其功能, 一樣, 該例子演示利用 ListBox 和 ComboBox來綁定一個顏色代碼列表, 同時展現其顏色。htm

<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用於展現顏色的代碼。
下面爲後臺的綁定代碼blog

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.定義子項的DataTemplateget

<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.it

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個按鈕。io