Question

I just wasted my entire evening on something which I thought would be very simple but it seems WPF and Google are letting me down completely.

I need a grid, 6×6 of which I fill every row and column with a custom control. I want to be able to navigate through this grid via the keyboard (I can get those events, no problem) but I cannot seem to find how I can always have the selected grid row/column in the center of my window.

I found some carousel alike implementations, but most of them only work in a single direction and I want two way navigation, yet none seem to support this nor can I extend them to do this.

I essentially want to create a PSP alike grid navigation.

Answer 1

One easy way is to do this:

• Create a scrollable form.
• Add a 6×6 grid of child controls.
• In the GotFocus (or similar) event for all the controls, set the parent form scroll offset to an appropriate position to centre the child.

This is pretty straight-forward thing to implement, with a little bit of maths to work out how to centre the x,y position of a control by setting the scroll offsets (it can be tricky/confusing, but as long as you understand the coordinate systems used for scrolling, not too bad)

Or, another approach that avoids scrolling via the windows APIs and using custom controls:

• Create a form
• Override OnPaint to draw your grid of 6×6 “controls” as simple graphical shapes or bitmap images centred on the selected “control”.
• Handle keyboard (KeyDown/Up) and mouse handling (MouseDown/Up) events to make the 36 areas of the graphic respond to user inputs in the way you desire. You’ll have to track the selected item and force the window to redraw its graphics to show the new state. Enable double buffering to stop it flickering.

The first approach gives you a lot of windows-based handling for free (tabbing between controls, remembering where the input focus is, and directing events to separate classes for each “control”, for example). The second approach strips away all this “help” but gives you complete control over everything, which can often help avoid unintended behaviours (e.g. it won’t move the input focus when the user presses Tab unless you specifically write the code to make it do that).