Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Parent control ScrollViewer scrolling instead of child control ScrollViewer

I have this:

<Window x:Class="ScrollTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="450"
        Width="525">
    <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible"
                  ScrollViewer.VerticalScrollBarVisibility="Visible">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <GroupBox Grid.Row="0"
                      Header="Stuff"
                      Height="200">
                <TextBlock Text="Lots of controls go here"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center" />
            </GroupBox>
            <TabControl Grid.Row="1">
                <TabItem Header="Main Tab">
                    <TextBox MinHeight="100"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             HorizontalContentAlignment="Left"
                             VerticalContentAlignment="Top"
                             ScrollViewer.HorizontalScrollBarVisibility="Visible"
                             ScrollViewer.VerticalScrollBarVisibility="Visible"
                             AcceptsReturn="True" />
                </TabItem>
            </TabControl>
        </Grid>
    </ScrollViewer>
</Window>

When I add too many rows into the TextBox, instead of the ScrollViewer of the TextBox being used, the box stretches and the outermost ScrollViewer is used. Can I prevent that without fixing the height of the TextBox or TabControl?

Update:

If I remove MinHeight on the TextBox and set MaxLines to 5, this is what I get:

MinHeight removed and MaxLines set to 5

If I added a 6th line, the scroll bars of the TextBox's ScrollViewer are used, but they still remain centered vertically in the TextBox control.

like image 347
mbursill Avatar asked Jan 01 '12 23:01

mbursill


2 Answers

Try looking at the MaxLines and MinLines Properties.

From above link:

Setting this property causes the text box to resize if the number of visible lines exceeds the limit specified by MaxLines. This property applies only to visible lines, and does not constrain the actual number of lines. Depending on its configuration, a text box may contain additional non-visible lines that are accessible by scrolling. If the Height property is explicitly set on a TextBox, the MaxLines and MinLines property values are ignored.

Try Changing:

<TextBox MinHeight="100" 
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         ...

to

<TextBox MinLines="5" 
         MaxLines="5"
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch"

Edit: Give this a try. It is setting the VerticalContentAlignment of the TabItem. This will keep the text box at the top of the Tab, I also set the maxlines to what your available area is able to hold if you resize your form you may want to adjust that number to use all of the available space.

<TabItem Header="Main Tab" VerticalContentAlignment="Top"  >
     <TextBox 
              ScrollViewer.HorizontalScrollBarVisibility="Visible"   
              ScrollViewer.VerticalScrollBarVisibility="Visible" 
              MinLines="8"
              MaxLines="8"
              HorizontalAlignment="Stretch"   
              VerticalAlignment="Stretch" 
              HorizontalContentAlignment="Stretch"  
              VerticalContentAlignment="Stretch"  
              AcceptsReturn="True" />
</TabItem>

Edit:

After looking into it further, the reason the scrollbars are not showing up on the TextBox is because the TabControl and the TabItem are resizing to the size of the TextBox. What needs to be done is to have a limiting height set either on the TabControl, TabItem or TextBox this will allow the ScrollViewer to work for the TextBox.

like image 39
Mark Hall Avatar answered Oct 01 '22 05:10

Mark Hall


I was able to get close with this:

<Window x:Class="ScrollTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="525">
    <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible"
                  x:Name="Base">
        <Grid Height="{Binding ElementName=Base, Path=ActualHeight, Mode=OneWay}"
              MinHeight="400">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <GroupBox Grid.Row="0"
                      Header="Stuff"
                      Height="200">
                <TextBlock Text="Lots of controls go here"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center" />
            </GroupBox>
            <TabControl Grid.Row="1">
                <TabItem Header="Main Tab">
                    <Grid x:Name="myInnerGrid">
                        <TextBox MinHeight="100"
                                 MaxHeight="{Binding ElementName=myInnerGrid, Path=ActualHeight, Mode=OneWay}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 HorizontalContentAlignment="Left"
                                 VerticalContentAlignment="Top"
                                 ScrollViewer.HorizontalScrollBarVisibility="Visible"
                                 ScrollViewer.VerticalScrollBarVisibility="Visible"
                                 AcceptsReturn="True" />
                    </Grid>
                </TabItem>
            </TabControl>
        </Grid>
    </ScrollViewer>
</Window>

Note the binding expression on height for the outside grid and on MaxHeight for the TextBox.

It's still not perfect in that you have to manually set the MinHeight that will trigger the outer most scrollbar. It's probably as close as WPF will allow without writing a new grid control.

The idea was found here: http://social.msdn.microsoft.com/Forums/en/wpf/thread/7b4b0c88-6b8f-4f07-aa8b-8e7018762388

like image 198
mbursill Avatar answered Oct 01 '22 04:10

mbursill