WinUI文档查看器ScrollViewer不随图像缩放调整问题求助

问题出在你使用了RenderTransform进行图像缩放——这种变换是布局完成后的视觉渲染层调整，不会改变Image元素的实际布局尺寸。ScrollViewer是根据子元素的布局尺寸来计算可滚动区域的，所以放大后图像视觉上超出了ScrollViewer，但ScrollViewer依然认为图像是原始大小，导致无法滚动到末端。

下面提供两种可行的解决方案：

方案一：通过调整Image的布局尺寸实现缩放（推荐） #

直接绑定缩放值到Image的Width和Height，让元素的布局尺寸随缩放同步变化，ScrollViewer就能自动识别正确的滚动范围。

步骤1：实现缩放转换器 #

创建一个IValueConverter，根据原始图像尺寸和缩放值计算实际显示尺寸：

public class ScaleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is double scale && int.TryParse(parameter.ToString(), out int originalSize))
        {
            return originalSize * scale;
        }
        return 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

步骤2：修改XAML代码 #

移除RenderTransform，改用绑定Width和Height：

<Page.Resources>
    <!-- 注册转换器 -->
    <local:ScaleConverter x:Key="ScaleConverter"/>
</Page.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- 缩放滑块（假设你已有这个控件） -->
    <Slider x:Name="ZoomSlider" Grid.Row="0" Minimum="0.1" Maximum="5.0" Value="1.0"/>

    <ScrollViewer
        Grid.Row="1"
        PointerWheelChanged="ZoomByMouseWheel"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollBarVisibility="Auto">

        <Image 
            x:Name="PreviewImage"
            Width="{Binding ElementName=ZoomSlider, Path=Value, Converter={StaticResource ScaleConverter}, ConverterParameter={x:Bind PreviewImage.Source.PixelWidth, Mode=OneWay}}"
            Height="{Binding ElementName=ZoomSlider, Path=Value, Converter={StaticResource ScaleConverter}, ConverterParameter={x:Bind PreviewImage.Source.PixelHeight, Mode=OneWay}}">

            <ui:Effects.Shadow>
                <media:AttachedCardShadow Offset="4" CornerRadius="0"/>
            </ui:Effects.Shadow>
        </Image>
    </ScrollViewer>
</Grid>

方案二：保留RenderTransform，手动同步容器尺寸 #

如果一定要用RenderTransform，可以把Image放在Canvas容器里，手动更新Canvas的尺寸以匹配缩放后的图像大小，让ScrollViewer识别正确的滚动范围。

修改后的XAML代码 #

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Slider x:Name="ZoomSlider" Grid.Row="0" Minimum="0.1" Maximum="5.0" Value="1.0" ValueChanged="ZoomSlider_ValueChanged"/>

    <ScrollViewer
        Grid.Row="1"
        PointerWheelChanged="ZoomByMouseWheel"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollBarVisibility="Auto">

        <Canvas x:Name="ImageContainer">
            <Image 
                x:Name="PreviewImage"
                RenderTransformOrigin="0.5,0.5">

                <ui:Effects.Shadow>
                    <media:AttachedCardShadow Offset="4" CornerRadius="0"/>
                </ui:Effects.Shadow>

                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="0.01" ScaleY="0.01" />
                        <ScaleTransform x:Name="ImageScaleTransform"/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </ScrollViewer>
</Grid>

代码后台更新尺寸 #

在滑块值变化和鼠标滚轮缩放时，同步更新Canvas尺寸：

private void ZoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    UpdateImageScaleAndContainerSize(e.NewValue);
}

private void ZoomByMouseWheel(object sender, PointerRoutedEventArgs e)
{
    var pointerPoint = e.GetCurrentPoint(PreviewImage);
    double delta = pointerPoint.Properties.MouseWheelDelta;
    double newScale = ZoomSlider.Value + (delta > 0 ? 0.1 : -0.1);
    ZoomSlider.Value = Math.Clamp(newScale, 0.1, 5.0);
}

private void UpdateImageScaleAndContainerSize(double scale)
{
    if (PreviewImage.Source is BitmapImage bitmap)
    {
        ImageScaleTransform.ScaleX = scale;
        ImageScaleTransform.ScaleY = scale;
        ImageContainer.Width = bitmap.PixelWidth * scale;
        ImageContainer.Height = bitmap.PixelHeight * scale;
    }
}

两种方案都能解决ScrollViewer滚动范围不更新的问题，方案一更符合WinUI的布局逻辑，推荐优先使用。

内容的提问来源于stack exchange，提问作者BitKFu