在 ScrollViewer 中控制 Canvas 的大小答案

【问题标题】：Control size of Canvas in ScrollViewer在 ScrollViewer 中控制 Canvas 的大小
【发布时间】：2020-04-02 10:52:51
【问题描述】：

我正在编写一个用于图像显示和交互的自定义控件。它需要的一些功能是缩放和平移以及绘制自定义感兴趣区域，即在显示的框架顶部绘制一个具有任意位置和大小的矩形。缩放和平移功能已经完成并且运行良好，我正在使用 ScrollViewer、缩放变换和一些事件处理程序，用于在 C# 代码中单击和移动鼠标。

对于自定义选择功能，我想在框架顶部添加一个画布，因为这是我所知道的允许任意定位矩形的唯一方法。为了使画布上的任何形状都可以映射到图像坐标，我当然需要画布与图像完全对齐，因此大小和位置必须相同。我还希望图像在没有任何画布的情况下继续调整窗口大小。由于 Canvas 不会自动将自身调整为任何我想将其尺寸绑定到图像大小的东西（这是来自自定义控件的控件模板）：

<ScrollViewer x:Name="scrollViewer" Grid.Column="0" Grid.Row="1" CanContentScroll="True" PanningMode="Both" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
  <Grid>
    <Image x:Name="screen" Panel.ZIndex="0" Cursor="Cross" Source="{TemplateBinding ColoredFrame}"/
    <Canvas x:Name="testCanvas" Panel.ZIndex="1" Background="Transparent" Width="{Binding ActualWidth, ElementName=screen}" Height="{Binding ActualHeight, ElementName=screen}"/>
    <Grid.LayoutTransform>
      <TransformGroup>
        <RotateTransform Angle="{Binding RotationAngle, RelativeSource={RelativeSource TemplatedParent}}"/>
        <ScaleTransform x:Name="scaleTransform" ScaleX="{Binding ZoomFactor, RelativeSource {RelativeSource TemplatedParent}}" ScaleY="{Binding ZoomFactor, RelativeSource={RelativeSource TemplatedParent}}"/>
      </TransformGroup>
    </Grid.LayoutTransform>
  </Grid>
</ScrollViewer>

但是，我遇到了奇怪的行为 - 当我将画布的 Width 和 Height 绑定到图像的 ActualWidth 和 ActualHeight 时，就像在上面的代码中一样，它会自动调整自己的大小only em> 当大小增加时（当用户增加窗口大小时），但当它减小时不会。任何大小的增加都是永久性的，当再次减小窗口时，必须滚动，因为图像和画布的大小永远不会减小。当我只绑定一个维度（宽度或高度）并将另一个维度设置为常数值时，不会发生这种情况。绑定模式（单向/双向）也无效。

我可能遗漏了一些非常明显的东西，但我花了几个小时试图弄清楚这一点，但我不知所措。任何帮助将不胜感激。

【问题讨论】：

标签： wpf xaml canvas resize scrollviewer

【解决方案1】：

据我所知Canvas 没有很好的尺寸选择。我认为Adorner 会做你试图达到的目标。有关示例和其他信息，请查看此处：https://docs.microsoft.com/de-de/dotnet/framework/wpf/controls/adorners-overview

快乐编码蒂姆

【讨论】：

谢谢，我花了几天时间才完全弄清楚装饰器是如何工作的，但现在我明白了。它们更适合这个特殊问题。