求助：无法在ScrollViewer上方正常显示UI元素

我尝试在ScrollViewer上方显示UI元素，本以为很简单却遇到了问题。原代码如下：

<Grid>
    <Button>A</Button>
    <ScrollViewer ZoomMode="Enabled" x:Name="Scroller">
        <Viewbox>
            <Rectangle Width="200" Height="200" Fill="White"/>
        </Viewbox>
    </ScrollViewer>
    <Button>B</Button>
</Grid>

但放大ScrollViewer时，它会显示在两个Button的上方，遮挡了按钮。我期望按钮始终保持在ScrollViewer的视觉上层，不受缩放影响。

解决方案 #

将需要保持在上层的UI元素放在独立的容器中，与ScrollViewer并列且位于布局顺序的后方，确保视觉层级始终在ScrollViewer之上。修改后的代码如下：

<Grid>
    <!-- 底层放置ScrollViewer -->
    <ScrollViewer ZoomMode="Enabled" x:Name="Scroller">
        <Viewbox>
            <Rectangle Width="200" Height="200" Fill="White"/>
        </Viewbox>
    </ScrollViewer>
    <!-- 上层放置按钮容器，确保始终在视觉最上方 -->
    <Grid>
        <Button>A</Button>
        <Button>B</Button>
    </Grid>
</Grid>

原因说明 #

ScrollViewer在缩放时，内部内容会通过RenderTransform进行视觉变换，其视觉范围会超出自身的布局边界。虽然Grid中后声明的元素本应处于上层，但ScrollViewer的变换会让其内容在视觉层覆盖其他元素。通过将按钮放在独立的上层容器中，可以彻底隔离视觉层级，避免被ScrollViewer的缩放内容遮挡。

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