Search code examples
wpfuser-controls

Nested User Controls in top level Scroll Viewer not resulting in a scroll bar


I have a main window with a scroll viewer that houses and items control with a user control:

   <ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2">
        <ItemsControl ItemsSource="{Binding oObsByDiv}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <uc:ucObservationsHeader/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

ucObservationsHeader shows a title bar with a nested list of observations in another user control. This runs off the page, and I have a scroll bar visible, but it does not allow any scrolling. I think the scroll viewer just sees the top level user control as not needing any scrolling, even though the nested content is scrolling way below the screen. How do I get this to work?

Here are the ucObservationsHeader and ucObservations xaml: ObservationHeader:

<UserControl x:Class="ucObsevationsHeader"
<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="300*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="20"/>
    <RowDefinition Height="100*"/>
</Grid.RowDefinitions>
<TextBox x:Name="divNum" Text="{Binding DivNum, Mode=OneWay}" 
    Grid.Column="0" Grid.Row="0" Margin="0,3,0,0"/>
<TextBox x:Name="divName" Text="{Binding DivName, Mode=OneWay}" 
    Grid.Column="1" Grid.Row="0" Margin="0,3,0,0"/>
    <ItemsControl ItemsSource="{Binding lObs}" Grid.Row="1" Grid.Column="1">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <uc:ucObservationsView/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid></UserControl>

Observations:

<UserControl x:Class="ucObservationsView">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="25*"/>
        <RowDefinition Height="25*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".2*"/>
        <ColumnDefinition Width=".4*"/>
        <ColumnDefinition Width=".4*"/>
    </Grid.ColumnDefinitions>
    <TextBox x:Name="txtDivObs" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding obsFullNum, Mode=OneWay}" Grid.Column="0" Grid.Row="0"/>
    <Label x:Name="lblOpenDate" HorizontalAlignment="Left" Content="Open " Grid.Column="1" Grid.Row="0"/>
    <DatePicker x:Name="dtOpen" HorizontalAlignment="Right" SelectedDate="{Binding Opendate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="0"/>
    <Label x:Name="lblCLoseDate" HorizontalAlignment="Left" Content="Close " Grid.Column="2" Grid.Row="0"/>
    <DatePicker x:Name="txtCloseDate" HorizontalAlignment="Right" SelectedDate="{Binding Closedate}" Grid.Column="2" Grid.Row="0"/>
    <TextBox x:Name="txtDescription" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding Description}" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.Row="1"/>
    <TextBox x:Name="txtImagePath" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding ImagePath}" Grid.Row="2" Grid.ColumnSpan="3">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="PreviewMouseLeftButtonUp">
                <i:InvokeCommandAction Command="{Binding 
                   DataContext.PreviewImage, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                                       CommandParameter="{Binding}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>
</Grid>
</UserControl>

I'm doing this to show a layout with division headers for the Observations, and have structured my data accordingly. Without the scrollbar working this is useless though.


Solution

  • In my MainWindow I have 4 rows defined:

    <Grid.RowDefinitions>
    <RowDefinition Height="25"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    

    The 4th row is where my user control inside the scroll viewer resides. The Auto is what causes my problem, setting that to "200*" fixed the problem and the scroll bar appears as expected. I'm not sure why I set that to Auto in the first place but in case anyone has this similar situation this is something to look out for.