如何设置datatable列的宽度以及如何在某些条件下设置datatable列的颜色

Question

IN xaml.cs file(WPF Application) I have created a DataTable with 3 columns Wanted to set the second column's width in xaml.cs only. Also, want to set the second columns first row background color to blue(only for the cell which is in first row and 2nd column).

Have created 3 columns as : DataTable dt= new DataTable(); dt.Columns.Add(new DataColumn("ABC"); Similarly, have added 2 more columns.

Want to set the second columns width

Answer 1

I am not fairly certain, if this is what you are looking for, but it is what I would do

First: let's say you have created a basic DataTable and filled it with some values, like this:

        DataTable dt = new DataTable();
        dt.Columns.Add("Key", typeof(int));
        dt.Columns.Add("Material", typeof(string));
        dt.Columns.Add("Price per Kilo", typeof(int));

        dt.Rows.Add(1, "CobbleStone", 34);
        dt.Rows.Add(2, "Wooden Planks", 12);
        dt.Rows.Add(3, "Iron Ingots", 56);

which looks like this in the debugger:

Second: Get some VisualElement to display your Data. I'd suggest using a DataGrid for. So go your your MainWindows.xaml and add a DataGrid to your Grid with 3 DataGridTextColumns like this:

    <DataGrid>
    </DataGrid>

Since we want to add custiom properties to our Columns, we have to add AutoGenerateColumns="False" to our DataGrid, if we don't the DataGrid will automatically generate its columns based on its ItemsSource. Since we won't get any autogenerated Columns now, we also have to add 3 Columns resembling the 3 columns from our DataTable:

    <DataGrid AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Key" />
            <DataGridTextColumn Header="Material" />
            <DataGridTextColumn Header="Price per Kilo" />
        </DataGrid.Columns>
    </DataGrid>

Third: Next we have to set the ItemsSource of our DataGrid . Unfortunately a DataGrid can't process a DataTable , so we first have to convert our DataTable into something the DataGrid can read. Let's generate a new Class for this and call it MaterialModel , which looks like this:

using System.ComponentModel;
using System.Runtime.CompilerServices;

class Model : INotifyPropertyChanged
{

    private int m_Key;
    public int Key
    {
        get
        {
            return m_Key;
        }
        set
        {
            m_Key = value;
            OnPropertyChanged("Key");
        }
    }


    private string  m_Name;
    public string  Name
    {
        get
        {
            return m_Name;
        }
        set
        {
            m_Name = value;
            OnPropertyChanged("Name");
        }
    }
    private int m_Price;
    public int Price
    {
        get
        {
            return m_Price;
        }
        set
        {
            m_Price = value;
            OnPropertyChanged("Price");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

It has Properties and a PropertyChangedEventHandler, which will notify your VisualElement when the Property changes.

Fourth: The DataGrid doesn't accept DataTables , but it accepts Lists and ObserableCollections . Use a List , if you don't want to ever add/change your items at runtime. I'll use an ObserableCollection , which neeeds using System.Collections.ObjectModel; to work.

Create a Property of your List and add a PropertyChangedEventHandler to MainWindow.

    public partial class MainWindow : Window
{

    private ObservableCollection<MaterialModel> m_MaterialList;
    public ObservableCollection<MaterialModel> MaterialList
    {
        get
        {
            return m_MaterialList;
        }
        set
        {
            m_MaterialList = value;
            OnPropertyChanged("MaterialList");
        }
    }

    public MainWindow()
    {
        // [...]
    }



    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

The next step would be to convert your DataTable into a ObservableCollection , so iterate through your DataTable and Convert each Row to one of your Models, like this:

        MaterialList = new ObservableCollection<MaterialModel>();
        foreach(DataRow row in dt.Rows)
        {
            MaterialModel model = new MaterialModel
            {
                Key = int.Parse(row["Key"].ToString()),
                Name = row["Material"].ToString(),
                Price = int.Parse(row["Price per Kilo"].ToString()),
            };
            MaterialList.Add(model);
        }

Fivth: Your List is filled with Models, the next step would be to tell your DataGrid how to use your List. First, bind your List to the ItemsSource auf your DataGrid , then bind each DataGridTextColumn to one of the Properties in your MaterialModel, like this:

        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding MaterialList}">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Key" Binding="{Binding Key}" />
            <DataGridTextColumn Header="Material" Binding="{Binding Name}" />
            <DataGridTextColumn Header="Price per Kilo" Binding="{Binding Price}" />
        </DataGrid.Columns>
    </DataGrid>

and you'll see the DataGrid works:

Sixth: The last step is to actually set the properties of your columns, which is pretty easy, your Requirements would look something like this:

<DataGrid AutoGenerateColumns="False" ItemsSource="{Binding MaterialList}">
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="Key" >
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBox Text="{Binding Key}" Background="LightBlue"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn Header="Material" Binding="{Binding Name}" Width="300" />
            <DataGridTextColumn Header="Price per Kilo" Binding="{Binding Price}"  />
        </DataGrid.Columns>
    </DataGrid>

I haven't found a way to create a DataGrid completely in Code behind as you wanted, but this would be cosnidered bad practice anyway. WPF is designed to use this connection between xaml und c#.

If you want to manage your column properties in c# anyways, this would be a proper way to do it:

in your MainWindow.xaml.cs:

        private double m_SecondColumnWidth;
    public double SecondColumnWidth
    {
        get
        {
            return m_SecondColumnWidth;
        }
        set
        {
            m_SecondColumnWidth = value;
            OnPropertyChanged("SecondColumnWidth");
        }
    }

   public MainWindow()
    {

        SecondColumnWidth = 300;     
   }

XAML:

    <!-- right beneath your Grid -->
    <Grid.Resources>
        <local:ViewModel x:Key="viewModel" />
    </Grid.Resources>

   <DataGridTextColumn Header="Material" Binding="{Binding Name}" Width="{Binding Source={StaticResource viewModel}, Path=SecondColumnWidth}" />

This isn't exactly what you wanted, but I hope it helps any way.