#885 – Wrapping a Grid in a ScrollViewer

Because the ScrollViewer control is a ContentControl, it can contain any single element.  It most often contains a single Panel, which in turn contains child elements.

Below is an example of a ScrollViewer that contains a Grid, which in turn contains a number of different elements.

    <ScrollViewer Margin="5" CanContentScroll="False"
                  HorizontalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Image Source="Augustus.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="1" Content="Augustus - 63BC - 14AD" />

            <Image Grid.Column="2" Source="Tiberius.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="3" Content="Tiberius - 42BC - 37AD"/>

            <Button Grid.Row="1" Content="Learn"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Padding="10,5"/>
            <Button Grid.Row="1" Grid.Column="2" Content="Learn"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Padding="10,5"/>
        </Grid>
    </ScrollViewer>

885-001
885-002

Advertisements

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

One Response to #885 – Wrapping a Grid in a ScrollViewer

  1. Pingback: Dew Drop – August 15, 2013 (#1,604) | Alvin Ashcraft's 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: