WPF4 数据模板

数据模板

数据模板常用在3种类型的控件, 下图形式:

1.Grid这种列表表格中修改Cell的数据格式, CellTemplate可以修改单元格的展示数据的方式。

2.针对列表类型的控件, 例如树形控件,下拉列表,列表控件, 可以修改其中的ItemTemplate。

3.修改ContentTemplate, 例UserControl控件的数据展现形式。

示例1:

定义一个ListBox

csharp 复制代码
<Grid>
    <ListBox x:Name="list"></ListBox>
</Grid>

点击查看代码,添加元素内容

csharp 复制代码
namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            for (int i = 0; i < 10; i++) 
            {
                list.Items.Add(new ListBoxItem()
                {
                    Content = new TextBlock()
                    {
                        Text = i.ToString()
                    }
                });
            }
        }
    }
}

运行结果:

添加色块

csharp 复制代码
    <Grid>
        <ListBox x:Name="list">
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Border Width="20" Height="20" Background="Red"/>
                    <TextBlock Margin="10,0" Text="red"/>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Border Width="20" Height="20" Background="Red"/>
                    <TextBlock Margin="10,0" Text="red"/>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Border Width="20" Height="20" Background="Red"/>
                    <TextBlock Margin="10,0" Text="red"/>
                </StackPanel>
            </ListBoxItem>
        </ListBox>
    </Grid>
</Window>

数据模板

我们希望定义一个数据模板,实现统一控制

csharp 复制代码
<Grid>
    <ListBox x:Name="list">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Border Width="20" Height="20" Background="Red"/>
                    <TextBlock Margin="10,0" Text="red"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

后台代码

csharp 复制代码
namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<int> test = new List<int>();

            for (int i = 0; i < 10; i++)
            {
                test.Add(i);
            }
            list.ItemsSource = test;   
        }
    }
}

运行结果

此时,所有生成的数据,都是使用的同一模板

绑定

csharp 复制代码
<Grid>
    <ListBox x:Name="list">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Border Width="20" Height="20" Background="{Binding Code}"/>
                    <TextBlock Margin="10,0" Text="{Binding Name}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

后台代码

csharp 复制代码
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        List<color> test = new List<color>(); 
        test.Add(new color() { Code = "#FFB6C1",Name = "浅粉红" }); 
        test.Add(new color() { Code = "#FFCOCB",Name ="粉红"}); 
        test.Add(new color() { Code = "#DC143C", Name = "深红(猩红)" }); 
        test.Add(new color() { Code = "#FFF0F5", Name = "淡紫红" }); 
        list.ItemsSource = test;
     
    }

    public class color 
    {
        public string Code { get; set; }

        public string Name { get; set; }
    }
}

运行结果

数据来驱动UI显示

示例2

csharp 复制代码
<Grid>
    <!--AutoGenerateColumns自动生成改为FALSE 防止有多余的列-->
    <DataGrid x:Name="grid" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Code}" Header="Code"/>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name"/>
            <DataGridTextColumn  Header="操作"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

后台代码

csharp 复制代码
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        List<color> test = new List<color>(); 
        test.Add(new color() { Code = "#FFB6C1",Name = "浅粉红" }); 
        test.Add(new color() { Code = "#FFCOCB",Name ="粉红"}); 
        test.Add(new color() { Code = "#DC143C",Name = "深红(猩红)" }); 
        test.Add(new color() { Code = "#FFF0F5",Name = "淡紫红" });
        grid.ItemsSource = test;
     
    }

    public class color 
    {
        public string Code { get; set; }

        public string Name { get; set; }
    }
}

运行结果

在列中 放 按钮的情况

csharp 复制代码
<Grid>
    <!--AutoGenerateColumns自动生成改为FALSE 防止有多余的列-->
    <DataGrid x:Name="grid" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Code}" Header="Code"/>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name"/>
            
            <!--添加数据模板-->
            <DataGridTemplateColumn Header="操作">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Border Width="10" Height="10" Background="{Binding Code}"/>
                            <TextBox Margin="10,0" Text="{Binding Name}"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

运行结果

添加按钮

csharp 复制代码
<Grid>
    <!--AutoGenerateColumns自动生成改为FALSE 防止有多余的列-->
    <DataGrid x:Name="grid" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Code}" Header="Code"/>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name"/>
            
            <!--添加数据模板-->
            <DataGridTemplateColumn Header="操作">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <!--只允许有一个容器,所以需要一个容器包装多个按钮-->
                        <StackPanel Orientation="Horizontal">
                            <Button Content="删除"/>
                            <Button Content="复制"/>
                            <Button Content="保存"/>
                        </StackPanel>
                        <!--<StackPanel>
                            <Border Width="10" Height="10" Background="{Binding Code}"/>
                            <TextBox Margin="10,0" Text="{Binding Name}"/>
                        </StackPanel>-->
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

运行结果

相关推荐
大飞pkz32 分钟前
【设计模式】C#反射实现抽象工厂模式
设计模式·c#·抽象工厂模式·c#反射·c#反射实现抽象工厂模式
唐青枫2 小时前
从入门到进阶:C#.NET Stopwatch 计时与性能测量全攻略
c#·.net
未来之窗软件服务12 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
1uther12 小时前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
阿幸软件杂货间13 小时前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
sali-tec14 小时前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
玉面小君14 小时前
从 WPF 到 Avalonia 的迁移系列实战篇6:Trigger、MultiTrigger、DataTrigger 的迁移
wpf·avalonia
Tiger_shl14 小时前
【层面一】C#语言基础和核心语法-02(反射/委托/事件)
开发语言·c#
mudtools18 小时前
.NET驾驭Word之力:COM组件二次开发全攻略之连接Word与创建你的第一个自动化文档
后端·c#
王维志19 小时前
LiteDB详解
数据库·后端·mongodb·sqlite·c#·json·database