首页
学习
活动
专区
工具
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 所得数值之间。...如果觉得不满足还可以参考HandyControlScrollViewer直接提供了一个CanMouseWheel属性用于控制是否响应鼠标滚轮,另外还支持了滚动等功能。

1.2K30

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

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

2.6K70

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.2K10

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

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

1.7K10

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

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

1.2K60

dotnet Framework 源代码 · ScrollViewer

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

68820

WPF中WrapPanel、StackPanel等添加滚动ScrollViewer

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

4.2K20

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.3K70

win10 uwp 禁用 ScrollViewer 交互

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

76750

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

9510

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不能滚动

26920

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

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

86820

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 <TextBlock Style

88510

WPF 解决 ListView 滚动条不显示

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

3.9K30

win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl

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

23420

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

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

25920

WPF 表格控件 ReoGrid 简单使用

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

3K10

win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl CanvasAnimatedControlCanvas

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

54010

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 命令进入此空文件夹,在命令行里面输入以下代码

7910
领券