#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

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #901 – Scrolling Content within a TabControl

  1. Pingback: Dew Drop – September 6, 2013 (#1,619) | Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: