Excel-style cell borders in the DataGrid

May 20, 2009 at 9:46 PM
Edited May 20, 2009 at 9:48 PM

I've been using the WPF DataGrid in an application where I needed to style it like an Excel spreadsheet. Part of this styling includes placing a thick black border around a selected cell (or selected range of cells). I have XAML and code that does it, but my problem is that cells with the selected border become taller. Subsequently, any row with a selected cell becomes taller than the rest, which looks wrong.

The approach I'm using includes extending the DataGrid class. Within my extended DataGrid, I have four attached properties, whose OwnerType is DataGridCell (IsLeftBorderSelected, IsTopBorderSelected, IsRightBorderSelected, and IsBottomBorderSelected).

Whenever I receive a notification that the selected cells have changed, I execute a function that calculates the bounding box of the selected cells and, for each cell, determines which of its borders are selected. Subsequently, the attached properties are updated.

In XAML, I have a Style for DataGridCell that uses a sequence of MultiDataTriggers to control the BorderBrush and BorderThickness properties for a cell. For example,

 <MultiDataTrigger>MultiDataTrigger.Conditions>

<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsLeftBorderSelected}" Value="False"/>

<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsTopBorderSelected}" Value="True"/>

<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsRightBorderSelected}" Value="False"/>

<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsBottomBorderSelected}" Value="False"/>

</MultiDataTrigger.Conditions>

<Setter Property="BorderBrush" Value="Black" />

<Setter Property="BorderThickness" Value="0,3,0,0"/>

 

 </MultiDataTrigger>

In this case, if a cell had only its top border selected, its top border thickness would become 3. I have a MultiDataTrigger for each combination.

As aforementioned, the result of changing the top or bottom border thickness is that the entire row's height increases. Is it possible for me to get the same visual effect without it increasing the row's height? (Is there a different property I can set?) Alternatively, is there a way to stop the row's height from changing, forcing the border thickness to remain within the cell?

Thanks,

-Craig

 

 <

Aug 5, 2009 at 2:08 PM

Hi Craig,

Were you able to implement this? I'm also having the same requirements and I'm looking how to solve it.

Anyone here who can help?

Thanks,

Sep 8, 2009 at 10:09 PM
Edited Sep 8, 2009 at 10:10 PM

 

Hi Craig and fbmendoza

I would like to add excel spreadsheet functionality to the WPF toolkit datagrid, can this be done? I want datagrid cells to behave like excel spreadsheet cells would behave...

Thanks in advance.