{"id":102996,"date":"2019-10-15T07:00:00","date_gmt":"2019-10-15T14:00:00","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/oldnewthing\/?p=102996"},"modified":"2019-10-14T17:03:03","modified_gmt":"2019-10-15T00:03:03","slug":"20191015-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20191015-00\/?p=102996","title":{"rendered":"How should I create controls on my dialog box that has a tab control?"},"content":{"rendered":"

The tab control from the shell common controls provides the tab selector control that is popular in tabbed dialogs. You’d be tempted to create the content of the tab control’s display area as children of the tab control, but that’s the wrong thing to do.<\/p>\n

You should create them as siblings<\/i> of the tab control.<\/p>\n

What you want to do is create your tab control to cover the portion of the dialog box that you want to be tabbed. You then use the TCM_<\/code>ADJUST\u00adRECT<\/code> message (or the equivalent TabCtrl_<\/code>AdjustRect<\/code> macro) to determine the display area of the tab control. Inside that display area, you can place your content, but do it with the dialog box as the parent, not the tab control.<\/p>\n\n\n\n\n\n\n
\u00a0<\/td>\nDialog<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
Tab control<\/td>\n\u00a0<\/td>\nContent 1<\/td>\n\u00a0<\/td>\nContent 2<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Depending on which tab in the tab control is selected, you show exactly one of the content windows and hide the others.<\/p>\n

If you think about how focus works in dialog boxes, you’ll realize that it has to be this way.<\/p>\n

The tab control itself is focusable, and presumably you want to be able to put focus on your content, too. Now consider what happens if you create the content as children of the tab control:<\/p>\n\n\n\n\n\n\n\n\n
\u00a0<\/td>\nDialog<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\nTab control<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\nContent 1<\/td>\n\u00a0<\/td>\nContent 2<\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

By default, the tab order in a dialog box follows the dialog box’s immediate children. In this case, it means that the tab control can receive focus, but the content cannot, since they are not immediate children of the dialog box.<\/p>\n

You can alter this behavior with the WS_<\/code>EX_<\/code>CONTROL\u00adPARENT<\/code> extended window style, which means “I’m just a container. My children are the things that can get focus, not me<\/a>.” So let’s try that and put the WS_<\/code>EX_<\/code>CONTROL\u00adPARENT<\/code> extended window style on the tab control.<\/p>\n\n\n\n\n\n\n\n\n
\u00a0<\/td>\nDialog<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\nTab control<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
\u00a0<\/td>\nContent 1<\/td>\n\u00a0<\/td>\nContent 2<\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

This time, the tab control drops out of the tab order, and its children, the content controls, join in.<\/p>\n

With this window hierarchy, no amount of fiddling with the WS_<\/code>EX_<\/code>CONTROL\u00adPARENT<\/code> extended window style will allow the tab control and<\/i> its children to all be part of the tab order. Because a window and its children cannot both be part of the tab order.<\/p>\n

The only solution is to move the content controls out, so they aren’t children of the tab control. Making them siblings of the tab control, as they are in the original diagram, allows all three to participate in the tab order.<\/p>\n

Bonus chatter<\/b>: The content windows are typically nested dialogs which are marked with the WS_<\/code>EX_<\/code>CONTROL\u00adPARENT<\/code> extended window style. This permits the children of the nested dialogs to participate in the tab order, but keeping them inside a nested dialog lets you hide and show the controls in bulk by hiding and showing the nested dialog.<\/p>\n","protected":false},"excerpt":{"rendered":"

They are siblings of the tab control, not children.<\/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-102996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"

They are siblings of the tab control, not children.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/102996","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=102996"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/102996\/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=102996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=102996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=102996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}