CODEWITHSUNDEEP
c#wpfdatagrid
Sturm
Sturm

Reputation: 4125

Offset rows in DataGrid

I'm calculating the logarithmic slopes between the points (that the user has inserted):

enter image description here

For that I'm using two DataGrid; first displays the coordinates, and the second displays the slopes. I'm using a pair of DataGrid because I need to update the curve distinguishing what has been changed, the coordinates or the slope.

I would like to display better the values of the slopes: rather that being displayed in the same line as the points, they should be displayed in between the points, as shown in the second figure.

I don't know a way of doing this in WPF, maybe setting a greater value to Height of the header of the second DataGrid, so all rows will be displaced a little (approx 5px), but I can't find a way of doing that.

Could someone guide me to achieve this?

The DataGrid is defined in a pretty standard way:

<DataGrid x:Name="gridSlope" ItemsSource="{Binding Points, Mode=TwoWay}" 
        AutoGenerateColumns="False" Width="100"
        Background="#19B0C4DE" BorderThickness="1" 
       BorderBrush="#19D3D3D3" CanUserResizeColumns="False" 
       CanUserResizeRows="False" CanUserSortColumns="False" 
       ClipboardCopyMode="IncludeHeader" 
       CellEditEnding="s1GridPendiente_CellEditEnding">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Path=Slope, StringFormat='{}{0:0.00}', 
                                           Mode=TwoWay, 
                                           UpdateSourceTrigger=PropertyChanged}" 
           Header="dB/oct"/>
    </DataGrid.Columns>
</DataGrid>

enter image description here

Upvotes: 2

Views: 1046

Answers (2)

Noctis
Noctis

Reputation: 11763

Here's a screenshot:

enter image description here

To achieve that, you can add this

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Margin" Value="0 0 0 10"></Setter>
    </Style>
</DataGrid.ColumnHeaderStyle>

to your <DataGrid x:Name="gridSlope" ... before the <DataGrid.Columns>.

You can play with the margin there, or do what you want :) (and remove the bold if you don't like it ... I was just fooling around with it ...)

Upvotes: 1

grantnz
grantnz

Reputation: 7423

The following isn't perfect but it's close to what you are after. The problem with this idea is that the DataGridRow clips its content so you can't move the 3rd column as far down as would be ideal.

enter image description here

    <DataGrid ItemsSource="{Binding Data}" AutoGenerateColumns="False" GridLinesVisibility="None">

        <DataGrid.Columns>
            <DataGridTextColumn Header="A" Binding="{Binding A}"/>
            <DataGridTextColumn Header="B" Binding="{Binding B}"/>
            <DataGridTemplateColumn Header="C" Width="Auto">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=C}" Margin="0,5,0,-2"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>


public class DataClass
{
    public int A { get; set; }
    public int B { get; set; }
    public String C { get; set; }

    public DataClass(int a, int b, String c)
    {
        A = a;
        B = b;
        C = c;
    }
}

    public List<DataClass> Data { get; set; }
    public MainWindow()
    {
        Data = new List<DataClass>() { new DataClass(1, 2, "3"), new DataClass(2, 3, "4"), new DataClass(3, 4, "5"), new DataClass(4, 5, "") };
        DataContext = this;
        InitializeComponent();
    }

Upvotes: 1

Related Questions