CODEWITHSUNDEEP
c#.netwpf
Tony
Tony

Reputation: 3638

WPF datagrid displaying string

What I'm trying to do is display a string, as a series of characters within a DataGrid. If you look at this example, hopefully it makes sense.

DataGrid layout

So, for the string 'Hello there!' what I'm trying to do is have the grid display look as close as possible to how it would look in a standard TextBlock.

However, no matter how small I make the cells, I cannot get them to align correctly, as there is always an unnatural spacing between the cells. I'm not sure what you actually call the space between cells either, padding, spacing?

Is there a way to have a DataGridCell fit its contents exactly, without any additional spacing on either side?

Upvotes: 0

Views: 391

Answers (2)

Pseudonymous
Pseudonymous

Reputation: 884

You'll have to fight the DataGrid a bit to do this but it is possible.

The first thing you want to do is to stop any screen space being reserved for the headers at all. You can do this by setting their Visibility property to Collapsed.

<Style TargetType="DataGridColumnHeader">
    <Setter Property="Visibility" Value="Collapsed" />
</Style>

If you're declaring columns explicitly you'll need to set their MinWidth value to 0 in the XAML otherwise, if they're being auto-generated, you'll need to loop them programmatically and set it there - I used the Loaded event. This default was set to 20.

private void StringRepresentationGrid_OnLoadedRepresentationGrid_OnLoaded(object sender, RoutedEventArgs e)
{
    foreach (var column in StringRepresentationGrid.Columns)
    {
        column.MinWidth = 0;
    }
}

Then you'll need to override the Template property of DataGridCell to something like the below. I've used a monospaced font to keep the layout regular.

<Style x:Key="CustomDataGridCellStyle" TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
    <Setter Property="TextBlock.TextAlignment" Value="Center"/>
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Border.BorderThickness" Value="0" />
    <Setter Property="TextBlock.FontFamily" Value="Consolas" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <TextBlock 
                    Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.Text}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This should give you something close to the spacing of a standard TextBlock in the DataGrid.

Upvotes: 1

SelfBiased_Resistor
SelfBiased_Resistor

Reputation: 43

The bottle neck of this is the choice of your control:

A datagrid consists of headers, rows and columns. What you are trying to do has several drawbacks:

  1. If you have a header (or cell in say row 1, column 1) that holds a 'w', the cell below (that would be row 2, column 1) that wants to adjust closely to an 'l' can't get closer than the width of the cell holding 'w' because the minimum size would be the one it needs to present the 'w', which is a bit more wider.

  2. You could however play around with negative values for padding, but this will lead to all sorts of issues.

  3. Even if you stick to one font size for headers (or set all headers to hidden), you would still have the issue mentioned under 1) for each cell.

In other words: a datagrid is not a good solution for your intention. Is there anything that restricts you from not using a user control that would consist of a textblock for each letter? That way I could think of a perfect solution for this, plus the benefit of having a control that gives you full control on styling each letter.

Upvotes: 0

Related Questions