WPF ScrollViewer滚动条不会改变大小

时间:2014-10-23 01:37:16

标签: c# .net wpf xaml scrollviewer

我不是WPF专家,请原谅我对条款的不当使用。我有一个ScrollViewer,我正在显示捕获的图像。我有一个滑块用于缩放图像。缩放工作正常,但滚动条不会改变它们的大小。因此,当图像超出边界时,我无法滚动和查看它。好像滚动条变得无用,因为它们没有改变它们的大小。这是我的XAML:

The Slider:

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

2 个答案:

答案 0 :(得分:0)

问题归因于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",否则缩放时可能会显得很奇怪。

试一试,看看这是不是你想要的。

答案 1 :(得分:0)

好的伙计们,这里需要做的就是让它发挥作用:

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