Vertical and Horizontal ScrollBars are not working - WPF

Question

I have the following code:

<DockPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <!--This will make any control in this column of grid take 1/10 of total width-->
                <ColumnDefinition Width="1*" />
                <!--This will make any control in this column of grid take 4/10 of total width-->
                <ColumnDefinition Width="4*" />
                <!--This will make any control in this column of grid take 4/10 of total width-->
                <ColumnDefinition Width="4*" />
                <!--This will make any control in this column of grid take 1/10 of total width-->
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Border BorderBrush="Black" BorderThickness="1" Grid.Row="0" Grid.Column="0">
                <StackPanel>
                    <Image Source="/SAMPLE;component/Images/1_Left.png"/>
                    <Image Source="/SAMPLE;component/Images/2_Left.png"/>
                    <Image Source="/SAMPLE;component/Images/3_Left.png"/>
                    <Image Source="/SAMPLE;component/Images/4_Left.png"/>
                </StackPanel>
            </Border>
            <ScrollViewer Grid.Row="0" Grid.Column="1">
                <Canvas Name="Canvas1">
                    <Image Name="LeftImage"/>
                    <Image Name="LeftIcon"/>
                </Canvas>
            </ScrollViewer>
            <ScrollViewer Grid.Row="0" Grid.Column="2">
                <Canvas Name="Canvas2">
                    <Image Name="RightImage"/>
                    <Image Name="RightIcon"/>
                </Canvas>
            </ScrollViewer>
            <Border BorderBrush="Black" BorderThickness="1" Grid.Row="0" Grid.Column="3">
                <StackPanel>
                    <Image Source="/SAMPLE;component/Images/5_Right.png"/>
                    <Image Source="/SAMPLE;component/Images/6_Right.png"/>
                    <Image Source="/SAMPLE;component/Images/7_Right.png"/>
                    <Image Source="/SAMPLE;component/Images/8_Right.png"/>
                </StackPanel>
            </Border>
        </Grid>
    </DockPanel>

Even though the "LeftImage" and "RightImage" are having more width and height, the scroll bars are not working. I cannot able to scroll to view the complete image. Any help ?

Thanks

Answer 1

Grid does not support scrolling functionality. If you want to scroll something you need ScrollViewer control. So place your grid within a ScrollViewer insted of DockPanel

    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
//Your grid
</ScrollViewer>