1

I cannot get my scrollviewer to scroll

If I set the VerticalScrollBarVisibility="Auto" it doesn't even show which indicates it doesn't think it is needed

I have tried different things with the Row heights of my grid like changing them from auto to * but still no luck

Here is my 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>
David
  • 1,203
  • 6
  • 25
  • 48
  • 1
    I guess the first StackPanel is the problem. Try to replace it with a Grid. – Mighty Badaboom Mar 22 '17 at 11:30
  • I tried changing it to a Grid (without any column or row definitions) and still same problem – David Mar 22 '17 at 11:37
  • @David, is StackPanel nested into another StackPanel or Grid Row with Auto height? when I tried a simple test in an empty Window - `` vs `` - Grid made the difference – ASh Mar 22 '17 at 11:48
  • My StackPanel is inside a Border and DockPanel. I have updated the XAML – David Mar 22 '17 at 11:52
  • And also inside a UserControl with set heights, I assume this could be the issue? – David Mar 22 '17 at 11:57

2 Answers2

4

for some reason StackPanel inside DockPanel decides that it can use unlimited height for content. ScrollViewer doesn't show scroll because its height is equal to content height.

setting MaxHeight for ScrollViewer should solve the issue. The trick is to find correct value for MaxHeight - bind it to the height of some other element if the window. 

<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>
ASh
  • 34,632
  • 9
  • 60
  • 82
  • I have tried as you suggested and still no luck. I have updated my XAML above to show my changes – David Mar 22 '17 at 12:13
  • @David, it is a bit different from what I suggested. Add a border around StackPanel with ScrollViewer. That border is invisible and doesn't have any other purpose except measuring height – ASh Mar 22 '17 at 12:14
  • Sorry - I thought you meant the first border on my page. Updated again. This time when I run it I see nothing on the page, not a single control – David Mar 22 '17 at 12:33
  • @David, sorry, I should have put a bit more code myself. No additional stackpanel, onle a border around existing one – ASh Mar 22 '17 at 12:37
  • @David I have tried and copied full UserControl code (had to remove duplicate Name="b"). No scroll indeed. As you said earlier in comment UserControl has a fixed height "680". I think you should remove it and allow parent container of user control set available size. for designer purposes `d:DesignHeight="680" d:DesignWidth="750"` – ASh Mar 22 '17 at 13:01
  • Yep I discovered that this morning and have been meaning to log back in and mark this as the answer...and add that additional info. You beat me to it. Thanks for all your help – David Mar 23 '17 at 05:48
2

Putting a ScrollViewer inside a StackPanel is always a bad idea as a StackPanel measures its children with an infinite space:

Horizontal scroll for stackpanel doesn't work

Replace the StackPanel with a Grid with two 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>

You may have to replace some of the inner StackPanels as well but using a Grid as the child element of the ScrollViewer should make the scroll bars appear when they are needed.

Community
  • 1
  • 1
mm8
  • 163,881
  • 10
  • 57
  • 88