WPF XAML ScrollViewer 不会滚动答案

【问题标题】：WPF XAML ScrollViewer will not scrollWPF XAML ScrollViewer 不会滚动
【发布时间】：2017-03-22 21:55:53
【问题描述】：

我的滚动查看器无法滚动

如果我设置 VerticalScrollBarVisibility="Auto" 它甚至不会显示表明它认为不需要它

我尝试过使用网格的行高度不同的方法，例如将它们从 auto 更改为 *，但仍然没有运气

这是我的 XAML

<UserControl mc:Ignorable="d" Height="680" Width="750"
         d:DesignHeight="300" d:DesignWidth="300">

<Border Name="b" Margin="10,0,10,10" Style="{DynamicResource BorderStyle}" Background="{DynamicResource BackgroundBrush}">
    <DockPanel x:Name="MainPanel">

        <!-- header area -->
        <DockPanel Margin="10,0,10,0" DockPanel.Dock="Top" Height="80" x:Name="HeaderPanel">
            <TextBlock Text="Uncertainty in Sample - Volume Final and Volume Initial" Style="{DynamicResource HeaderStyle}" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" Foreground="{DynamicResource HeaderFontColor}"/>
            <Image Source="/images/sample.jpg" HorizontalAlignment="Right"></Image>
        </DockPanel>

     <Border Name="b">
        <StackPanel>

            <Separator Height="1" Margin="0" VerticalAlignment="Top" Width="750" HorizontalAlignment="Left"/>

            <ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="{Binding Path=ActualHeight, ElementName=b, Mode=OneWay}">                    <Grid HorizontalAlignment="Left" x:Name="Outer" VerticalAlignment="Top" Margin="0,10,0,0">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <GroupBox Grid.Row="0" Grid.Column="0" Header="Volume Final" Style="{DynamicResource GroupBoxStyle}">

                        <Grid HorizontalAlignment="Left" x:Name="GridVolume" VerticalAlignment="Top" Margin="0,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <Label Grid.Row="0" Grid.Column="0" Content="Select Volumetric size:" Target="{Binding ElementName=VolumetricComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                            <ComboBox x:Name="VolumetricComboBox" Grid.Row="0" Grid.Column="1" Width="180" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="Label" ItemsSource="{Binding Path=Volumetrics}" SelectedItem="{Binding Path=SelectedVolumeFinalVolumetric, Mode=TwoWay}" Height="22" />


                            <Label Grid.Row="1" Grid.Column="0" Content="Select Solvent:" Target="{Binding ElementName=SolventComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                        <ComboBox x:Name="SolventComboBox" Grid.Row="1" Grid.Column="1" Width="180" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="Solvent" ItemsSource="{Binding Path=ThermalExpansions}" SelectedItem="{Binding Path=SelectedVolumeFinalThermalExpansion, Mode=TwoWay}" Height="22" />

                            <Label Grid.Row="2" Grid.Column="0" Content="Select Temperature (° c):" Target="{Binding ElementName=SolventComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                        <ComboBox x:Name="TemperatureComboBox" Grid.Row="2" Grid.Column="1" Width="180" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="TemperatureValue" ItemsSource="{Binding Path=Temperatures}" SelectedItem="{Binding Path=SelectedVolumeFinalTemperature, Mode=TwoWay}" Height="22" />

                        </Grid>
                    </GroupBox>


                    <GroupBox Grid.Row="0" Grid.Column="1" Header="Area" Style="{DynamicResource GroupBoxStyle}">
                        <StackPanel>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                                <Label Content="System Inj. Reproducibility (% RSD):" Foreground="{DynamicResource InputFontColor}" />
                                <TextBox TextWrapping="Wrap" Style="{StaticResource TextStyle}" x:Name="SystemInjectionTextBox" Width="135" Text="{Binding Path=Sample.Precision.SystemInjectionReproducibility}" Margin="5,0,0,0" IsEnabled="True"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                                <Label Content="Enter % RSD of Sample results (zero if unknown):" Target="{Binding ElementName=AreaTextBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}"/>
                                <TextBox TextWrapping="Wrap" Style="{StaticResource TextStyle}" x:Name="AreaTextBox" Width="70" Text="{Binding Path=Sample.Precision.RSDKnownAmount}" HorizontalAlignment="Left" Margin="5,0,0,0" />
                            </StackPanel>
                        </StackPanel>
                    </GroupBox>

                    <GroupBox Grid.Row="1" Grid.Column="0" Header="Volume Initial" Style="{DynamicResource GroupBoxStyle}">
                        <Grid HorizontalAlignment="Left" x:Name="GridMass" VerticalAlignment="Top" Margin="0,10,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <Label Grid.Row="0" Grid.Column="0" Content="Select Balance:" Target="{Binding ElementName=BalanceComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                            <ComboBox x:Name="BalanceComboBox" Grid.Row="0" Grid.Column="1" Width="180" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="Description" ItemsSource="{Binding Path=Balances}" SelectedItem="{Binding Path=SelectedVolumeIntitialBalance, Mode=TwoWay}" Height="22" />

                            <Label Grid.Row="1" Grid.Column="0" Content="Mass Weighed (g):" Target="{Binding ElementName=MassWeighedTextBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                            <TextBox Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Style="{StaticResource TextStyle}" x:Name="MassWeighedTextBox" Width="135" Text="{Binding Path=Sample.VolumeInitial.Mass.MassWeighed}" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                        </Grid>

                    </GroupBox>

                    <GroupBox Grid.Row="2" Grid.Column="0" Header="Reported Units" Style="{DynamicResource GroupBoxStyle}">
                        <Grid HorizontalAlignment="Left" x:Name="GridReportedUnits" VerticalAlignment="Top" Margin="0,10,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <Label Grid.Row="0" Grid.Column="0" Content="Select Reported Units:" Target="{Binding ElementName=BalanceComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                            <StackPanel Grid.Row="0" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                                <StackPanel.Resources>
                                    <views:EnumBooleanConverter x:Key="enumBooleanConverter" />
                                </StackPanel.Resources>
                                <RadioButton GroupName="ReportedUnits" Content="W/V" IsChecked="{Binding Path=SelectedRadioButton, Converter={StaticResource enumBooleanConverter}, ConverterParameter=WeightVolume}" Command="{Binding RadioClicked}" Margin="0, 0, 10, 0" />
                                <RadioButton GroupName="ReportedUnits" Content="W/W" IsChecked="{Binding Path=SelectedRadioButton, Converter={StaticResource enumBooleanConverter}, ConverterParameter=WeightWeight}" Command="{Binding RadioClicked}" Margin="0, 0, 10, 0"/>
                            </StackPanel>
                        </Grid>
                    </GroupBox>

                    <GroupBox Grid.ColumnSpan="3" Grid.Row="3" Header="Density" Style="{DynamicResource GroupBoxStyle}" Visibility="{Binding Path=DensityVisible}">

                        <StackPanel>
                            <Grid HorizontalAlignment="Left" x:Name="GridDensity" VerticalAlignment="Top" Margin="5,5,0,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <Label Grid.Row="0" Grid.Column="0" Content="Enter Method of Density Determination:" Target="{Binding ElementName=DensityDeterminationComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                                <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
                                    <ComboBox x:Name="DensityDeterminationComboBox" Width="200" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="Method" ItemsSource="{Binding Path=DensityDeterminations}" SelectedItem="{Binding Path=SelectedDensityDetermination, Mode=TwoWay}" Height="22" />
                                    <Label Grid.Row="0" Grid.Column="0" Content=" u(d) = 1" Foreground="{DynamicResource InputFontColor}" Visibility="{Binding Path=DensityClientSuppliedVisible}"/>
                                </StackPanel>
                            </Grid>


                            <Grid HorizontalAlignment="Left" Grid.Row="4" Grid.ColumnSpan="3" x:Name="OuterDensityGridMass" VerticalAlignment="Top" Margin="0,20,0,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <GroupBox Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" Header="" Style="{DynamicResource GroupBoxStyle}" Visibility="{Binding Path=DensityDensitoVisible}">

                                    <Grid HorizontalAlignment="Left" x:Name="DensityGridUserEntered" VerticalAlignment="Top" Margin="0,10,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>

                                        <Label Grid.Row="1" Grid.Column="0" Content="Enter Density (g/ml):" Target="{Binding ElementName=DensityUserEnteredTextBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                                        <TextBox Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Style="{StaticResource TextStyle}" x:Name="DensityUserEnteredTextBox" Width="135" Text="{Binding Path=UserEnteredDensity, Mode=TwoWay}" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                                    </Grid>

                                </GroupBox>

                                <GroupBox Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" Header="Mass" Style="{DynamicResource GroupBoxStyle}" Visibility="{Binding Path=DensityMassVolumeVisible}">

                                    <Grid HorizontalAlignment="Left" x:Name="DensityGridMass" VerticalAlignment="Top" Margin="0,10,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>

                                        <Label Grid.Row="0" Grid.Column="0" Content="Select Balance:" Target="{Binding ElementName=DensityBalanceComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                                        <ComboBox x:Name="DensityBalanceComboBox" Grid.Row="0" Grid.Column="1" Width="200" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="Description" ItemsSource="{Binding Path=Balances}" SelectedItem="{Binding Path=SelectedDensityBalance, Mode=TwoWay}" Height="22" />

                                        <Label Grid.Row="1" Grid.Column="0" Content="Mass Weighed (g):" Target="{Binding ElementName=DensityMassWeighedTextBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                                        <TextBox Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Style="{StaticResource TextStyle}" x:Name="DensityMassWeighedTextBox" Width="135" Text="{Binding Path=Sample.Density.Mass.MassWeighed}" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                                    </Grid>

                                </GroupBox>

                                <GroupBox Grid.Row="0" Grid.Column="1" Header="Volume" Style="{DynamicResource GroupBoxStyle}" Visibility="{Binding Path=DensityMassVolumeVisible}" Margin="5,5,5,5">

                                    <Grid HorizontalAlignment="Left" x:Name="DensityGridVolume" VerticalAlignment="Top" Margin="0,10,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>

                                        <Label Grid.Row="0" Grid.Column="0" Content="Select Volumetric size:" Target="{Binding ElementName=DensityVolumetricComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                                        <ComboBox x:Name="DensityVolumetricComboBox" Grid.Row="0" Grid.Column="1" Width="180" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="Label" ItemsSource="{Binding Path=Volumetrics}" SelectedItem="{Binding Path=SelectedDensityVolumetric, Mode=TwoWay}" Height="22" />

                                        <Label Grid.Row="1" Grid.Column="0" Content="Select Solvent:" Target="{Binding ElementName=DensitySolventComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                                        <ComboBox x:Name="DensitySolventComboBox" Grid.Row="1" Grid.Column="1" Width="180" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="Solvent" ItemsSource="{Binding Path=ThermalExpansions}" SelectedItem="{Binding Path=SelectedDensityThermalExpansion, Mode=TwoWay}" Height="22" />

                                        <Label Grid.Row="2" Grid.Column="0" Content="Select Temperature:" Target="{Binding ElementName=DensityTemperatureComboBox, Mode=OneWay}" Foreground="{DynamicResource InputFontColor}" />
                                        <ComboBox x:Name="DensityTemperatureComboBox" Grid.Row="2" Grid.Column="1" Width="180" HorizontalAlignment="Left" Margin="5,0,0,0" DisplayMemberPath="TemperatureValue" ItemsSource="{Binding Path=Temperatures}" SelectedItem="{Binding Path=SelectedDensityTemperature, Mode=TwoWay}" Height="22" />
                                    </Grid>

                                </GroupBox>

                            </Grid>
                        </StackPanel>
                    </GroupBox>

                </Grid>

            </ScrollViewer>
          </StackPanel>
         </Border>

    </DockPanel>
</Border>
</UserControl>

【问题讨论】：

我猜第一个 StackPanel 是问题所在。尝试用 Grid 替换它。
我尝试将其更改为 Grid（没有任何列或行定义），但仍然是同样的问题
@David，StackPanel 是否嵌套在另一个具有自动高度的 StackPanel 或 Grid Row 中？当我在一个空窗口中尝试一个简单的测试时 - <StackPanel><ScrollViewer/></StackPanel> vs <Grid><ScrollViewer/></Grid> - Grid 有所作为
我的 StackPanel 位于 Border 和 DockPanel 内。我已经更新了 XAML
而且在设置高度的 UserControl 中，我认为这可能是问题所在？

标签： wpf xaml

【解决方案1】：

出于某种原因，StackPanel 内部的DockPanel 决定它可以使用无限的高度来存储内容。 ScrollViewer 不显示滚动，因为它的高度等于内容高度。

为 ScrollViewer 设置 MaxHeight 应该可以解决问题。诀窍是找到 MaxHeight 的正确值 - 如果是窗口，则将其绑定到其他元素的高度。

<DockPanel x:Name="MainPanel">

    <!-- header area -->
    <DockPanel Margin="10,0,10,0" DockPanel.Dock="Top" Height="80" x:Name="HeaderPanel">
        <TextBlock Text="Uncertainty in Sample - Volume Final and Volume Initial" Style="{DynamicResource HeaderStyle}" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" Foreground="{DynamicResource HeaderFontColor}"/>
        <Image Source="/images/sample.jpg" HorizontalAlignment="Right"></Image>
    </DockPanel>

    <Border Name="b">
    <StackPanel>

        <Separator Height="1" Margin="0" VerticalAlignment="Top" Width="750" HorizontalAlignment="Left"/>

        <ScrollViewer VerticalScrollBarVisibility="Auto"
                      MaxHeight="{Binding Path=ActualHeight, ElementName=b, Mode=OneWay}">
            <Grid>

            </Grid>
        </ScrollViewer>
    </StackPanel>
    </Border>
</DockPanel>

【讨论】：

我已经按照您的建议进行了尝试，但仍然没有运气。我已经更新了上面的 XAML 以显示我的更改
@David，这与我的建议有点不同。使用 ScrollViewer 在 StackPanel 周围添加边框。该边框是不可见的，除了测量高度之外没有任何其他用途
对不起 - 我以为你的意思是我页面上的第一个边框。再次更新。这次当我运行它时，我在页面上什么也看不到，没有一个控件
@David，对不起，我自己应该多写一些代码。没有额外的堆栈面板，只有现有的一个边框
@David 我已经尝试并复制了完整的 UserControl 代码（必须删除重复的 Name="b"）。确实没有卷轴。正如您之前在评论中所说，UserControl 具有固定的高度“680”。我认为您应该删除它并允许用户控件集的父容器可用大小。用于设计目的d:DesignHeight="680" d:DesignWidth="750"

【解决方案2】：

将ScrollViewer 放在StackPanel 中总是一个坏主意，因为StackPanel 用无限空间测量它的孩子：

Horizontal scroll for stackpanel doesn't work

将StackPanel 替换为Grid 和两个RowDefinitions：

<Border Name="b" Margin="10,0,10,10" Style="{DynamicResource BorderStyle}" Background="{DynamicResource BackgroundBrush}">
    <DockPanel x:Name="MainPanel">

        <!-- header area -->
        <DockPanel Margin="10,0,10,0" DockPanel.Dock="Top" Height="80" x:Name="HeaderPanel">
            <TextBlock Text="Uncertainty in Sample - Volume Final and Volume Initial" Style="{DynamicResource HeaderStyle}" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" Foreground="{DynamicResource HeaderFontColor}"/>
            <Image Source="/images/sample.jpg" HorizontalAlignment="Right"></Image>
        </DockPanel>

        <Border Name="b">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Separator Height="1" Margin="0" VerticalAlignment="Top" Width="750" HorizontalAlignment="Left"/>

                <ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="{Binding Path=ActualHeight, ElementName=b, Mode=OneWay}" Grid.Row="1">
                    <Grid HorizontalAlignment="Left" x:Name="Outer" VerticalAlignment="Top" Margin="0,10,0,0">
                        ...
                    </Grid>
                </ScrollViewer>
            </Grid>
        </Border>

    </DockPanel>
</Border>

您可能还需要替换一些内部StackPanels，但使用Grid 作为ScrollViewer 的子元素应该会使滚动条在需要时出现。

【讨论】：