Develop Reference

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

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>

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:
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.
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.

Always show vertical scrollviewer and always return to top scrollviewer

I have a scrollviewer
XAML:
<ScrollViewer
Name="questionScroll"
Grid.Row="0"
MinHeight="150"
MaxHeight="200"
Margin="5,5,5,5"
HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled">
I want the vertical scroll to always be visible and so that the scrollviewer always returns to the top scrollviewer. How do you apply it?
Although I have set VerticalScrollBarVisibility = "Visible", the vertical scrollbar is not always visible if the mouse is not directed to the scrollviewer

This is the design of the ScrollViewer.
Because the scrollbar of the ScrollViewer may occlude the contents of the control.
By default, the scrollbar will be hidden when the scrollbar is not used. After set the VerticalScrollBarVisibility="Visible" it will be smaller instead of disapear after the scrollbar is not used after time.
Best regards.

How to stop ScrollViewer from scrolling down

I need to make the ScrollViewer to only scroll down.
I have created a scrollviewer in Xaml and have populated it with a stackpanel full of rectangles in code. I then start the user at the bottom and want them to use a "walking" motion with their fingers (like a bass player) to scroll to the top but do not want them to be able to scroll back to the bottom.
My Xaml looks like this:
<ScrollViewer Height="730" HorizontalAlignment="Left" Margin="6,6,0,0" Name="scrollViewer1" VerticalAlignment="Bottom" Width="462">
<StackPanel Name="TrackStackPanel">
</StackPanel>
</ScrollViewer>
But since it is filled in code, need to accomplish as much as I can in code.

I would try disabling vertical scrolling via VerticalScrollBarVisibility="disabled" - handle the gestures, then scroll accordingly by setting [ScrollToVerticalOffset].
If this does not work, try placing a layer (a Grid for example) above your ScrollViewer, so that it will receive all the gestures, then do as above, scroll via ScrollToVerticalOffset.

Zooming into image in Windows Store apps

I have a ScrollViewer with an Image Control in it. It displays a rather large image. I want my user to be able to zoom into the image using gestures. I therefore enabled the ZoomMode on the Scrollviewer. However the Scrollviewer automatically scrolls back to the left "edge" of the image whenever the user releases its finger, making effectively zooming in and out of the image impossible.
This is the Template i am using:
<DataTemplate x:Key="SingleItemTemplate">
<ScrollViewer ZoomMode="Enabled">
<Grid Margin="5,0,5,0">
<Image Source="{Binding ImageUrlHighRes}">
</Image>
</Grid>
</ScrollViewer>
</DataTemplate>
How can i solve this problem?

You need to enable the horizontal scrolling as well (turned off by default)
HorizontalScrollBarVisibility = "Auto"

Scrolling when in portrait mode

I've been looking around but still cant find any solution of enabling scrolling horizontally when the tablet is on a portrait mode. My contents are all inside my scroll bar. Would really appreciate if some help could be given. XAML preferred.
<ScrollViewer HorizontalAlignment="Left" Height="764"
VerticalAlignment="Top" Width="1353"
VerticalScrollMode="Disabled" IsVerticalRailEnabled="False">

Did you try:
<ScrollViewer HorizontalScrollMode="Enabled" />
Read a little more here about this guy.
Also - what other controls are present that might affect this behavior?

Your problem seems to be that you are sizing your scrollviewer to fit landscape mode: the height of your control is 768px while the width is 1353px. So your scrollviewer is wider than your screen and is going off the edge. Scrollviewer scrolls its contents, but it scrolls to the size of the control, not the screen.
So, when you transition to portrait view you will need to resize your control to fit the extents of the screen. (Or possibly just making the scrollviewer auto-sized might fix your problem for now.)