翻译 《The Old New Thing》 - Rotating the Z-order,The Old New Thing中的Z序旋转,旧元素的新演绎

马肤

温馨提示:这篇文章已超过471天没有更新,请注意相关的内容是否还可用!

摘要:,,《The Old New Thing》探讨了旋转Z轴顺序的概念。通过旋转Z轴顺序,可以更新旧事物并赋予新的视角和用途。本文介绍了如何运用旋转Z轴顺序的方法,展示了在改变视角的同时保持事物的本质特征的重要性。这种转变不仅是对旧事物的翻新,也是对创新思维的探索和实践。

《Rotating the Z-order:一个设计对话框时的挑战》

翻译 《The Old New Thing》 - Rotating the Z-order,The Thing中的Z序旋转,旧元素的新演绎 第1张

文章由Raymond Chen在2003年8月26日发表,它探讨了一个在设计对话框时常见的问题:为了使点击测试(hit-testing)正常工作,控件需要按照一种Z顺序排列,但为了让键盘的Tab顺序正确,又需要另一种顺序,文章通过一个简化的对话框模板示例来解释这个问题,并给出了一种解决方案。

你会面临这样的情境:为了让点击测试正常工作,你需要按照一种Z顺序排列控件,在一个为了说明问题而简化的对话框模板中,ListView控件必须放在Tab控件之前,以便拖放操作能够正常工作,这样做会破坏可访问性,因为Tab顺序也遵循Z顺序,对话框上的Tab顺序可能不符合预期。

在这个例子中,理想的Tab顺序应该是:Tab -> List -> Import -> Export -> Remove -> Close,由于Z顺序的需求,实际的Tab顺序可能是:List -> Tab -> Import -> Export -> Remove -> Close,这显然是不理想的,因为焦点会向上跳转(从List到Tab)。

为了解决这个问题,我们需要旋转Tab顺序的思考方式,按照理想的Tab顺序在页面上放置控件,将Tab顺序视为一个循环的圆,这样,我们可以得到一个两全其美的结果:List位于Z顺序的顶端,而Tab顺序仍然是正确的。

翻译 《The Old New Thing》 - Rotating the Z-order,The Thing中的Z序旋转,旧元素的新演绎 第2张

让我们再次审视这个简化的对话框模板,为了满足点击测试的需求,ListView控件必须放在Tab控件之前,通过调整其他控件的位置和顺序,我们可以得到一个正确的Tab顺序,同时保持ListView在Z顺序的顶端,最终的对话框模板如下所示:

// 注意:为了拖放操作正常工作,ListView控件必须放在Tab控件之前。
//
IDD_MAIN DIALOGEX  0, 0, 335, 270
STYLE DS_MODALFRAME | WS_POPUP | WS_CAPTION | WS_SYSMENU
                    | DS_CONTEXTHELP | DS_SHELLFONT
CAPTION "Blah blah"
FONT 8, "MS Shell Dlg"
BEGIN
    CONTROL         "List",IDC_LIST,WC_LISTVIEW,LVS_REPORT |
                    WS_BORDER | WS_TABSTOP |
                    LVS_SHOWSELALWAYS,15,46,305,111  // ListView控件放在前面以满足拖放需求
    CONTROL         "Tab",IDC_TAB,WC_TABCONTROL,WS_TABSTOP,7,24,321,141  // Tab控件放在后面以保持正确的Tab顺序
    PUSHBUTTON      "&Import...",IDC_IMPORT,7,172,51,14  // 其他按钮和控件按照需求放置
    PUSHBUTTON      "&Export...",IDC_EXPORT,62,172,51,14  // 保持正确的布局和顺序
    PUSHBUTTON      "&Remove",IDC_REMOVE,117,172,51,14  // 确保功能性和可访问性
    DEFPUSHBUTTON   "&Close",IDOK,277,249,51,14  // 完成对话框模板的最后部分
END

通过这种方式,我们得到了一个既满足点击测试需求又具有正确Tab顺序的对话框模板,这是一个通过旋转思考方式解决问题的例子,让我们在设计和开发用户界面时更加灵活和高效。


0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 【研发日记】Matlab/Simulink自动生成代码(二)——五种选择结构实现方法,Matlab/Simulink自动生成代码的五种选择结构实现方法(二),Matlab/Simulink自动生成代码的五种选择结构实现方法详解(二)
  • 超级好用的C++实用库之跨平台实用方法,跨平台实用方法的C++实用库超好用指南,C++跨平台实用库使用指南,超好用实用方法集合,C++跨平台实用库超好用指南,方法与技巧集合
  • 【动态规划】斐波那契数列模型(C++),斐波那契数列模型(C++实现与动态规划解析),斐波那契数列模型解析与C++实现(动态规划)
  • 【C++】,string类底层的模拟实现,C++中string类的模拟底层实现探究
  • uniapp 小程序实现微信授权登录(前端和后端),Uniapp小程序实现微信授权登录全流程(前端后端全攻略),Uniapp小程序微信授权登录全流程攻略,前端后端全指南
  • Vue脚手架的安装(保姆级教程),Vue脚手架保姆级安装教程,Vue脚手架保姆级安装指南,Vue脚手架保姆级安装指南,从零开始教你如何安装Vue脚手架
  • 如何在树莓派 Raspberry Pi中本地部署一个web站点并实现无公网IP远程访问,树莓派上本地部署Web站点及无公网IP远程访问指南,树莓派部署Web站点及无公网IP远程访问指南,本地部署与远程访问实践,树莓派部署Web站点及无公网IP远程访问实践指南,树莓派部署Web站点及无公网IP远程访问实践指南,本地部署与远程访问详解,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南。
  • vue2技术栈实现AI问答机器人功能(流式与非流式两种接口方法),Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法探究,Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法详解
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,0人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码