Can't display UI Element on top of ScrollViewer

Question

I'm struggling to display a UI Element on top a ScrollViewer. This should be pretty straight forward but hasn't been. I would have expected this code to work:

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

But when I zoom into the ScrollViewer, it is displayed on top of both buttons.

Video: Behavior
Image: Desired vs Actual Behavior
Code: Minimum Reproducible Example

Answer 1

My original code pretty much works. And, in fact, other answerers were able to run my code and have it work. The issue ended up being purely styling, if you look at this example: https://imgur.com/a/cM3aAI0, it's clear that the button is being shown but has a transparent background. So, for me to fix this all I had to do was this:

<Grid>
    <ScrollViewer ZoomMode="Enabled" x:Name="Scroller">
        <Viewbox>
            <Rectangle Width="200" Height="200" Fill="Yellow"/>
        </Viewbox>
    </ScrollViewer>
    <Button Background="Black" Height="120" Width="120" HorizontalAlignment="Left">B</Button>
    <Button Height="50" Width="50" HorizontalAlignment="Left">A</Button>
</Grid>