A 2D Grid Splitter

• Download source - 13.9 KB

Introduction

Everyone knows grid splitters: One larger area in a user interface split in two by a horizontal or vertical bar which can be dragged.

In this tip, I introduce a new kind of splitter than doesn't separate two areas in one dimension but four organized in quadrants, a two-dimensional grid-splitter:

Background

Too often, you need more than just one simple split and user interfaces end up with multiple nested splitters that are to be dragged individually. Just see any reasonably complex UI such as development environments or design tools. Try and count how many grid splitters you see in this screenshot of Expression Blend:

I count 7 (of course, it depends on the usage, but this is not an unreasonable screenshot - just an unreasonable screen size).

There are two problems with grid splitters in general:

1. The splitters have to be thin so they don't waste screen space. Thus, they are often hard to hit with a pointer, especially in the new world of touch and fat fingers.
2. An area cannot be resized in both dimensions simultaneously, which is how normal floating windows are resized. I would argue that often the user has a clear intention of how big - height and width - to make a certain view and not caring so much about how it affects the others. With the conventional approach that's usually hitting two grid splitters, one for the height and one for the width. This also makes it impossible to just temporarily drag a view to a bigger size and put it back in a single drag operation - a not too rare mouse maneuver with regular windows in cases where one merely wants to quickly "peek" at more content.

In some cases, the 2D splitter can be a better alternative.

Since the 2D splitter is located in the middle of four areas organized in quadrants of a larger area, it's easy to hit and drag - but that feature comes with the price of the quadrants usually having an unusual layout:

This is the layout I'm using for my own use case, but obviously other combinations are conceivable. For example, instead of having the quadrants consume the space left, right, above and below the splitter, those areas could be used for separate views such as menus.

Using the Code

This article comes with an implementation in Silverlight - but I mean this article to be about the idea rather than the implementation, so I won't talk too much about the code.

Only so much: The splitter code is really short (< 180 lines) and can probably be adapted to WPF and WinRT XAML Framework without much effort.

There is only one type, TwoDimensionalGridSplitter, which is a button assumed to be put into a grid cell (possibly nested). Exactly two rows and two columns are expected to be star-sized (surrounding the splitter) and all others must be either pixel or automatic.

My Own Use Case

I use the grid splitter in the administration interface of a signage software. I've included a short screencapture to show how it can look in a real-world user interface.