#1,006 – Scrollbars in a ListBox Appear as Needed

Scrolling in a ListBox is managed by a ScrollViewer, which contains the items panel of the ListBox.  The ScrollViewer provides scrolling logic and makes available both a horizontal and a vertical scrollbar.

The visibility of the scrollbars in a ScrollViewer is controlled by the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties.  By default, both of these properties are set to Auto for the ScrollViewer used in a ListBox.  This means that the scrollbar only appears if the content of the ListBox does not fit in the associated dimension.

1006-0011006-002

 

1006-003

#931 – Scrolling Text in a TextBox from Code

If you want to programmatically scroll the text within a TextBox control, you can use any of the scrolling methods available to a ScrollViewer.  Specifically:

  • Methods for scrolling vertically
    • LineUp / LineDown
    • PageUp / PageDown
    • ScrollToHome / ScrollToEnd
  • Methods for scrolling horizontally
    • LineLeft / LineRight
    • PageLeft / PageRight
    • ScrollToLeftEnd / ScrollToRightEnd

These methods scroll content as if the user had clicked on the corresponding scrollbar–either on the arrows at the end (single line) or in the empty space (single page).

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

        <StackPanel>
            <Button Content="PageUp" Click="btnPageUp_Click"/>
            <Button Content="LineUp" Click="btnLineUp_Click"/>
            <Button Content="LineDown" Click="btnLineDown_Click"/>
            <Button Content="PageDown" Click="btnPageDown_Click"/>
        </StackPanel>
        <TextBox Name="txtMain" Grid.Column="1" Margin="5"
                 Text="{Binding SomeText}"
                 TextWrapping="NoWrap"
                 AcceptsReturn="True"
                 VerticalScrollBarVisibility="Auto"
                 HorizontalScrollBarVisibility="Auto"/>
        <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
            <Button Content="PageLeft"  Click="btnPageLeft_Click"/>
            <Button Content="LineLeft" Click="btnLineLeft_Click"/>
            <Button Content="LineRight" Click="btnLineRight_Click"/>
            <Button Content="PageRight" Click="btnPageRight_Click"/>
        </StackPanel>
    </Grid>

Event handlers would follow the form:

        private void btnPageUp_Click(object sender, RoutedEventArgs e)
        {
            txtMain.PageUp();
        }

931-001

#901 – Scrolling Content within a TabControl

You can scroll content within a given tab of a TabControl by placing the content of each tab into a ScrollViewer.  In the example below, the first tab contains a ScrollViewer, which in turns contains a Grid containing the tab’s content.

    <TabControl Margin="10">
        <TabItem Header="Romans">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Image Source="Augustus.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Text="Augustus"/>

                    <Image Grid.Column="1" Source="Tiberius.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="Tiberius"/>

                    <Image Grid.Column="2" Source="Caligula.jpeg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="2" Text="Caligula"/>

                    <Image Grid.Column="3" Source="Claudius.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="3" Text="Claudius"/>

                    <Image Grid.Column="4" Source="Nero.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="4" Text="Nero"/>
                </Grid>
            </ScrollViewer>
        </TabItem>
        <TabItem Header="Greeks">
        </TabItem>
    </TabControl>

901-001

#389 – Wrap a Panel in A ScrollViewer to Provide Scrolling Support

The layout containers in WPF do not automatically provide scrolling support.  To scroll the content in a container, however, you can wrap it in a ScrollViewer control.

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical" >
            <Label Content="I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation." />
            <Label Content="Some famous speeches:"/>
            <Label Content="I Have a Dream. --MLK" />
            <Label Content="Inaugural Address --JFK"/>
            <Label Content="First Inaugural --FDR"/>
            <Label Content="Pearl Harbor Address --FDR"/>
            <Label Content="1976 DNC Keynote --Barbara Jordan"/>
        </StackPanel>
    </ScrollViewer>



Notice that we’ve set the visibility of both scrollbars to Auto. By default, though, the horizontal scrollbar is disabled and the vertical scrollbar is visible.

You can set the HorizontalScrollbarVisibility and VerticalScrollbarVisibility properties to one of the following: Disabled, Visible, Auto or Hidden.