【问题标题】:Change panels / views based on button click根据按钮单击更改面板/视图
【发布时间】:2013-07-10 14:36:06
【问题描述】:

我想实现以下 WinForms 用户界面,顶部有两个按钮,允许用户在两​​个视图之间切换。

所以,当我点击第一个按钮(“显示用户配置文件”)时,下面的三个面板应该显示三个不同的用户配置文件(其中一些内容从数据库中获取),就像这样...... .

当我点击第二个按钮(“显示聊天记录”)时,下面的三个面板应该显示三个不同的聊天记录(部分内容从数据库中获取),就像这样......

什么是在 C# / .Net 中实现这种结构的好方法(动态或静态)? 有没有比我下面的粗略方法更清洁或至少更有效的方法:

  • 为三个配置文件布局三组控件
  • 为三个聊天历史设置三组控件,重叠在上面 配置文件的控件。
  • 根据按下的按钮更改控件的可见性。
  • 例如,如果单击第一个按钮,则为所有与 Chat-History 相关的控件设置 Visibility=false,并为所有相关控件设置 Visibility=true到用户配置文件。

【问题讨论】:

  • 为什么不使用选项卡控件而不是顶部的两个按钮来切换具有多个面板的视图?
  • “选项卡控件”是否在整个表单之间切换,或者我可以让它在我自己自定义的项目选择之间切换?
  • 选项卡控件将为您提供一组单独的面板。这是显而易见的方法,但是如果您想覆盖面板并控制可见性,那很好。我有一个内容查看器,它根据内容的 mime 类型显示图像或文本,并且在没有用户交互的情况下发生上下文切换,因此将图像控件放在文本框顶部并将其设置为可见是有意义的mime 类型是图像/jpeg。如果用户要做出选择,我会使用选项卡控件。
  • @John:我会试一试。或许你可以这样回答。
  • 是的,当然,您只需在每个选项卡中放置 3 个面板。生病添加一个选项卡 tut 的东西的答案。

标签: c# .net winforms panel


【解决方案1】:

选项卡控件将为您提供一组单独的面板。这是显而易见的方法,但是如果您想覆盖面板并控制可见性,那很好。我有一个内容查看器,它根据内容的 mime 类型显示图像或文本,并且在没有用户交互的情况下发生上下文切换,因此将图像控件放在文本框顶部并将其设置为可见是有意义的mime 类型是图像/jpeg。如果用户要做出选择,我会使用选项卡控件。

我假设您正在使用可视化 ui 来添加控件。您可以将一个选项卡控件拖到您的表单中,默认情况下它应该显示为定义了 2 个选项卡。您可以在修改标签页集合的属性中添加更多内容。您还可以在此处重命名它们以反映您的选择(个人资料、聊天)。将选项卡控件向上拖动到表单上您想要的位置并适当调整大小,或将其停靠以填充表单。将 3 个面板拖到第一个选项卡中,然后单击第二个选项卡,并在其中再拖 3 个面板。然后继续进行。当用户单击聊天选项卡时,选项卡控件将管理视图 - 隐藏第一个选项卡及其 3 个面板。当然,单击第一个选项卡会使该 tabPage 再次可见。无需您编写任何代码。

我只是补充一点,我不明白显示 3 个配置文件和 3 个聊天记录的设计。除非您的用户将被限制为 3 个朋友。我认为您最好在个人资料页面上使用朋友姓名列表框,使用单个个人资料面板,根据选择的朋友填充个人资料控件,然后在聊天页面上使用相同的列表,使用单个根据选择的朋友将历史加载到文本框中的聊天面板。这样你就可以拥有你想要的所有朋友:)

为了完整起见,我将建议另一种方法,当您可以在单个 tabPage 中同时提供它们时,为什么用户必须在选项卡之间切换以查看用户个人资料或聊天历史记录?您可以以编程方式为每个用户创建一个新选项卡,在该选项卡上,左侧是他们的个人资料面板,右侧是他们的聊天记录。更少的上下文切换 = 更好的用户体验。选项卡控件将允许您自动滚动不适合表单的选项卡(tm)。

【讨论】:

  • 您上面的 cmets 将更适合包含在您的答案中。因此,与其制作 cmets,不如编辑您的答案并在其中包含您的想法。
  • @John:感谢您提供额外的 UI 建议;给了我一些新的想法。我在问题中的示例只是一个说明,我认为它可以更容易地提出问题。最终应用程序不仅仅是一个聊天/个人资料应用程序。
  • 另外,更新:我已经开始构建基于 tabcontrol 的布局,到目前为止看起来相当容易。下一步是动态/编程添加新的 tabcontrols!
  • 很高兴能帮上忙。如果你被那个帖子卡住了另一个问题!如果它对您有用,请不要忘记接受答案:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-16
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多