WPF Table Column Sizes

Question

I'm rendering a Table in a WPF FlowDocument using code-behind. But, I've been unable to find an example that shows how to make the table use only the space needed based on content. Instead the table takes up all available width, which I don't want, nor do I want to have to specify a exact pixel sizes.

I'm clearly missing something simple, anyone see it?

var fd = new FlowDocument();

Table t = new Table();

t.BorderBrush = Brushes.Black;
t.BorderThickness = new Thickness(2);

// I thought this would do what I wanted...
t.Columns.Add(new TableColumn() { Width = GridLength.Auto });
t.Columns.Add(new TableCOlumn() { Width = GridLength.Auto });

TableRowGroup trg = new TableRowGroup();

TableRow currentRow = new TableRow();
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("ABC"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("XYZ"))));
trg.Rows.Add(currentRow);

currentRow = new TableRow();
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("123"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("789"))));
trg.Rows.Add(currentRow);

t.RowGroups.Add(trg);

fd.Blocks.Add(t);

Answer 1

I do not think this is possible... the only hacky workaround is to use the BlockUIContainer and a real grid!

var fd = new FlowDocument();

Grid g = new Grid();

g.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
g.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });

g.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
g.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

var t1 = new TextBlock() { Text = "ABC", Margin = new Thickness(5,3,5,3) };
t1.SetValue(Grid.ColumnProperty, 0);
t1.SetValue(Grid.RowProperty, 0);
g.Children.Add(t1);

var t2 = new TextBlock() { Text = "XYZ", Margin = new Thickness(5, 3, 5, 3) };
t2.SetValue(Grid.ColumnProperty, 1);
t2.SetValue(Grid.RowProperty, 0);
g.Children.Add(t2);

var t3 = new TextBlock() { Text = "123", Margin = new Thickness(5, 3, 5, 3) };
t3.SetValue(Grid.ColumnProperty, 0);
t3.SetValue(Grid.RowProperty, 1);
g.Children.Add(t3);

var t4 = new TextBlock() { Text = "789", Margin = new Thickness(5, 3, 5, 3) };
t4.SetValue(Grid.ColumnProperty, 1);
t4.SetValue(Grid.RowProperty, 1);
g.Children.Add(t4);

fd.Blocks.Add(new BlockUIContainer(g));

Answer 2

try TableCell.ColoumnSpan and TableCell.RowSpan

Answer 3

I know the question was asked 9 years ago, but I found out an alternate way to do this without using a BlockUIContainer which quite frankly is a pain when serializing the FlowDocument or when the user is just editing the document in a RichTextBox.

Add a PreviewMouseMove and PreviewMouseDown handler to every single table cells. In PreviewMouseMove change the cursor to SizeWE whenever adjacent to the cell border. In PreviewMouseDown capture the mouse using the RichTextBox as the source.

Add a PreviewMouseMove and PreviewMouseUp handler to the RichTextBox. In PreviewMouseMove resize the table column based on the calculated horizontal delta movement. In PreviewMouseUp release the mouse.

The tricky part is to figure where the cell borders are because there's no way out of the box to just get the cell position or width. So you have to approximate where they are by doing the sum of the PagePadding, Table Padding and column widths.