【问题标题】:Implementing a "fisheye" view with a ListBox使用 ListBox 实现“鱼眼”视图
【发布时间】:2013-04-28 19:45:03
【问题描述】:

我是 Windows Phone 编程的新手。在我的应用程序中,我有一个列出电话联系人的列表框。目前它被列为 UI 中列表项大小相同的常规列表。我希望像这样修改前端:

我不想为每个列表项设置不同的大小/背景颜色,而是使用固定的 UI,让列表滚动浏览它,并且视图中的列表项在任何时候都应该像图片中一样显示。

我不希望任何代码作为答案,但也欢迎任何示例,只是想知道使用这种功能的哪些功能是可能的,以便我可以阅读!

谢谢, 迪帕克

【问题讨论】:

    标签: visual-studio-2010 silverlight windows-phone-7 silverlight-toolkit visual-c#-express-2010


    【解决方案1】:

    将现有控件(例如 ListBox)修改为这样会很困难,因此最好的选择可能是 ItemsControl,其 RenderTransform 设置为 TranslateTransform。

    如果您在 ItemsControl 上放置一个 Rectangle(使用 Fill="Transparent"),您可以将处理程序附加到 ManipulationStarted、ManipulationDelta 和 ManipulationCompleted 事件,以通过设置 TranslateTransform 的 Y 偏移量来控制“滚动”。

    要调整列表中项目的大小,有两个选项:自定义面板或手动设置。

    自定义面板

    您可以创建一个自定义 Panel 实现,该实现将根据您将创建以表示滚动位置的属性适当地调整其 Children 的大小。将 ItemsControl 设置为使用您的面板,并通过将处理程序绑定或附加到面板的 Loaded 事件并保持指向面板的指针,从 ManipulationDelta 处理程序内部更新上述属性。

    手动设置

    从 ManipulationDelta 处理程序内部,您还可以计算盒子的各种高度,并使用 MyItemsControl.ItemContainerGenerator.ContainerFromIndex 获取每个项目的视觉效果并设置其高度。

    我建议将这一切都放在自定义 UserControl 中。

    您可能在使用 TranslateTransform 进行剪辑时遇到问题,但希望这可以帮助您入门。不幸的是,作为您的第一个 windows phone 项目,这看起来是一个相当困难的控件!

    【讨论】:

    • 感谢 Murkaeus。这确实帮助我开始了。我会在这里更新它是怎么回事!
    • @user1386173 如果这篇文章回答了您的问题,请考虑将其标记为答案或点赞。
    • 赞成清晰的描述。一旦我尝试,也会将其标记为答案。谢谢:-)
    【解决方案2】:

    所以最后我确实设法找到了一种方法来做到这一点。 第一种方法是 @Murkaeus 建议的,使用 UserControl 和 ManipulationDelta 事件处理程序。但是由于某种原因,仅针对 2 个手指手势(缩放、捏合等)触发了操作 Delta 事件,我不知道为什么。经过一番尝试,我不得不放弃了。

    下一个方法是使用 Listbox 本身。列表框的来源设置为我在从电话中读取联系信息后创建的列表(模型对象)。列表框项的高度和颜色绑定到我的模型中名为“scaleLevel”的属性,并通过实现 IValueConvertors 进行相应转换,为不同的比例级别提供预定义的颜色和高度值。

    我为滚动查看器垂直偏移创建了一个附加属性,就像提到的 [这里] (http://www.scottlogic.co.uk/blog/colin/2010/07/exposing-and-binding-to-a-silverlight-scrollviewer%E2%80%99s-scrollbars/)! 该事件在垂直偏移发生变化时触发,每次滚动时,我都会根据当前垂直偏移找出要放大哪个列表框项,缩小哪个列表框项。

    获得此信息后,我会更改(模型的)列表中受影响项目的属性(“scaleLevel”)(绑定到列表框的高度和颜色)。使用 INotifyPropertyChanged 事件在 UI 中更新此更改。

    我不知道这是否是最好的方法,但它工作得很好,尽管涉及到处理,但更新 UI 并没有太大的意义。

    我想听听您对实施的意见以及您认为效果更好的任何其他解决方案。

    【讨论】:

    • 嘿,如果它有效,它就有效。如果没有你的消息来源,我无法告诉你为什么 ManipulationDelta 没有按预期工作。根据我的经验,除非性能是一个问题,否则您无需花时间重构有效的东西,所以我认为您很高兴。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-13
    • 2016-05-20
    • 1970-01-01
    • 2020-08-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多