WPF实现图片适配Grid行高 仅缩放超限时显示ScrollViewer滚动条

问题核心原因 #

ScrollViewer在布局测量阶段会给内部子元素传递无限大的可用尺寸，直接嵌套Viewbox+Image时，子控件会优先按照图片原始像素尺寸完成渲染，完全不受ScrollViewer本身所在Grid行的高度约束，直接导致初始状态就显示滚动条、图片无法自动适配行高。

可直接落地的实现方案 #

• 移除多余的Viewbox嵌套层，避免Viewbox默认的尺寸测量逻辑干扰约束传递
• 将ScrollViewer的滚动条可见性设置为Auto，仅在内容超出可视区域时自动显示滚动条
• 给Image控件绑定ScrollViewer的视口尺寸作为最大宽高约束，强制初始状态下图片不超出可视区域
• 缩放效果通过ScaleTransform实现，根据缩放系数动态调整尺寸约束，保证滚动条触发逻辑正常

修正后完整XAML代码 #

<Grid.RowDefinitions>
    <RowDefinition Name="row1" Height="Auto"/>
    <RowDefinition Name="row2" Height="*"/>
    <RowDefinition Name="row3" MinHeight="200" Height="*"/>
</Grid.RowDefinitions>

<ScrollViewer Name="scrollViewer" 
              Grid.Column="1" 
              Grid.Row="1"
              Margin="5,5,5,4"
              VerticalScrollBarVisibility="Auto" 
              HorizontalScrollBarVisibility="Auto"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
    <Image x:Name="WideScreenImage"
           Stretch="Uniform"
           StretchDirection="DownOnly"
           MaxWidth="{Binding ElementName=scrollViewer, Path=ViewportWidth}"
           MaxHeight="{Binding ElementName=scrollViewer, Path=ViewportHeight}">
        <Image.Source>
            <BitmapImage UriSource="Z:\tmp\img\1\d68epc1-022b407d-89e4-4128-a32d-17286dae21b4.png"/>
        </Image.Source>
        <Image.LayoutTransform>
            <ScaleTransform x:Name="scaleTransform" CenterX="0.5" CenterY="0.5"/>
        </Image.LayoutTransform>
    </Image>
</ScrollViewer>

缩放逻辑配套说明 #

• 初始状态缩放系数为1时，Image受MaxWidth/MaxHeight绑定约束，会按照Uniform缩放规则自动适配ScrollViewer所在行的可视高度，不会出现多余滚动条
• 执行放大操作、修改scaleTransform.ScaleX和scaleTransform.ScaleY值时，同步将Image的MaxWidth、MaxHeight更新为scrollViewer.ViewportWidth * 缩放系数、scrollViewer.ViewportHeight * 缩放系数，当缩放后图片尺寸超出ScrollViewer视口范围时，会自动触发滚动条显示，支持拖动浏览

注意事项：不要使用RenderTransform实现缩放，RenderTransform不会参与布局尺寸计算，即使图片放大后超出视口，ScrollViewer也无法感知内容尺寸变化，不会触发滚动条显示。也不要在外层嵌套额外的Grid或Viewbox包裹Image，避免多层布局传递导致尺寸约束失效。

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