{"id":104627,"date":"2020-12-31T07:00:00","date_gmt":"2020-12-31T15:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/oldnewthing\/?p=104627"},"modified":"2020-12-31T07:30:10","modified_gmt":"2020-12-31T15:30:10","slug":"20201231-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20201231-00\/?p=104627","title":{"rendered":"How can I create a non-circular tab order, or some other type of custom ordering in my Win32 dialog?"},"content":{"rendered":"

Normally, the tab order in a dialog follows a fixed sequence: Hitting the Tab<\/kbd> key moves forward through the sequence, and hitting Shift<\/kbd>+Tab<\/kbd> moves backward through the sequence, wrapping around when the beginning or end of the sequence is reached. In other words, what you have is a circle.<\/p>\n

The order is based on the order in which the controls are given in the dialog template, which need not match the physical layout of the controls. In other words, if you list a control near the bottom of the dialog ahead of a control near the top, then hitting the Tab<\/kbd> key will move from the bottom control to the top control. This can be handy if you want the tab order to move vertically through columns, say.<\/p>\n

But sometimes a circular order isn’t good enough.<\/p>\n

Say you have a dialog box that looks in part like this:<\/p>\n

\n\n\n\n\n\n\n\n
Customer ID:\u00a0<\/td>\n\u00a0<\/td>\n <\/td>\nLocate<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n
Name:\u00a0<\/td>\n<\/tr>\n
Address:\u00a0<\/td>\n<\/tr>\n
\u22ee<\/td>\n <\/td>\n <\/td>\nChange<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

The idea is that the user enters the customer ID into the edit box, and then clicks the Locate<\/i> button. This looks up the customer record, and the user can then use other buttons on the dialog to view details of the customer or make changes.<\/p>\n

Based on end-user feedback, you come to the conclusion that it would be better if tabbing backward from the Change<\/i> button went straight to the Customer ID<\/i> field, rather than to the Locate<\/i> button. After all, there’s no point clicking the Locate<\/i> button without first making a change to the customer ID.<\/p>\n

You can do this by overriding the tab behavior for the Change<\/i> button.<\/p>\n

INT_PTR CALLBACK CustomerDlgProc(\r\n    HWND hdlg, UINT message, WPARAM wParam, LPARAM lParam)\r\n{\r\n  switch (message) {\r\n  case WM_INITDIALOG:\r\n    SetWindowSubclass(GetDlgItem(hDlg, IDC_CHANGENAME),\r\n                      TabBackwardSubclassProc, 0, 0);<\/span>\r\n    ... other initialization ...\r\n    return TRUE;\r\n\r\n  case ...\r\n  }\r\n  return FALSE;\r\n}\r\n\r\nINT_PTR CALLBACK TabBackwardSubclassProc(\r\n    HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam,\r\n    UINT_PTR subclassId, DWORD_PTR)\r\n{\r\n  switch (message) {\r\n  case WM_NCDESTROY:\r\n    RemoveWindowSubclass(hwnd, TabBackwardSubclassProc,\r\n                         subclassId);\r\n    break;\r\n\r\n  case WM_GETDLGCODE:\r\n    return DefSubclassProc(hwnd, message, wParam, lParam) |\r\n           DLGC_WANTTAB;\r\n\r\n  case WM_KEYDOWN:\r\n    if (wParam == VK_TAB) {\r\n      HWND hdlg = GetParent(hwnd);\r\n      if (GetKeyState(VK_SHIFT) < 0) {\r\n        \/\/ Tabbing backward - go to the Customer ID.\r\n        HWND tabDestination = GetDlgItem(hdlg,\r\n                                         IDC_CUSTOMERID);\r\n        SendMessage(hdlg, WM_NEXTDLGCTL,\r\n                    (WPARAM)tabDestination, TRUE);\r\n      } else {\r\n        \/\/ Do the normal tabbing thing.\r\n        SendMessage(hdlg, WM_NEXTDLGCTL, FALSE, FALSE);\r\n      }\r\n      return 0;\r\n    }\r\n    break;\r\n\r\n    case WM_CHAR:\r\n      if (wParam == VK_TAB) return 0;\r\n      break;\r\n    }<\/span>\r\n\r\n    return DefSubclassProc(hwnd, message, wParam, lParam);\r\n}\r\n<\/pre>\n
During dialog box initialization, we subclass the control for which we want a custom tab destination. In our case, it’s the Change<\/i> button.<\/p>\n
In the subclass procedure, there is the usual boilerplate about removing the subclass when the window is destroyed. But the interesting part starts with the WM_<\/code>GET\u00adDLG\u00adCODE<\/code> message.<\/p>\n
As I noted some time ago,  the WM_<\/code>GET\u00adDLG\u00adCODE<\/code> message lets you influence the behavior of the dialog manager<\/a>. We handle this message by taking the behavior requested by the original control, and also saying that we want to customize the behavior of the Tab<\/kbd> key.<\/p>\n
Doing so allows the VK_TAB<\/code> key to flow into the WM_<\/code>KEY\u00adDOWN<\/code>, WM_<\/code>KEY\u00adUP<\/code>, and WM_<\/code>CHAR<\/code> messages.<\/p>\n
When a key goes down, we trigger our custom navigation when the Tab<\/kbd> key is pressed. If the Shift<\/kbd> key is also pressed, then we use the  WM_<\/code>NEXT\u00adDLG\u00adCTL<\/code> message<\/a> to move focus to an explicit control: Passing an lParam<\/code> of TRUE<\/code> means that we are specifying the window to go to, and we give it the Customer ID<\/i> control.<\/p>\n
If the Shift<\/kbd> key is not pressed, then we pass an lParam<\/code> of FALSE<\/code>, meaning “Do default tab navigation.” Passing FALSE<\/code> as the wParam<\/code> means that we should go to the default next<\/i> control. (Passing TRUE<\/code> would request going to the default previous<\/i> control.)<\/p>\n
The last bit of cleanliness is that we need to grab the WM_<\/code>CHAR<\/code> message and swallow the Tab<\/kbd> character, so that the control itself won’t try to respond to it, say, by inserting a tab into the edit control.<\/p>\n
And there you have it. We customized tabbing backward from the Change<\/i> button in a way that resulted in a tab order that isn’t circular.<\/p>\n","protected":false},"excerpt":{"rendered":"
Taking things into your own hands.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-104627","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"
Taking things into your own hands.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/104627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=104627"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/104627\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=104627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=104627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=104627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}