Question

所以我有一个Grid＆gt; Canvas＆gt;我已放置在滚动查看器中的图像。

我已经放置了一个RenderTransform＆gt; Scale转换为Grid并使用鼠标滚轮事件对其进行缩放。

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

我想要的想法是缩放滚动查看器范围以及与缩放宽度和缩放高度的网格相同的百分比。

我在MSDN中查看ScrollViewer类，无法找到保存scrollviewer范围的位置。我在ScrollableHeight和ScrollableWidth上看ExtentHeight和ExtentWidth，但我在黑暗中摸索着。

如何以编程方式获取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;
        }

Answer 1

两个问题

渲染变换仅适用于不影响布局的渲染，因此滚动查看器不会反映相同的
Canvas没有大小，默认为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 to LayoutTransform
添加了HorizontalAlignment =“Left”＆amp; VerticalAlignment =网格的“顶部”
删除内部画布

尝试一下，看看这是否是您正在寻找的，请注意鼠标滚轮只能在内部网格上工作。

如果您需要滚动以处理完整滚动查看器

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

ScrollViewer with Grid，具有缩放变换功能

1 个答案: