While trying to achieve such an effect in Eto (using Custom Cells with a colored Panel and a label) I stumbled over these 2 Px wide white Lines drawn between each Cell that break the visual connection of those colored cells:
On closer inspection I found out that a white 1 Px Border is drawn around each Cell which is colored black when the Cell is selected (bottom right Cell in the example above). When inspecting that Property in VS, I found that Border called Bd sitting on the DataGridCell:
Probably it’s not possible to change that BorderThickness to 0 in Eto. I tried to reach that Propery via a Style and the Windows-specific Method described here but unfortunately without luck. I searched for a matching property in Eto.Wpf.Forms.Cells... but just couldn’t find the right one.
Can someone give me a hint how to work my way through? Or maybe there’s a much smarter approach to switching off those Cell Borders?
Of course! Sorry, I should have added it in the first place…
My test file is pure Eto, actually quite dysfunctional, just to see how I can style the GridView: ColoredGridView.cs (3.2 KB)
I find customizing default Eto elements quite challenging. You often need to resort to platform-specific hacks which can easily be broken when a newer version of Eto is released. Having said that, you can achieve nearly anything with the Drawable class. It requires a bit more fiddling around but then only the sky is the limit. Here is an example of a similar graphical effect you’re trying to achieve added to a custom expander derived from a Drawable:
I already admired your incredibly beautiful UI in your Custom UI Elements thread…
I’m a bit shy to move away from vanilla GridView (yet) as it comes with features like resizable column widths, row selections and DataStore Bindings which would probably be too challenging for me to rebuild.
But the list you are showing is exactly the look I’m after and maybe one day I will be brave enough to challenge myself Thank you very much for your insights!
@romio82 is your intent to make this cross platform? Different cell heights are not working on Mac, at least not the last time I tried.
Also I noticed there is no cell spacing on Mac with that sample you sent.
Hey @Gijs,
thank you for these Mac-specific thoughts!
Although my personal usecase is Windows-specific, when trying to find a solution with Eto I definitely also think about making the UI usable for Mac-users. Let’s say it’s not my primary goal but also not the last one
Interesting that Cell spacing isn’t there on the Mac… If you click on a single cell, does it get a frame like the lower right one in this screenshot? (Sorry, I don’t have access to a Mac at the moment - trying to change that though )
I found this thread on stackoverflow that describes how to hide tose unwanted cell borders in XML and this one that digs into a code-behind solution for it.
But I still can’t get the threads together in Eto…
I don’t find the right path to target the DataGridCell in a style (is it possible to see all targetable Controls in Eto.Wpf.Forms somewhere?). And I don’t understand on which control I need to apply that style - to the grid, to the columns or to each of the cells? I’m a bit lost
Can someone give me a hint on how to solve this or where to find an example of a Windows-targeted custom (Data)Grid cell style in Eto? Thank you!!
