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}"/>