WPF ScrollViewer滚动条大小不变

Question

我不是WPF专家，所以请原谅我不恰当地使用术语。我有一个ScrollViewer，用于显示捕获的图像。我有一个滑块，用来放大和缩小图像。缩放效果很好，但滚动条不会改变大小。因此，当图像超出边界时，我无法滚动和查看它。就好像滚动条因为没有改变大小而变得无用一样。这是我的XAML：

滑块：

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

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

问题是由于Canvas用作ItemsPanel。因为Canvas不会随着其子对象的大小而展开或折叠，所以ScrollViewer不会检测到更改。

作为快速解决方案，将ItemsPanel更改为Grid。由于您的示例似乎没有使用Canvas属性，即Canvas.Left or Canvas.Top，因此此更改可能不会对外观产生任何影响。

示例

    <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>

确保网格中有HorizontalAlignment="Left" VerticalAlignment="Top"，否则缩放时可能会显得很奇怪。

试一下，看看这是不是你想要的。

Answer 2

好吧，伙计们，下面是为了让它发挥作用需要做的事情：

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