WPF实现一个表格数据从cs获取动态渲染

  1. xaml代码
xml 复制代码
<Window x:Class="YourNamespace.MainWindow"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="MainWindow" Height="350" Width="525">  
    <Grid>  
        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Products}">  
           <DataGrid.Resources>
	         <!--设置表头样式-->
             <Style TargetType="{x:Type DataGridColumnHeader}">
                 <Setter Property="HorizontalContentAlignment" Value="Center"/>
                 <Setter Property="VerticalAlignment" Value="Center"/>
                 <Setter Property="FontSize" Value="16"/>
                 <Setter Property="Padding" Value="0 10"/>
             </Style>
             <!--设置行样式-->
             <Style x:Key="CenteredTextBlockStyle" TargetType="{x:Type TextBlock}">
                  <Setter Property="VerticalAlignment" Value="Center"/>
                  <Setter Property="HorizontalAlignment" Value="Center"/>
                  <Setter Property="FontSize" Value="16"/>
              </Style>
            </DataGrid.Resources>
	    	<DataGrid.Columns>  
		        <DataGridTextColumn Header="Id" Binding="{Binding Id}" />  
		        <!--设置超出自动换行并显示滚动条-->
		        <DataGridTemplateColumn Header="Name" Width="2*">
         <DataGridTemplateColumn.CellTemplate >
            <DataTemplate>
            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource CenteredTextBlockStyle}"/>
            </ScrollViewer>
            </DataTemplate>
          </DataGridTemplateColumn.CellTemplate>
          </DataGridTemplateColumn>
		  <DataGridTextColumn Header="Price" Binding="{Binding Price}" />  
		<DataGridTemplateColumn Header="操作" Width="100">
		  <!--设置表格内的一个按钮-->
        <DataGridTemplateColumn.CellTemplate>
         <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Button Content="编辑" Cursor="Hand" Click="editButton_Dianji" >
                    <Button.Resources>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="CornerRadius" Value="5"/>
                        </Style>
                    </Button.Resources>
                </Button>
            </StackPanel>
         </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
	    	</DataGrid.Columns>  
		</DataGrid>
    </Grid>  
</Window>

2.cs代码

csharp 复制代码
public ObservableCollection<Product> Products { get; set; }  
  
public MainWindow()  
{  
    InitializeComponent();  
    this.DataContext = this; // 设置数据上下文为当前窗口实例 
    // 初始化产品集合  
    Products = new ObservableCollection<Product>  
    {  
        new Product { Id = 1, Name = "Product 1", Price = 10.99M },  
        new Product { Id = 2, Name = "Product 2", Price = 20.99M }  
        // 添加更多产品...  
    };  
}
相关推荐
爷傲奈我何!2 分钟前
小程序中实现音频播放(原生 + uniapp)
前端·vue.js
Json_7 分钟前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
前端·uni-app·蓝牙
日升8 分钟前
手把手带你掌握Zustand:轻量级React状态管理利器
前端·react.js·状态机
Copy_Paste_Coder8 分钟前
35岁大龄码农,用cursor独立做副业经历分享
前端·程序员
jqq66610 分钟前
(二)「造轮子」我也写了个Vue3脚手架!(项目环境搭建)
前端·javascript·vue.js
Json_11 分钟前
vue2 + element-ui 开发网站拼图小游戏-前端项目
前端·vue.js·element
顾名思远义14 分钟前
VxeGRid树形表格编辑难点
前端·vue.js
逆袭的小黄鸭15 分钟前
单线程下的高效协作:JavaScript 事件循环机制详解
前端·javascript
0基础学习者16 分钟前
按键消抖(用状态机实现)
前端·笔记·fpga开发·verilog·fpga
zooKevin19 分钟前
前端实现docx格式word文件预览,可以兼容原生、vue2、以及uni-app 项目,详细步骤。
前端·uni-app·word·docx