#886 – Wrapping a Canvas 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 Canvas, which in turn contains several different elements.  When the containing window is sized to be smaller than the Canvas element, the scrollbars automatically appear.

    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
        <Canvas Width="340" Height="330">
            <Image Canvas.Left="15" Canvas.Top="5"
                   Source="Augustus.jpg" Height="100" Margin="10"/>
            <Label Canvas.Left="0" Canvas.Top="120"
                Grid.Column="1" Content="Augustus - 63BC - 14AD" />

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

            <Line Canvas.Left="140" Canvas.Top="140" X2="65" Y2="50"
                  Stroke="RoyalBlue"/>
        </Canvas>
    </ScrollViewer>