XAML Scrollviewer height is infinite

Question

I have a Scrollviewer within a Stackpannel and Grid which acts like a sub menu. Its height it set bound to the parent menu.

Parent menu properties:

<Grid Grid.Row="1"  x:Name="tooldropdown" Width="250"  VerticalAlignment="Stretch"  Visibility="{Binding ElementName=ButtonToolbox, Path=IsChecked, Converter={StaticResource BoolToVisConverter}, FallbackValue=Hidden}">

Sub Menu:

     <Grid x:Name="PopupBaseMapLayers" Grid.Row="1" Height="{Binding ElementName=tooldropdown, Path=Height}"  Visibility="Collapsed" Panel.ZIndex="3000"  >
         <Border Background="White" Width="253"  >
            <StackPanel>
             <Grid  Height="30" Background="#FFC6DFFF"   >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="31*" />
                        <ColumnDefinition Width="47*"/>
                        <ColumnDefinition Width="35" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0"HorizontalContentAlignment="Center" Content="Base Maps" VerticalContentAlignment="Center" Height="30" BorderBrush="#c6dfff" BorderThickness="1" FontSize="14" Foreground="#FF004FB4" Grid.ColumnSpan="2">
                        <Label.Background>
                            <SolidColorBrush Color="#FFC6DFFF"/>
                        </Label.Background>
                    </Label>
                    <Button Grid.Column="2" Click="ButtonBaseMapLayers_Click" Background="#FF004FB4" FontWeight="Bold" FontFamily="OCR A Extended" Foreground="White" Margin="4,3,3,2" BorderBrush="{x:Null}">X</Button>
                </Grid>
                <ScrollViewer VerticalScrollBarVisibility="Visible"  Margin="0,0,0,200" CanContentScroll="True" Height="{Binding ElementName=tooldropdown, Path=ActualHeight}" >

                    <ItemsControl HorizontalAlignment="Center" ItemsSource="{Binding BaseMapLayers, ElementName=EsriControl}">

                        <ItemsControl.ItemTemplate>
                            <DataTemplate DataType="{x:Type local:BaseMapLayer}">
                                <Border Background="Transparent" BorderBrush="Transparent" Margin="2" Padding="5">

                                    <StackPanel Orientation="Horizontal">


                                        <CheckBox VerticalAlignment="Center" IsEnabled="{Binding AddButtonEnabled}" IsChecked="{Binding IsInMenu}" Tag="{Binding}" />
                                        <ContentPresenter ContentTemplate="{StaticResource BaseMapLayerMenuTemplate}" Width="250" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </StackPanel>
          </Border>
        </Grid>

However the issue I'm having is that while the grid's height is correct the ScrollViewer overflows vertically and doesn't nest correctly within the grid. It doesn't visually overflow but the scroll bar disappears (see img)

Answer 1

Fixed, seemed if I seperated it into two different border containers and cut one of the StackPannels out it functioned and the scroll view didn't overflow. Here's a quick skeleton of the structure change:

<Grid x:Name="PopupBaseMapLayers" Grid.Row="1" Panel.ZIndex="3000" VerticalAlignment="Stretch">
      <Border Background="White" Width="253" >
          <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Background="#FFC6DFFF"   >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="31*" />
                    <ColumnDefinition Width="47*"/>
                    <ColumnDefinition Width="35" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" HorizontalContentAlignment="Center" Content="Base Maps" VerticalContentAlignment="Center" Height="30" BorderBrush="#c6dfff" BorderThickness="1" FontSize="14" Foreground="#FF004FB4" Grid.ColumnSpan="2">
                    <Label.Background>
                        <SolidColorBrush Color="#FFC6DFFF"/>
                    </Label.Background>
                </Label>
                <Button Grid.Column="2"  Background="#FF004FB4" FontWeight="Bold" FontFamily="OCR A Extended" Foreground="White" Margin="4,3,3,2" BorderBrush="{x:Null}">X</Button>
            </Grid>
        </Grid>
    </Border>
   <Border Background="White" Width="253" Margin="0,30,0,0"  >
       <ScrollViewer VerticalScrollBarVisibility="Visible"  CanContentScroll="True" >
            <StackPanel Orientation="Vertical">
                <TextBlock>test data</TextBlock>
              </StackPanel>
       </ScrollViewer>
    </Border>  
</Grid>

Answer 2

remove the outer Stackpanel you don't need it and it will expand the ScrollViewer to infinity

EDIT

I just saw your edit. How about this:

 <Grid x:Name="PopupBaseMapLayers" Grid.Row="1" Height="{Binding ElementName=tooldropdown, Path=ActualHeight}"  Visibility="Collapsed" Panel.ZIndex="3000"  >
     <Border Background="White" Width="253"  >
        <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="30">
               <RowDefinition Height="Auto">
            </Grid.RowDefinitions>
            <Grid Background="#FFC6DFFF"   >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="31*" />
                    <ColumnDefinition Width="47*"/>
                    <ColumnDefinition Width="35" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0"HorizontalContentAlignment="Center" Content="Base Maps" VerticalContentAlignment="Center" Height="30" BorderBrush="#c6dfff" BorderThickness="1" FontSize="14" Foreground="#FF004FB4" Grid.ColumnSpan="2">
                    <Label.Background>
                        <SolidColorBrush Color="#FFC6DFFF"/>
                    </Label.Background>
                </Label>
                <Button Grid.Column="2" Click="ButtonBaseMapLayers_Click" Background="#FF004FB4" FontWeight="Bold" FontFamily="OCR A Extended" Foreground="White" Margin="4,3,3,2" BorderBrush="{x:Null}">X</Button>
            </Grid>
            <ScrollViewer VerticalScrollBarVisibility="Visible"  CanContentScroll="True" Grid.Row="1">

                <ItemsControl HorizontalAlignment="Center" ItemsSource="{Binding BaseMapLayers, ElementName=EsriControl}">

                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type local:BaseMapLayer}">
                            <Border Background="Transparent" BorderBrush="Transparent" Margin="2" Padding="5">

                                <StackPanel Orientation="Horizontal">


                                    <CheckBox VerticalAlignment="Center" IsEnabled="{Binding AddButtonEnabled}" IsChecked="{Binding IsInMenu}" Tag="{Binding}" />
                                    <ContentPresenter ContentTemplate="{StaticResource BaseMapLayerMenuTemplate}" Width="250" />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
      </Border>
    </Grid>

a few notes:

• don't bind to Height, but ActualHeight
• if you bind the outer grid's height to the same value as the inner one and the inner one also but have a 30 pixel grid above it, these 30 pixels will be cut off at the end, and it doesn't even matter that you had a Margin at the end.

Answer 3

ScrollViewers are type of panels that do not like the idea of being someone's child, they like to be on top of things, try this:

    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <Grid x:Name="PopupBaseMapLayers" Grid.Row="1" Height="{Binding ElementName=tooldropdown, Path=Height}"  Visibility="Collapsed" Panel.ZIndex="3000"  >
            <Border Background="White" Width="253"  >
                <StackPanel>
                    <Grid  Height="30" Background="#FFC6DFFF"   >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="31*" />
                            <ColumnDefinition Width="47*"/>
                            <ColumnDefinition Width="35" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0"HorizontalContentAlignment="Center" Content="Base Maps" VerticalContentAlignment="Center" Height="30" BorderBrush="#c6dfff" BorderThickness="1" FontSize="14" Foreground="#FF004FB4" Grid.ColumnSpan="2">
                            <Label.Background>
                                <SolidColorBrush Color="#FFC6DFFF"/>
                            </Label.Background>
                        </Label>
                        <Button Grid.Column="2" Click="ButtonBaseMapLayers_Click" Background="#FF004FB4" FontWeight="Bold" FontFamily="OCR A Extended" Foreground="White" Margin="4,3,3,2" BorderBrush="{x:Null}">X</Button>
                    </Grid>

                    <ItemsControl HorizontalAlignment="Center" ItemsSource="{Binding BaseMapLayers, ElementName=EsriControl}">

                            <ItemsControl.ItemTemplate>
                                <DataTemplate DataType="{x:Type local:BaseMapLayer}">
                                    <Border Background="Transparent" BorderBrush="Transparent" Margin="2" Padding="5">

                                        <StackPanel Orientation="Horizontal">


                                            <CheckBox VerticalAlignment="Center" IsEnabled="{Binding AddButtonEnabled}" IsChecked="{Binding IsInMenu}" Tag="{Binding}" />
                                            <ContentPresenter ContentTemplate="{StaticResource BaseMapLayerMenuTemplate}" Width="250" />
                                        </StackPanel>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                </StackPanel>
            </Border>
        </Grid>
    </ScrollViewer>