{"id":32873,"date":"2005-12-22T10:00:12","date_gmt":"2005-12-22T10:00:12","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/2005\/12\/22\/why-do-up-down-controls-have-the-arrows-backwards\/"},"modified":"2005-12-22T10:00:12","modified_gmt":"2005-12-22T10:00:12","slug":"why-do-up-down-controls-have-the-arrows-backwards","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20051222-12\/?p=32873","title":{"rendered":"Why do up-down controls have the arrows backwards?"},"content":{"rendered":"

When you create an up-down control<\/a> (some people call a “spinner” control) in its default configuration, the up-arrow decrements the value and the down-arrow increments it. Most people expect the up-arrow to increment and the down-arrow to decrement. Why is it backwards?<\/p>\n

The up-down control is a victim of Windows’ reversed y<\/i>-axis. <\/p>\n

Mathematically, the (0, 0) coordinate should be at the bottom left corner of the screen (and in fact that’s where OS\/2 puts it), with y<\/i> increasing as you move up the screen. Windows, on the other hand, puts the (0, 0) coordinate at the upper<\/strong> left corner, with y<\/i> increasing as you move down<\/strong> the screen. <\/p>\n

What does that have to do with anything? <\/p>\n

The up-down control can be positioned horizontally or vertically. Let’s first look at the less problematic horizontal configuration. Windows and mathematics agree that the x<\/i> coordinate increases to the right, and the right-arrow (the arrow with higher x<\/i>-coordinate) causes the value to increase. (Let’s leave right-to-left languages out of the picture for the purpose of this discussion.) <\/p>\n

Once you have the horizontal version of the control working, converting it to a vertical control is a simple matter of interchanging the x<\/i>– and y<\/i>-axes. <\/p>\n

That’s why the up-arrow decreases the value. The up-arrow points towards smaller y<\/i>-coordinates and consequently decrements the value. <\/p>\n

It’s perfectly logical and simultaneously counter-intuitive. (It’s slightly more intuitive if you imagine the value attached to the up-down control as controlling the y<\/i>-coordinate of an imaginary object on the screen. In that case, clicking the up-arrow causes the y<\/i>-coordinate to decrease and the object moves up the screen.) <\/p>\n

Fortunately, this wackiness doesn’t last long, because the moment you change the range of the up-down control from the (not very useful) default of 0–100 to whatever you actually need, the arrows behave “normally” again. <\/p>\n

Perhaps intuitiveness should have won out over logic. But what’s done is done, and, as noted above, the problem goes away soon enough. <\/p>\n

[Raymond is currently away; this message was pre-recorded.] <\/p>\n","protected":false},"excerpt":{"rendered":"

When you create an up-down control (some people call a “spinner” control) in its default configuration, the up-arrow decrements the value and the down-arrow increments it. Most people expect the up-arrow to increment and the down-arrow to decrement. Why is it backwards? The up-down control is a victim of Windows’ reversed y-axis. Mathematically, the (0, 0) […]<\/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":[2],"class_list":["post-32873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-history"],"acf":[],"blog_post_summary":"

When you create an up-down control (some people call a “spinner” control) in its default configuration, the up-arrow decrements the value and the down-arrow increments it. Most people expect the up-arrow to increment and the down-arrow to decrement. Why is it backwards? The up-down control is a victim of Windows’ reversed y-axis. Mathematically, the (0, 0) […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/32873","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=32873"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/32873\/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=32873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=32873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=32873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}