专栏首页林德熙的博客win10 uwp 禁用 ScrollViewer 交互

win10 uwp 禁用 ScrollViewer 交互

如果在 UWP 有一个控件里面有 ScrollViewer 控件,那么因为默认的 ScrollViewer 会使用触摸的交互,这样在控件就收不到触摸的交互

通过 VerticalScrollMode="Disabled" HorizontalScrollMode="Disabled" 可以关闭 ScrollViewer 交互

接下来就是简单告诉大家如何使用 ScrollViewer 在禁用默认交互还让 ScrollViewer 滑动,先创建一个简单的 UWP 项目

打开 xaml 添加一点代码,创建一个 Canvas 放在 ScrollViewer 内,在里面放一个矩形,通过这个矩形就可以知道有没有移动

        <ScrollViewer>
            <Canvas Width="100000" Height="10000000">
                <Rectangle Width="100" Height="100" Fill="Black" 
                           Canvas.Left="100" Canvas.Top="100" />
            </Canvas>
        </ScrollViewer>

创建的 ScrollViewer 只有对水平做滑动,尝试用触摸滑动矩形,会发现只能通过垂直滑动

如果想水平也可以滚动,需要设置 HorizontalScrollBarVisibility 属性,设置为 Auto Hidden Visible 都可以

        <ScrollViewer HorizontalScrollBarVisibility="Hidden">
            <Canvas Width="100000" Height="10000000">
                <Rectangle Width="100" Height="100" Fill="Black" 

                           Canvas.Left="100" Canvas.Top="100" />
            </Canvas>
        </ScrollViewer>

现在再试试触摸矩形

如果现在尝试拿到 滚动条外面的 Grid 的 Manipulation 事件,可以看到没被被调用

    <Grid Background="Transparent" ManipulationMode="TranslateX,TranslateY" ManipulationDelta="Grid_OnManipulationDelta">
        <ScrollViewer HorizontalScrollBarVisibility="Hidden"
                      HorizontalScrollMode="Disabled"
                      VerticalScrollMode="Disabled">
            <Canvas  Width="100000" Height="10000000">
                <Rectangle Width="100" Height="100" Fill="Black" 
                           Canvas.Left="100" Canvas.Top="100" />
            </Canvas>
        </ScrollViewer>
    </Grid>

        private void Grid_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            
        }

这里需要设置 Grid 的背景和设置 ManipulationMode 可以水平或垂直,设置 Grid 的背景是让 Grid 有命中测试,这样 UWP 才知道用户点击到哪个控件,通过 ManipulationMode 才可以让事件知道可以如何做

那么如何让 Grid 接收到 Manipulation 或者 Pointer 事件?

尝试下面的代码

        <ScrollViewer HorizontalScrollBarVisibility="Hidden"
                      HorizontalScrollMode="Disabled"
                      VerticalScrollMode="Disabled">
                      ……
        </ScrollViewer>

此时就可以看到 Grid 收到 Pointer 事件

但是如果想要 ScrollViewer 外面的控件可以收到交互同时想要让 ScrollViewer 可以和之前一样,那么就需要自己写一些代码

首先给 ScrollViewer 命名,这样在后台代码才可以使用

        private void Grid_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            ScrollViewer.ChangeView(ScrollViewer.HorizontalOffset - e.Delta.Translation.X,
                ScrollViewer.VerticalOffset - e.Delta.Translation.Y, null, true);
        }

现在尝试运行一下代码,才不告诉大家 ChangeView 有一个属性需要修改为 true 看起来清真


本文会经常更新,请阅读原文: https://lindexi.gitee.io/post/win10-uwp-%E7%A6%81%E7%94%A8-ScrollViewer-%E4%BA%A4%E4%BA%92.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://lindexi.gitee.io ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • win10 UWP 修改密码框文字水平

    新建一个 PasswordBox 控件,编辑模板,可以看到 vs 自动写出很多代码

    林德熙
  • dotnet core 使用 PowerShell 脚本

    本文告诉大家如何在 dotnet core 通过 Host PowerShell 的方法使用 PowerShell 脚本

    林德熙
  • 3分钟教你搭建 gitea 在 Centos 服务器

    本文告诉大家如何在一个 Centos 服务器上搭建 gitea 然后在 gitea 创建帐号上传代码

    林德熙
  • 设计模式第一讲-模版方法模式

    模版方法模式是很比较简单的一种模式,也是非常常用的一种设计模式, 相信大家工作过程中直接或间接用到过很多。

    用户2825413
  • Lombok,嗯,真香香香香香香!

    它大致意思是:Lombok是一个很牛批的插件(本质是个Java库),项目里一旦引入了Lombok神器之后,你项目中所有诸如:对象的构造函数、 equals()方...

    macrozheng
  • 图解Java设计模式之外观模式

    组建一个家庭影院 : DVD 播放器、投影仪、自动屏幕、环绕立体声、爆米花机,要求完成使用家庭影院的功能,其过程为: 直接用遥控器:统筹各设备开关 开爆米花...

    海仔
  • 【编程基础】Java初始化有何玄机?

    对于Java的初始化顺序大家应该清楚,之前在网站上面有专门的讲解,大家可以通过文章下面的“查看原文”来阅读。 初始化顺序总结起来就是: 1、无继承情况的初始化顺...

    程序员互动联盟
  • image的srcset属性

    介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,imag...

    大黄大黄大黄
  • 图解Java设计模式之策略模式

    1)有各种鸭子(比如 野鸭、北京鸭、水鸭等)鸭子有各种行为,比如叫、飞行等等。 2)显示鸭子的信息

    海仔
  • Java-安全发布

     发布是一个动词,是去发布对象。而对象,通俗的理解是:JAVA里面通过 new 关键字 创建一个对象。

    Fisherman渔夫

扫码关注云+社区

领取腾讯云代金券