WPF ScrollViewer scroll-bars not changing size

Question

I am not a WPF expert so please excuse my inappropriate use of terms. I have a ScrollViewer where I am displaying a captured image. And I have a slider with which I am zooming the image in and out. Zooming works fine, but the scrollbars are not changing their size. Hence when the image goes beyond the boundaries, I cannot scroll and view it. As if the scrollbars become useless because they haven't changed their size. Here is my XAML:

The Slider:

<Slider DockPanel.Dock="Right" Width="100" VerticalAlignment="Center" Minimum="0.2" Maximum="5"
 Interval="1" Value="{Binding ScaleFactor}"/>

The rest of XAML:

<Border BorderThickness="1" BorderBrush="Black" Grid.Row="1">
    <Grid>
       <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" 
        CanContentScroll="True">
           <ItemsControl ItemsSource="{Binding ItemCollection}" Margin="0"
            Width="{Binding Root.Boundary.Width}" Height="{Binding Root.Boundary.Height}">
               <ItemsControl.ItemsPanel>
                   <ItemsPanelTemplate>
                       <Canvas>
                         <Canvas.LayoutTransform>
                            <ScaleTransform ScaleX="{Binding ScaleFactor}" 
                             ScaleY="{Binding ScaleFactor}"CenterX="0" CenterY="0"/>
                         </Canvas.LayoutTransform>
                        </Canvas>
                    </ItemsPanelTemplate>
                 </ItemsControl.ItemsPanel>


                 <ItemsControl.ItemTemplate>
                     <DataTemplate>
                         <Grid>
                             <Image x:Name="capturedImage"
                                    Source="{Binding Image}" 
                                    Width="{Binding Boundary.Width}"
                                    Height="{Binding Boundary.Height}"/>
                              <Path x:Name="captureContour"
                                    Data="{Binding Outline}"
                                    Stroke="Black" StrokeThickness="4" Opacity="0.5"
                                    StrokeLineJoin="Round">
                              <Path.LayoutTransform>
                                  <ScaleTransform ScaleX="{Binding OutlineScale.X}"
                                   ScaleY="{Binding OutlineScale.Y}" CenterX="0"CenterY="0"/>
                              </Path.LayoutTransform>
                              </Path>
                           </Grid>
                            <DataTemplate.Triggers>
                               <Trigger SourceName="capturedImage" Property="IsMouseOver" 
                                 Value="True">
                                 <Setter TargetName="captureContour" Property="Stroke" 
                                  Value="Blue"/>
                                 <Setter TargetName="captureContour" Property="BitmapEffect">
                                     <Setter.Value>
                                         <DropShadowBitmapEffect/>
                                      </Setter.Value>
                                  </Setter>
                                </Trigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </Border>

Answer 1

The issue is due to the Canvas used as ItemsPanel . as Canvas does not expand or collapse with the size of it's children so ScrollViewer does not detect the change.

As a quick solution change the ItemsPanel to Grid . Since your example does not seems to be using Canvas properties ie Canvas.Left or Canvas.Top , this change may not make any difference in the appearance.

example

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                <Grid.LayoutTransform>
                    <ScaleTransform ScaleX="{Binding ScaleFactor}"
                                    ScaleY="{Binding ScaleFactor}"
                                    CenterX="0"
                                    CenterY="0" />
                </Grid.LayoutTransform>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

make sure to have HorizontalAlignment="Left" VerticalAlignment="Top" in grid otherwise it may appear weird when you zoom.

give it a try and see if this is what you are looking for.

Answer 2

OK guys, here is what needs to be done in order to make it work:

<ItemsControl ItemsSource="{Binding ItemCollection}" Margin="0" Width="{Binding CanvasWidth}" 
              Height="{Binding CanvasHeight}"/>