具有缩放变换的网格的ScrollViewer

本文关键字：网格 ScrollViewer 变换 缩放 | 更新日期: 2023-09-27 18:25:26

所以我有一个网格>画布>图像，我把它放在了滚动查看器中。

我已经将RenderTransform>ScaleTransform放置到网格中，并使用鼠标滚轮事件对其进行缩放。

当我使用它时，它会放大和缩小，但滚动查看器会保持它的初始设置，在我看来，当我缩放时，实际宽度和高度不会改变（我无论如何都不想改变）。

不过，我想要的想法是将滚动查看器的范围缩放与将缩放的宽度和缩放的高度绑定到的网格相同的百分比。

我在MSDN中查看了ScrollViewer类，但找不到滚动查看器的范围保存在哪里。我在看ExtentHeight和ExtentWidth，在ScrollableHeight和ScrollableWidth，但我有点在黑暗中摸索。

如何通过编程获得scrollViewer水平条和垂直条的像素/数字范围？我该如何更改它们？我想在网格的鼠标滚轮事件上执行此操作。

ViewportWidth、ExtentWidth、ScrollableWidth和Width之间的实际区别是什么？

XAML:

<ScrollViewer Grid.Row="0" Grid.Column="1" Name="sourcePicScroll" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Height="Auto" Width="Auto">
        <Grid Name="sourceGrid" Background="Gray" MouseWheel="sourceGrid_MouseWheel">
            <Grid.RenderTransform>
                <ScaleTransform x:Name="sourceGridScaleTransform"/>
            </Grid.RenderTransform>
           <Canvas Name="sourceCanvas" Width="0" Height="0" Background="White" MouseMove="sourceCanvas_MouseMove" PreviewMouseLeftButtonDown="sourceCanvas_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="sourceCanvas_PreviewMouseLeftButtonUp" HorizontalAlignment="Left" VerticalAlignment="Top" MouseWheel="sourceCanvas_MouseWheel">
                <Canvas.RenderTransform>
                    <ScaleTransform x:Name="sourceScaleTransform"/>
                </Canvas.RenderTransform>
                <Image Name="sourcePic" HorizontalAlignment="Left" VerticalAlignment="Top" Panel.ZIndex="1" Stretch="None"></Image>
                <Rectangle Name="sourceSelectionBox" Visibility="Collapsed" Stroke="Black" StrokeThickness="1" Panel.ZIndex="50"/>
                <Ellipse Name="sourceSelectionEllipse" Visibility="Collapsed" Stroke="Black" StrokeThickness="1" Panel.ZIndex="51"/>
            </Canvas>
        </Grid>
    </ScrollViewer>

C#代码：

double ScaleRate = 1.1;
        if (e.Delta > 0)
        {
            sourceGridScaleTransform.ScaleX *= ScaleRate;
            sourceGridScaleTransform.ScaleY *= ScaleRate;
        }
        else
        {
            sourceGridScaleTransform.ScaleX /= ScaleRate;
            sourceGridScaleTransform.ScaleY /= ScaleRate;
        }

具有缩放变换的网格的ScrollViewer

的两个问题

  1. 渲染变换仅适用于不影响布局的渲染，因此滚动查看器不会反映相同内容
  2. 画布没有大小，默认为0，因此除非在画布上指定了大小，否则应用变换不会影响画布大小

由于您没有在子对象上使用任何画布属性，除非需要，否则可以安全地删除这些属性。

所以你可以试试这个样品

<ScrollViewer Grid.Row="0"
              Grid.Column="1"
              Name="sourcePicScroll"
              VerticalScrollBarVisibility="Visible"
              HorizontalScrollBarVisibility="Visible"
              Height="Auto"
              Width="Auto">
    <Grid Name="sourceGrid"
          HorizontalAlignment="Left"
          VerticalAlignment="Top"
          Background="Gray"
          MouseWheel="sourceGrid_MouseWheel">
        <Grid.LayoutTransform>
            <ScaleTransform x:Name="sourceGridScaleTransform" />
        </Grid.LayoutTransform>
        <Image Name="sourcePic"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Panel.ZIndex="1"
               Source="pr.png"
               Stretch="None"></Image>
        <Rectangle Name="sourceSelectionBox"
                   Visibility="Collapsed"
                   Stroke="Black"
                   StrokeThickness="1"
                   Panel.ZIndex="50" />
        <Ellipse Name="sourceSelectionEllipse"
                 Visibility="Collapsed"
                 Stroke="Black"
                 StrokeThickness="1"
                 Panel.ZIndex="51" />
    </Grid>
</ScrollViewer>

更改为

  • RenderTransform到LayoutTransform

  • added HorizontalAlignment="左"&垂直对齐="顶部"到网格

  • 移除内部画布

试一下，看看这是否是你想要的，注意鼠标滚轮只能在内部网格上工作。

如果你需要在全滚动查看器上滚动，这里有一个修改过的示例

<Grid>
    <ScrollViewer Grid.Row="0"
                  Grid.Column="1"
                  Name="sourcePicScroll"
                  VerticalScrollBarVisibility="Visible"
                  HorizontalScrollBarVisibility="Visible"
                  Height="Auto"
                  Width="Auto">
        <Grid Name="sourceGrid"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Background="Gray">
            <Grid.LayoutTransform>
                <ScaleTransform x:Name="sourceGridScaleTransform" />
            </Grid.LayoutTransform>
            <Image Name="sourcePic"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Panel.ZIndex="1"
                   Source="pr.png"
                   Stretch="None"></Image>
            <Rectangle Name="sourceSelectionBox"
                       Visibility="Collapsed"
                       Stroke="Black"
                       StrokeThickness="1"
                       Panel.ZIndex="50" />
            <Ellipse Name="sourceSelectionEllipse"
                     Visibility="Collapsed"
                     Stroke="Black"
                     StrokeThickness="1"
                     Panel.ZIndex="51" />
        </Grid>
    </ScrollViewer>
    <Grid MouseWheel="sourceGrid_MouseWheel"
          Background="Transparent"></Grid>
</Grid>
相关文章：