Click here to view the embedded video.

Once we got the basics running I tried to edit the XAML to make it look better. This turned out to be harder than expected. The surface has once again its own default designs, which in my opinion are worse than the WPF standard designs. The default look is grey and square. So I wanted to change it to something more akin to our other touchtable applications: white and round. However Paul used a ScatterView component to display the layerlist and the geodan logo. He had read that one can just drop components in a ScatterView, without the need to embed them in ScatterViewItems. This is true, but it is a nightmare for the (non-initiated) designer. What happens is that the grey-square design of the ScatterViewItem is drawn beneath any layout you come up with for your own item. This is a very puzzling behaviour, although not entirely unexpected once you know that the ScatterViewItem exists.

Once I solved this issue I could seriously try to change the layout of the ScatterViewItems. Here however real glitches appeared. We use rounded borders and dropshadows for our items. As you can see below there are (at least) two issues:

Rounded border on the Surface don't work

The dark rectangle in the top of the image is actually a shadow of  a ScatterViewItem which for some reason doesn’t start below it. However this makes it easy to see the first glitch in the rendering. As you can see there is a thin dark line near the edge, which makes a weird square corner at the corner. This shouldn’t be there and when you resize the ScatterViewItem down, the shadow becomes darker (as it should have been in the first place) and the line is not visible anymore. If you don’t use rounded corners on the shadow the line is still there, but harder to notice because it is exactly following the edge of the shadow.

The second annoying glitch I’ve found is the gap between the border and the content. If we zoom in a bit on the layercontrol you can see there is a pixel space between the border and the content:

A gap between border and content

So far I haven’t been able to eliminate the pixel wide gap. It doesn’t look bad in our application right now, but in general it is bad that there is such an uncontrollable gap. So I have the feeling that the Surface people are not a big fan of borders in general and rounded border specifically.