UWP: Do not zoom media transport controls for a media player element inside a scroll viewer

Question

I want to add zoom functionality for media player element(UWP C#) . I placed MediaPlayerElement inside a scroll viewer and zoom functionality is working. But inbuilt media transport transport controls is also getting zoomed and scrolled. I want the media transport controls to be fixed. I tried setting margin and height and width property for transport control. But they do not seem to work. How do I avoid zooming and scrolling of transport control bar

XAML:

<ScrollViewer 
                Name="ScrollViewerMain"
                HorizontalScrollBarVisibility="Hidden"
                VerticalScrollBarVisibility="Hidden"
                MinZoomFactor="1" 
                ZoomMode="Enabled"
                HorizontalAlignment="Center" Height="314" Margin="427,186,0,0" 
                VerticalAlignment="Center" Width="730" HorizontalScrollMode="Auto" 
                VerticalScrollMode="Auto" ManipulationMode="System" 
                HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <MediaPlayerElement x:Name="mpe" Stretch="Uniform" 
                ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                AreTransportControlsEnabled="True"
                MaxWidth="{Binding Path=ViewportWidth, ElementName=ScrollViewerMain}"
                MaxHeight="{Binding Path=ViewportHeight, ElementName=ScrollViewerMain}"
                   />
 </ScrollViewer>

Answer 1

ScrollViewer's zoom is an overall behavior, and its zoom is equivalent to the distance you look at the object.

Objects appear small from a long distance, but the size of the object itself is constant.

When you use ScrollViewer to zoom, it will inevitably change the whole.

So if you plan to manually zoom on the MediaPlayerElement, there are two options:

1. Get the increment of user operation through PointerWheelChanged or ManipulationDelta event, and change the width / height of MediaPlayerElement by increment.

   When the size of the control is changed directly, the icon of MediaTransportControls will keep the original size.

   Regarding gestures, this document may be helpful.

---

2. Do not display MediaTransportControls of MediaPlayerElement itself, rewrite a transport control yourself, independent of ScrollViewer, and overlay on top, like this:

<Grid>
    <ScrollViewer HorizontalScrollBarVisibility="Hidden"
                  VerticalScrollBarVisibility="Hidden"
                  MinZoomFactor="1" 
                  ZoomMode="Enabled">
        <MediaPlayerElement Stretch="Uniform"
                            AreTransportControlsEnabled="False"
                            />
    </ScrollViewer>
    <MyTransportControls VerticalAlignment="Bottom"
                         HorizontalAlignment="Stretch"
                         />
</Grid>

In this way, when the ScrollViewer is zoomed in, it will only affect the MediaPlayerElement and will not affect the TransportControls.

---

Update

By communicating with the engineer, we reached a conclusion, The touchpad sends Pointer events rather than Manipulation events. You can handle pinch input from the touchpad with the PointerWheelChanged event.

Best regards.