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

大家好，又见面了，我是你们的朋友全栈君。

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>

效果图：