WPF--DataGrid控件使用

短命女 2024-03-27 14:35 98阅读 0赞

一、DataGrid简单使用  
DataGrid的使用其实跟TreeView类似，只不过后台组织的对象结构不同，DataGrid一般不需要递归结构，它绑定的数据源，一个属性就代表一个一列，理解不了没事，我直接上代码。

在这里插入图片描述

</TabItem>
                <TabItem Header="Message" />
                <TabItem Header=" " />
                <TabItem Header=" "/>
                <TabItem Header=" " />
                <TabItem Header=" " />
                <TabItem Header=" " />
            </TabControl>
        </Grid>
    
    
    	private string name;
    	/// <summary>
    	/// 名字
    	/// </summary>
    	public string Name
    	{
    		get => name;
    		set
    		{
    			name = value;
    			OnPropertyChanged();
    		}
    	}
    
    	private int number;
    	/// <summary>
    	/// 数量
    	/// </summary>
    	public int Number
    	{
    		get => number;
    		set
    		{
    			number = value;
    			OnPropertyChanged();
    		}
    	}
    
    	private double price;
    	/// <summary>
    	/// 价格
    	/// </summary>
    	public double Price
    	{
    		get => price;
    		set
    		{
    			price = value;
    			OnPropertyChanged();
    		}
    	}

三个属性，对应三列，老规矩，写界面和ViewModel（代码很简单，自己写咯）

public ObservableCollection<DataGridModel> DataGridModels { get; set; } = new ObservableCollection<DataGridModel>();
    
        public DataGridViewModel()
        {
            Create();
        }
    
        private void Create()
        {
            DataGridModels.Add(new DataGridModel()
            {
                Name = "苹果",
                Number = 5,
                Price = 1.5
            });
            DataGridModels.Add(new DataGridModel()
            {
                Name = "香蕉",
                Number = 2,
                Price = 15
            });
            DataGridModels.Add(new DataGridModel()
            {
                Name = "菠萝",
                Number = 3,
                Price = 10
            });
        }

写好直接运行，看看效果

一个对象，对应一行，一个属性，对应一列，跟TreeView每一级对应一个对象类似的，默认的样式有点。。。所以，接下来咱们美化它。

先美化列名成中文 ——>名称、数量、价格（DataGrid下有个Columns是包含所有的列，改列的样式一般也在这里面）

<DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Name}" Header="名称" />
            <DataGridTextColumn Binding="{Binding Number}" Header="数量" />
            <DataGridTextColumn Binding="{Binding Price}" Header="价格" />
        </DataGrid.Columns>

运行，

嘶，怎么显示两次了。。。 （小问题）看官网发现DataGrids默认自动创建列的，这也就是我们一开始只绑定数据源就显示列的原因，AutoGenerateColumns=“False”，把这属性设置为False就行了。

接着创建其他的列类型（checkbox、combobox、hyperlink）

（如果这是一直对最后一行进行双击后，再切换到其他行，会增加一行），直接设置CanUserAddRows=“False”，让它不能创建行。

OK，接下来设置隔行变色：AlternatingRowBackground=“LightBlue”（设置目标行的颜色），AlternationCount=“2”（设置变色行间隔，最小值为2）

最后是对行和单元格的样式设置

<DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Background" Value="SkyBlue" />
        </Style>
    </DataGrid.RowStyle>
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.CellStyle>

运行结果如图所示  
![在这里插入图片描述][4780458e70a942e9bffbae51fa049b1c.png]

[4780458e70a942e9bffbae51fa049b1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6050688a42c343158d9ee2b7a4d935b9.png