#901 – Scrolling Content within a TabControl
September 6, 2013 1 Comment
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>
Pingback: Dew Drop – September 6, 2013 (#1,619) | Morning Dew