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

亦凉 2022-07-13 14:43 275阅读 0赞

wpf中，在控件中直接设置ScrollViewer.HorizontalScrollBarVisibility和ScrollViewer.VerticalScrollBarVisibility属性，并不能显示滚动条。因为在wpf中，想要显示滚动条，需要把控件放在滚动条视图控件(ScrollViewer)中。

ScrollViewer属性说明：

VerticalScrollBarVisibility="Auto"  // 设置垂直滚动条自动显示，只要内部控件的实际高度大于ScrollViewer的高度，就会自动显示垂直滚动条。
    HorizontalScrollBarVisibility="Auto"  // 设置水平滚动条自动显示，只要内部控件的实际宽度大于ScrollViewer的宽度，就会自动显示水平滚动条。

由于WrapPanel和StackPanel比较特殊，所以这里对这两个控件做一下说明：

1、WrapPanel

内部控件自动换行布局的Panel。

那么什么情况下会自动换行呢？当达到WrapPanel宽度的时候。

问题：如果WrapPanel的HorizontalAlignment属性都设置为"Stretch"，那么就代表宽度可以无限大，这个时候就只会显示水平滚动条，垂直滚动条不生效。

解决方案1：设置WrapPanel的宽度。

解决方案2：设置WrapPanel的宽度自适应ScrollViewer的宽度：Width="\{Binding ElementName=scrList, Path=Width, Mode=OneWay\}"，这个时候依赖于ScrollViewer控件的宽度。

2、StackPanel

内部控件垂直布局的Panel。

当子控件的宽度大于StackPanel的宽度，就会出现水平滚动条。

当子控件的高度大于StackPanel的高度，就会出现垂直滚动条。

**一、WrapPanel应用举例。**

1、显示水平滚动条。

<ScrollViewer x:Name="scr" Margin="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                                    <WrapPanel x:Name="pnlCandidate"/>
                                </ScrollViewer>

2、显示垂直滚动条。

第一种情况：

<ScrollViewer x:Name="scr" Margin="0" VerticalScrollBarVisibility="Auto">
                                    <WrapPanel x:Name="pnlCandidate"/>
                                </ScrollViewer>

这个时候默认WrapPanel的HorizontalAlignment=“Stretch”，即自适应ScrollerViewer的宽度，所以WrapPanel子控件会自动换行，当超过父控件的高度，会显示垂直滚动条。

第二种情况：

<ScrollViewer x:Name="scr" Margin="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                                    <WrapPanel x:Name="pnlCandidate" Width="{Binding ElementName=scrList, Path=Width, Mode=OneWay}"/>
                                </ScrollViewer>

当设置水平和垂直滚动条都自动显示的时候，如果想显示垂直滚动条，则需要设置Width="\{Binding ElementName=scrList, Path=Width, Mode=OneWay\}"，使WrapPanel自适应ScrollViewer的宽度。

二、StackPanel子控件显示滚动条。

<StackPanel>
                                <Label Content="候选列表" FontSize="18" Width="5000" Background="Transparent" Foreground="White" BorderThickness="1" BorderBrush="{DynamicResource DefaultBorderColor}"/>
                                <ScrollViewer x:Name="scrList" Margin="0" VerticalScrollBarVisibility="Auto" Height="390">
                                    <local:WrapPanelTemplates x:Name="pnlCandidate"/>
                                </ScrollViewer>
                            </StackPanel>

效果图：

![Center][]

[Center]: /images/20220713/888567ced3b140a985ae3b1783c2fca0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关 wpf小技巧——datagrid 滚动条问题

很简单的布局代码如下复制代码 <Grid.ColumnDefinitions> </Grid.ColumnDefinitions> <G

蔚落/ 2024年03月27日 15:10/ 0 赞/ 116 阅读

相关 uniapp中scrollview隐藏滚动条，安卓和ios

按照官方文档设置了：show-scrollbar为false，但是不起作用，仍然显示滚动条，，，，乌鱼子 <table> <tbody> <tr> <td>

迈不过友情╰/ 2023年10月04日 19:11/ 0 赞/ 35 阅读

相关 Echarts中dataZoom添加滚动条

1、dataZoom配置 dataZoom: [{ //默认控制x轴

￡神魔★判官ぃ/ 2023年01月13日 10:07/ 0 赞/ 309 阅读

相关 java jtextarea滚动条下滑_Java中JTextArea如何添加滚动条

![53c21edc328ad9ed790ce814f8648570.png][] package com.test; import java.awt.\; import

青旅半醒/ 2022年11月07日 04:29/ 0 赞/ 204 阅读

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

wpf中，在控件中直接设置ScrollViewer.HorizontalScrollBarVisibility和ScrollViewer.VerticalScrollBarVi

亦凉/ 2022年07月13日 14:43/ 0 赞/ 276 阅读

相关继续聊WPF——自定义滚动条

<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.co

Dear 丶/ 2022年06月16日 07:40/ 0 赞/ 436 阅读

相关 android中在布局中添加滚动条--ScrollView can host only one direct child

今天在做安卓项目时，想使用滚动条保证页面布局，使用方法比较简单， <ScrollView xmlns:android="http://sc

分手后的思念是犯贱/ 2022年04月13日 13:16/ 0 赞/ 247 阅读

相关 TextView自身的滚动条与 ScrollView的滚动条的差别

TextView自身也提供了滚动条的设置。ScrollView也提供了滚动条的设置。那么，它们之间有何区别呢？还真的有。我是想做一个TextView，然后里边放置一些超链接

╰+攻爆jí腚メ/ 2022年01月11日 01:33/ 0 赞/ 286 阅读

相关 WPF ScrollViewer滚动条样式，适合触摸屏使用

[WPF ScrollViewer滚动条样式，适合触摸屏使用][WPF ScrollViewer] 原文: [WPF ScrollViewer滚动条样式，适合触摸屏使用][W

柔情只为你懂/ 2021年11月05日 11:14/ 0 赞/ 571 阅读

相关 rn 图片组件Image、滚动条组件ScrollView

图片组件 <Image /> 属性: 1、加载本地图片:source={require('路径')} 其中:

淡淡的烟草味﹌/ 2021年07月24日 16:18/ 0 赞/ 817 阅读