{"id":105889,"date":"2021-11-10T07:00:00","date_gmt":"2021-11-10T15:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/oldnewthing\/?p=105889"},"modified":"2021-11-10T06:45:57","modified_gmt":"2021-11-10T14:45:57","slug":"20211110-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20211110-00\/?p=105889","title":{"rendered":"How am I supposed to create children of the Win32 tab control?"},"content":{"rendered":"

Say you’re trying to write your own tabbed dialog. You start with the Win32 tab control to get the tabs at the top of the window. But how do you position the controls that belong to each of the pages?<\/p>\n

Let’s say, for simplicity, that your tab control has three tabs, and they let you select among three different edit controls.<\/p>\n

Your natural inclination would be to make the page controls children of the tab control:<\/p>\n\n\n\n\n\n\n\n
Main dialog<\/td>\n<\/tr>\n
\u2193<\/td>\n<\/tr>\n
Tab control<\/td>\n<\/tr>\n
\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n<\/tr>\n
Edit 1<\/td>\n <\/td>\nEdit 2<\/td>\n <\/td>\nEdit 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

When the user is on a particular tab, you show that tab’s edit control and hide the other two.<\/p>\n

The problem with this arrangement is that navigating the dialog with the Tab<\/kbd> key doesn’t work.<\/p>\n

Recall that the windows which participate in the tab order are those which are immediate children of the dialog frame, but with the special rule that if any of those children is marked WS_EX_CONTROL\u00adPARENT<\/code>, then it disappears from the tab order, replaced by its children. The WS_EX_CONTROL\u00adPARENT<\/code> rule applies recursively, so if any of the children have the style, then they too disappear and are replaced by their own children.<\/p>\n

In the above diagram, if we assume that none of the windows is marked as WS_EX_CONTROL\u00adPARENT<\/code>, then the tab order consists only of the tab control itself. You can’t tab into the children.<\/p>\n\n\n\n\n\n\n\n
Main dialog<\/td>\n<\/tr>\n
\u2193<\/td>\n<\/tr>\n
Tab control<\/td>\n<\/tr>\n
\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n<\/tr>\n
Edit 1<\/td>\n <\/td>\nEdit 2<\/td>\n <\/td>\nEdit 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

I’ve highlighted in blue the windows that participate int he tab order. By default, the windows that participate in the tab order are the immediate children of the main dialog, which in this case is the tab control.<\/p>\n

On the other hand, if you mark the tab control as WS_EX_CONTROL\u00adPARENT<\/code>, then you can tab into the children, but the tab control itself disappears from the tab order. The WS_EX_CONTROL\u00adPARENT<\/code> style means “Replace me in the tab order with my children.”<\/p>\n\n\n\n\n\n\n\n
Main dialog<\/td>\n<\/tr>\n
\u2193<\/td>\n<\/tr>\n
Tab control
\n(WS_EX_CP)<\/span><\/td>\n<\/tr>\n
\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n<\/tr>\n
Edit 1<\/td>\n <\/td>\nEdit 2<\/td>\n <\/td>\nEdit 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Win32 doesn’t let a control and its children all participate in the tab order. You have to choose whether you want the control or its children, but not both.<\/p>\n

The solution is to take the page controls out from under the shadow of the tab control.<\/p>\n\n\n\n\n\n
Main dialog<\/td>\n<\/tr>\n
\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n<\/tr>\n
Tab control<\/td>\n <\/td>\nEdit 1<\/td>\n <\/td>\nEdit 2<\/td>\n <\/td>\nEdit 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Setting the controls as siblings of each other gets them all into the tab order. We set the edit controls at a higher z-order, so they draw on top of the tab control.<\/p>\n

In practice, you probably have a lot of controls on each page, not a single edit control. Hiding and showing all of those controls can be a hassle, but you can use WS_EX_CONTROL\u00adPARENT<\/code> to save you some effort:<\/p>\n\n\n\n\n\n\n\n
Main dialog<\/td>\n<\/tr>\n
\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n<\/tr>\n
Tab control<\/td>\n <\/td>\nPage 1
\n(WS_EX_CP)<\/span><\/td>\n		 <\/td>\nPage 2
\n(WS_EX_CP)<\/span><\/td>\n		 <\/td>\nPage 3
\n(WS_EX_CP)<\/span><\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n <\/td>\n\u2193<\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n1a<\/td>\n <\/td>\n1b<\/td>\n <\/td>\n2a<\/td>\n <\/td>\n2b<\/td>\n <\/td>\n3a<\/td>\n <\/td>\n3b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Wrap each group of controls inside a parent page control, and mark the page control as WS_EX_CONTROL\u00adPARENT<\/code>. This is easy to arrange by making the page controls themselves be dialog boxes. That also gives you the convenience of having a separate dialog procedure for each page.<\/p>\n

You can then hide or show an entire group of controls by hiding or showing the page parent. This also has the advantage of preserving the hide\/show states of the inner controls, so if the rule was that control 1b is shown only if control 1a is checked, then hiding page 1 will hide everything, and then showing page 1 will bring them back in the same state they were in as they were previously.<\/p>\n","protected":false},"excerpt":{"rendered":"

They look like children, but they’re not.<\/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-105889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"

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