Grid table in WPF

Question

I need to create a grid. It must be editable.
And I have to set the number of rows and columns.
eg

mygrid.RowCount = 3; mygrid.ColumnCount = 3; 

Here's how it should look:

How is a BIND 2D array for a DataGrid?

Answer 1

You can use the WPF DataGrid control. It displays a grid of cells that correspond to a collection of objects (rows) containing properties (columns). You need to provide a data warehouse - a set of objects. The number of objects in the collection (collection counter) will determine the number of rows in the grid. DataGrid supports data editing in the user interface.

This example defines three columns and associates them with the A, B, and C properties of the data object.

 <DataGrid AutoGenerateColumns="False" Height="200" HorizontalAlignment="Left" Name="dataGrid1" VerticalAlignment="Top" Width="200"> <DataGrid.Columns > <DataGridTextColumn Binding="{Binding Path=A}" MinWidth="50" /> <DataGridTextColumn Binding="{Binding Path=B}" MinWidth="50" /> <DataGridTextColumn Binding="{Binding Path=C}" MinWidth="50" /> </DataGrid.Columns> </DataGrid> 

You need to assign (in code or using data binding) a collection of objects with these properties to the ItemsSource DataGrid property, like to any other ItemsControl element. Something like that:

 public partial class MainWindow: Window { public class DataObject { public int A { get; set; } public int B { get; set; } public int C { get; set; } } public MainWindow() { InitializeComponent(); var list = new ObservableCollection<DataObject>(); list.Add(new DataObject() { A = 6, B = 7, C = 5 }); list.Add(new DataObject() { A = 5, B = 8, C = 4 }); list.Add(new DataObject() { A = 4, B = 3, C = 0 }); this.dataGrid1.ItemsSource = list; } 

And the result will look like this: when editing the central cell:

Side Note: The WPF Grid class is for layout only. It does not support data editing support.

Answer 2

Here's a general way to create an ItemsControl that uses a Grid to place its items. In this example (which uses an XML data source), an ItemsSource is a collection of items with the Row , Column and Data parameters.

Note the use of ItemContainerStyle . This is necessary here because in order to control the Grid order to use the attached properties Grid.Row and Grid.Column these properties must be attached to objects inserted into the grid - if you try to set them on the TextBox that the ItemsTemplate generated, the grid will not see them, because that she is looking at the generated ContentPresenter , not the TextBox inside it.

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <XmlDataProvider x:Key="Data"> <x:XData> <Data xmlns=""> <Item Row="0" Column="0" Data="0,0"/> <Item Row="1" Column="1" Data="1,1"/> <Item Row="2" Column="1" Data="2,1"/> <Item Row="3" Column="2" Data="3,2"/> <Item Row="4" Column="4" Data="4,4"/> <Item Row="4" Column="3" Data="4,3"/> </Data> </x:XData> </XmlDataProvider> </Page.Resources> <DockPanel> <ItemsControl ItemsSource="{Binding Source={StaticResource Data}, XPath=/Data/Item}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="30"/> <RowDefinition Height="30"/> <RowDefinition Height="30"/> <RowDefinition Height="30"/> </Grid.RowDefinitions> </Grid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemContainerStyle> <Style TargetType="ContentPresenter"> <Setter Property="Grid.Row" Value="{Binding XPath=@Row }"/> <Setter Property="Grid.Column" Value="{Binding XPath=@Column }"/> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemTemplate> <DataTemplate> <TextBox Text="{Binding XPath=@Data , Mode=TwoWay}"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </DockPanel> </Page>