首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将ScrollViewer放在它应该滚动的内容之上

在前端开发中,ScrollViewer是一个常用的控件,用于在需要滚动的内容上添加滚动条。要将ScrollViewer放在它应该滚动的内容之上,可以按照以下步骤操作:

  1. 首先,在XAML代码中添加ScrollViewer控件,并将需要滚动的内容放在其中。例如:
代码语言:<ScrollViewer>
复制
   <StackPanel>
        <!-- 需要滚动的内容 -->
    </StackPanel>
</ScrollViewer>
  1. 接下来,在ScrollViewer控件中设置相关属性,例如滚动条的位置、大小、颜色等。例如:
代码语言:<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
复制
   <StackPanel>
        <!-- 需要滚动的内容 -->
    </StackPanel>
</ScrollViewer>
  1. 最后,在需要滚动的内容上设置宽度和高度,以确保内容超出可见范围时才会出现滚动条。例如:
代码语言:<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
复制
   <StackPanel Width="200" Height="200">
        <!-- 需要滚动的内容 -->
    </StackPanel>
</ScrollViewer>

通过以上步骤,可以将ScrollViewer控件放在需要滚动的内容之上,并实现滚动功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于ScrollViewr和滚动轮劫持(scroll-wheel-hijack)

什么是滚动轮劫持 这篇文章介绍一个很简单的继承自ScrollViewer的控件: public class ExtendedScrollViewer : ScrollViewer { protected...当然我们不满足于无脑禁用鼠标滚轮,我们应该更智能些,先让ScrollViewer滚到底,再交由外层的ScrollViewer滚下去。...这里面用到几个属性: MouseWheelEventArgs中的Delta表示鼠标滚轮的变更量,当这个值为正数时表示滚轮向上。 ExtentHeight,获取ScrollViewer内容的实际高度。...VerticalOffset,包含滚动内容对应于页首的垂直偏移量的值,有效值介于 0 与 ExtentHeight 减去 ViewportHeight 所得的数值之间。...如果觉得不满足还可以参考HandyControl的ScrollViewer,它直接提供了一个CanMouseWheel属性用于控制是否响应鼠标滚轮,另外还支持了滚动等功能。

1.4K30

OEA 中 WPF 树型表格虚拟化设计方案

要知道如何实现 IScrollInfo,则需要明白 IScrollInfo 的设计原理:     如果 UIVPanel 元素自己要处理滚动信息,它必须知道当前滚动条的 OffSet,并告知 ScrollViewer...在与 ScrollViewer 交互完成的同时,UIVPanel 还应该根据提供的视窗大小,调用基类 VirtualizingPanel 中 ItemContainerGenerator 属性的一套元素生成方法...但是如果这样设计的话,将会导致所有的单元格,都必须放在 UIVPanel 中。...为了使用最外层 ScrollViewer 中的滚动条信息,它通过可视树往上查找到 DataGridRowsPresenter 来获取水平方向上的滚动条位置 HorizontalOffset,而通过这个值...而表格行 TreeGridRow 类则继承自 HeaderedItemsControl 类型,它的总行高应该是本行的高度加上所有子行的高度,也不是一个定值,所以现在虚拟化功能也被关闭。

2.7K70
  • win10 uwp 截图 获取屏幕显示界面保存图片 水印

    假如我们不显示Grid,使用的方法就是让 Grid 被另一个 Grid 挡住,这时对被挡住的Grid截图,看是否还可以拿到 Grid 显示的内容。... 截图之后可以看到结果没影响 那么我们要显示我们的图片显示全,我们可以借用一个简单的控件 ScrollViewer...我们可以在滚动条写大小为很小,但是Width="1"就出错,我们不需要把他放在用户可视的,也就是放在最底层也是可以 水印 UWP图片水印简单,我们需要一个Image和一个水印,水印在图片Zindex比他大...说到这,我们来总的说下,就是用一个滚动条把我们的一个Grid放进去,然后Grid里面存在一张图片和一个TextBlock,图片就是我们需要加水印的,TextBlock就是水印,水印颜色最好渐变,然后使用获取元素图片截图...p=1257 因为保存的图片比较大,我在找压缩图片的算法,找到了这个博客 用C#开发一个WinForm版的批量图片压缩工具 - CSDN博客 还有 GDI+ 如何将图片绘制成圆形的图片 - CSDN博客

    1.3K10

    .net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

    在 ScrollViewer 存在两个滚动方式,物理滚动 和 逻辑滚动,如果使用 物理滚动 那么滚动就是ScrollViewer做的,如何使用逻辑滚动,那么滚动就是控件自己做的。...那么我从 ScrollViewer 接收输入开始讲起 输入 如果大家使用 ScrollViewer 进行滚动,那么也许会遇到一个神奇的需求,如何在触摸下滚动。...是的,如果使用一个简单的 ScrollViewer 是无法使用触摸滚动 请看代码,写一个简单的 ScrollViewer 里面有一些矩形,可以看到这时可以进行鼠标滚动,但是触摸是无法滚动。...ScrollInfo 那么 ScrollInfo 是什么,实际上他是一个接口,在 ScrollViewer 里面放的控件实际上不是直接放在 ScrollViewer 里,控件是放在 ScrollContentPresenter...是不会滚动元素的,滚动元素的是 ScrollViewer 里面的元素,滚动的方式一般都使用在布局的时候设置元素的 X、Y 来让元素滚动。

    1.8K10

    Silverlight:ScorllViewer随Tab键自动跟随子控件的Focus滚动

    当ScrollViewer里包含很多子控件时,默认情况下只能用鼠标手动拖动(或滚轮)滚动条以实现内容的滚动,假如用户是键盘高手,习惯于用Tab键来切换子控件焦点时,即使当前获得焦点的控件在不可见区域,滚动条也不会自动跟随着滚动到相应位置...,这个非常不方便,今天在网上看到一个老外的解决办法,代码转贴于此: private void _ScrollViewer_GotFocus(object sender, RoutedEventArgs...0 : newOffset; // no use returning negative offset }   即:给ScrollViewer的GotFocus事件增加_ScrollViewer_GotFocus...处理方法,然后计算当前获取焦点的控件与ScorllViewer的偏移距离,最终得出滚动条应该滚动的偏移量。...上面这一段代码基本上能解决问题,但是有一个小小的不足:如果有3个输入框从上到下排着,且都在可视范围内,这时如果用鼠标去点击其中一个不是当前获得焦点的输入框,也会触发以上代码,导致滚动条跳动一段距离,这个给用户的感觉好象界面总是在

    1.2K60

    dotnet Framework 源代码 · ScrollViewer

    在 ScrollViewer 存在两个滚动方式,物理滚动 和 逻辑滚动,如果使用 物理滚动 那么滚动就是ScrollViewer做的,如何使用逻辑滚动,那么滚动就是控件自己做的。...那么我从 ScrollViewer 接收输入开始讲起 输入 如果大家使用 ScrollViewer 进行滚动,那么也许会遇到一个神奇的需求,如何在触摸下滚动。...是的,如果使用一个简单的 ScrollViewer 是无法使用触摸滚动 请看代码,写一个简单的 ScrollViewer 里面有一些矩形,可以看到这时可以进行鼠标滚动,但是触摸是无法滚动。...ScrollInfo 那么 ScrollInfo 是什么,实际上他是一个接口,在 ScrollViewer 里面放的控件实际上不是直接放在 ScrollViewer 里,控件是放在 ScrollContentPresenter...是不会滚动元素的,滚动元素的是 ScrollViewer 里面的元素,滚动的方式一般都使用在布局的时候设置元素的 X、Y 来让元素滚动。

    74420

    WPF中WrapPanel、StackPanel等添加滚动条ScrollViewer

    因为在wpf中,想要显示滚动条,需要把控件放在滚动条视图控件(ScrollViewer)中。...ScrollViewer属性说明: VerticalScrollBarVisibility="Auto" // 设置垂直滚动条自动显示,只要内部控件的实际高度大于ScrollViewer的高度,就会自动显示垂直滚动条...HorizontalScrollBarVisibility="Auto" // 设置水平滚动条自动显示,只要内部控件的实际宽度大于ScrollViewer的宽度,就会自动显示水平滚动条。...,这个时候依赖于ScrollViewer控件的宽度。...2、StackPanel 内部控件垂直布局的Panel。 当子控件的宽度大于StackPanel的宽度,就会出现水平滚动条。 当子控件的高度大于StackPanel的高度,就会出现垂直滚动条。

    6.4K20

    New UWP Community Toolkit - AdaptiveGridView

    AdaptiveGridView 控件能够以均匀分组的方式,让一组列填充整个显示空间,它可以对布局和内容的变化做出反应,以便自动适应不同的外观。我们来看一下官方示例的展示: ?...- 内容知否已经拉伸去填充一行,布尔值  另外类中还有一个方法 CalculateColumns(containerWidth, itemWidth), 根据容器宽度和元素宽度,确定控件应该包含几列,...;当单行时,把 MaxHeight 属性设置为 ItemHeight,Orientation 设为纵向,滚动设置包括纵向滚动禁止,隐藏滚动条,横向滚动可用;如果为多行模式,则根据保存的 Orientation...和 滚动条属性恢复显示; private void DetermineOneRowMode() { if (_isLoaded) { var itemsWrapGridPanel...= true; ScrollViewer.SetVerticalScrollMode(this, ScrollMode.Disabled); ScrollViewer.SetVerticalScrollBarVisibility

    1.4K70

    win10 uwp 禁用 ScrollViewer 交互

    如果在 UWP 有一个控件里面有 ScrollViewer 控件,那么因为默认的 ScrollViewer 会使用触摸的交互,这样在控件就收不到触摸的交互 通过 VerticalScrollMode="...ScrollViewer 滑动,先创建一个简单的 UWP 项目 打开 xaml 添加一点代码,创建一个 Canvas 放在 ScrollViewer 内,在里面放一个矩形,通过这个矩形就可以知道有没有移动...> 创建的 ScrollViewer 只有对水平做滑动,尝试用触摸滑动矩形,会发现只能通过垂直滑动 如果想水平也可以滚动,需要设置 HorizontalScrollBarVisibility 属性,设置为...> 现在再试试触摸矩形 如果现在尝试拿到 滚动条外面的 Grid 的 Manipulation 事件,可以看到没被被调用 的误导,同时有更好的阅读体验。

    80550

    win10 UWP RSS阅读器

    [这里写图片描述](http://img.blog.csdn.net/201602221RSS简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议。...RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者。...发布一个RSS文件后,这个RSS Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。...itemTitle + "\n" + itemLink + "\n" + itemContent+"\n"+itemSummary+"\n"; } reminder是通知显示,把每个不为空的值放在...view = e.Parameter as rssstr; base.OnNavigatedTo(e); } rss_page不能滚动

    30020

    WPF --- 触摸屏下的两个问题

    场景 具体场景就是一个配置界面, ScrollViewer 中包含一个StackPanel 然后纵向堆叠,以滚动的方式查看,然后包含多个 TextBlock 、 TextBox 以及DataGrid ,...期间遇到了两个问题: WPF在触摸屏下,如果有滚动条(ScrollViewer)的情况下,默认包含触底反馈的功能,就是触摸屏滑动到底或从底滑到顶,界面都会出现抖动的情况。...的 UI 元素绑定它的反馈事件,然后在注册方法中设置 e.Handled = true; ,这样中断了事件继续冒泡或隧道传播,比如这样 // 在Xaml中,在对应的 UIElement 上绑定ManipulationBoundaryFeedback...触点在DataGrid中无法滚动的问题 这个问题,其实不光在 DataGrid中有,触点在 TextBox 、ListView、ListBox,这一类内置有 ScrollViewer 的控件内,都有同样的问题...我处理这个问题的时候,是先处理的鼠标滑轮无法滚动,处理方案就是根据鼠标的偏移量,手动设置 ScrollViewer 的位置,如下: private void DataGrid_MouseWheel(object

    23410

    win10 UWP RSS阅读器

    于是在网上查了RSS,�RSS简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议。...RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者。...发布一个RSS文件后,这个RSS Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。...itemTitle + "\n" + itemLink + "\n" + itemContent+"\n"+itemSummary+"\n"; } reminder是通知显示,把每个不为空的值放在...rss_page不能滚动TextBlock,可以使用ScrollViewer ScrollViewer Grid.Row="1"> <TextBlock Style

    93610

    WPF 如何判断一个控件在滚动条的里面是用户可见

    我有一个控件,这个控件放在滚动条里面,如果在滚动条滚动到这个控件可以被用户看见的时候,我能知道这个事件,或从什么时机可以拿到用户可以看见的范围修改?...昨天星期八再娶你 大佬问我如何判断在滚动条内可以看到某个元素,他需要在滚动条里面放一个视频播放器,在用户看不到这个播放器的时候自动停下这个播放器 在 WPF 可以通过 ScrollChanged 拿到当前的滚动到哪同时拿到滚动条可见的宽度和高度...在 ScrollChangedEventArgs 提供了多个属性用于拿到当前的滚动条的可见的宽度和高度,滚动条的水平移动和垂直的移动,具体请看下图 在用户修改外层控件的宽度或高度让滚动条的高度或宽度进行修改的时候...我在滚动添加了一个控件,在里面添加了很多文本,其中有一个是歪楼的文本 ScrollViewer ScrollChanged="ScrollViewer_OnScrollChanged...> 我需要在歪楼的文本被用户看到的时候输出,于是我就在后台代码通过本文上面提供的方法拿到这个元素的矩形判断 private void ScrollViewer_OnScrollChanged

    95220

    WPF 解决 ListView 的滚动条不显示

    本文告诉大家如何解决一个诡异的问题,如果有一个 ListView 同时里面的元素的高度很长,但是滚动条就是不显示,怎么让这个滚动条显示 本文不属于小白博客,忽略所有的业务环境和样式问题以及对 ScrollViewer...的设置问题 在开始发现这个问题请先看 ListView 的滚动条,通过继承 ListView 或 ListBox 可以在 Load 事件拿到滚动条,需要判断 ScrollViewer 的 ExtentHeight...OnItemsSourceChanged 重写这个类都是在用户设置数据,在用户设置数据的时候,通过 Dispatcher.InvokeAsync 重新计算,这样就可以解决滚动条不显示 这样的原理是滚动条是否出现是通过判断...ScrollableHeight 或 ScrollableWidth 的值,但是这个值是通过判断内容的长度或宽度减去显示的长度宽度如果显示的内容大于内容就不显示。...当然本文的方法能解决的是 CanContentScroll 已经设置为 false 这样 ExtentHeight 就是内容的长度 通过 ScrollViewer.Content 可以知道 ExtentHeight

    4.2K30

    WPF --- 如何重写WPF原生控件样式?

    重写过程中,遇到了两个问题: 如何获取 「WPF」 原生的 DataGrid 的样式? 滚动条样式中,如何固定滚动条长度? 本篇文章分享一下这两个问题的解决办法。...「第四步:」 可以看到它生成了一堆的资源,这时候我们只需要找我们想要的那一部分,比如 ComboBoxTemplate ,从代码中就可以看出,ComboBox 主要有三部分组成 Popup:它的作用就是当...ToggleButton 的 IsChecked 为true时,展开其内容,它的内容就是 ScrollViewer,就是我们看到的下拉弹出的内容了。...所以,到此为止,我们就明白了原生的 ComboBox 是怎么实现的了,而且有了这个原生样式,就可以在此基础之上进行修改,美化,从而演变成我们想要的样子。...问题2 第二个问题, 滚动条样式中,如何固定滚动条长度? 在原生的滚动条样式中,纵方向上的滚动条的高度是跟随你窗口的大小和内容的多少而改变的,窗口大内容少,滚动条的高度就越大,反之亦然。

    52120

    win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl

    CanvasVirtualControl 而不是 CanvasControl 因为这时的性能比较好 如果你准备画一个非常大的图片 不希望使用很多时间去画看不见的部分 不想把整个图片都放在内存...因为 CanvasVirtualControl 使用位图虚拟化,所以不需要在所有的时候都把位图放在内存中,只有在需要显示的地方才是有效的,存放在内存的,对于不显示的地方是不放在内存,不画出来的。...那么怎么知道触发的显示的矩形?实际上从args.InvalidatedRegions就是拿到一个 Rect ,通过这个就可以判断需要显示的是哪个。...很多时候使用 CanvasVirtualControl 都是和 ScrollViewer 一起使用 ScrollViewer> ScrollViewer> 所以在滚动的时候就可以判断哪些需要显示

    26320

    WPF 表格控件 ReoGrid 的简单使用

    workbook 通过加载 Excel 的文件资源流来呈现内容。...效果如下: 可以看到固定了表头后还是会有表头线突出,这是因为窗体(或者说显示范围)比表格内容区域大,实际使用时可通过设置合适的显示大小,ReoGrid 控件会自动出现滚动条,即可解决这个问题(3.0.0...至于其它的表格样式调整,直接在 Excel 中调整即可(效果和源文件略有差异): 六、支持触摸滚动 到目前为止,在触摸屏下,是只支持触摸滚动条进行内容滚动的,直接在表格内容区进行触摸滚动是没有效果的。...这个应该是 WPF 的 ScrollViewer 本身的问题,之前碰到过,网上有人提供过一个方法来解决(通过附加属性)。...这里如果要支持表头固定,就要用控件自己添加的 ScrollViewer,也就不能直接用那个方法,所以我改了个专用的方法。

    3.8K10

    win10 uwp win2d CanvasVirtualControl CanvasAnimatedControlCanvasVirtualControl其他博客

    如果你准备画一个非常大的图片 不希望使用很多时间去画看不见的部分 不想把整个图片都放在内存 因为 CanvasVirtualControl 使用位图虚拟化,所以不需要在所有的时候都把位图放在内存中...,只有在需要显示的地方才是有效的,存放在内存的,对于不显示的地方是不放在内存,不画出来的。...那么怎么知道触发的显示的矩形?实际上从args.InvalidatedRegions就是拿到一个 Rect ,通过这个就可以判断需要显示的是哪个。...很多时候使用 CanvasVirtualControl 都是和 ScrollViewer 一起使用 ScrollViewer> ScrollViewer> 所以在滚动的时候就可以判断哪些需要显示

    56610

    win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl CanvasAnimatedControlCanvas

    CanvasVirtualControl 而不是 CanvasControl 因为这时的性能比较好 如果你准备画一个非常大的图片 不希望使用很多时间去画看不见的部分 不想把整个图片都放在内存...因为 CanvasVirtualControl 使用位图虚拟化,所以不需要在所有的时候都把位图放在内存中,只有在需要显示的地方才是有效的,存放在内存的,对于不显示的地方是不放在内存,不画出来的。...那么怎么知道触发的显示的矩形?实际上从args.InvalidatedRegions就是拿到一个 Rect ,通过这个就可以判断需要显示的是哪个。...很多时候使用 CanvasVirtualControl 都是和 ScrollViewer 一起使用 ScrollViewer> ScrollViewer> 所以在滚动的时候就可以判断哪些需要显示

    55910

    WPF 已知问题 开启 IsManipulationEnabled 之后触摸长按 RepeatButton 不会触发连续的 Click 事件

    本文记录 WPF 的一个已知问题,在 RepeatButton 上开启 IsManipulationEnabled 漫游支持之后,将会导致触摸长按到 RepeatButton 之上时,不会收到源源不断的...Click 事件 这是有个伙伴在 WPF 官方仓库报告的问题,详细请看 https://github.com/dotnet/wpf/issues/8223 原始的问题是他发现放在 ListBox 里面的...RepeatButton 无法在触摸长按的时候收到连续的 Click 事件,以为是放在 ListBox 下的 RepeatButton 存在奇怪的问题 实际上他的这个问题和 ListBox 没有任何关系...接下来测试将 ListBox 里面的 ScrollViewer 控件的 IsManipulationEnabled 属性设置为 false 后的对 RepeatButton 的触摸长按,修改代码如下...,预计很长时间都不会解决这个问题 本文以上代码放在github 和 gitee 欢迎访问 可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码

    19110
    领券