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>

Answer 2

The second Button should display on top of the ScrollViewer using the markup you have posted markup.

Make sure that you are not applying some custom Style to the Button which causes it to be invisible.

Here is a complete example of a window:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUIApp.BlankWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <Button>A</Button>
        <ScrollViewer ZoomMode="Enabled" x:Name="Scroller">
            <Viewbox>
                <Rectangle Width="200" Height="200" Fill="White"/>
            </Viewbox>
        </ScrollViewer>
        <Button MinHeight="100" MinWidth="100" HorizontalAlignment="Center">B</Button>
    </Grid>
</Window>

And how it looks on the screen:

Answer 3

Update:

If you want the button to floating on other controls, then you should render the button later than other controls. Please put the buttons control under the ScrollViewer in the Grid.

Please try the following code:

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

How it looks like:

I test this in UWP project. The code also works in WinUI3 project.

Old:

Please try to set RowDefinitions for the Grid and place UIElements into different Rows.

Xaml:

 <Grid>
 <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="*"/>
     <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>
 <Button Grid.Row="0">A</Button>
 <ScrollViewer Grid.Row="1" ZoomMode="Enabled" x:Name="Scroller">
     <Viewbox>
         <Rectangle Width="200" Height="200" Fill="White"/>
     </Viewbox>
 </ScrollViewer>
 <Button Grid.Row="2">B</Button>
 </Grid>