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.
Related
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.
I have figured out, that I can use ScrollViewer in iOS and in Android I can use this ScaleImageView from XamarinAndroidToolkit.
But what can I use for UWP?
You should be able to use ScrollViewer for this purpose as well. You will however need to enable zooming and both scroll bars for the control. Vertical scroll bar should be set to Auto by default, but horizontal is by default disabled. The same goes for the zoom mode.
If you want to hide the scroll bars, you can do so after explicitly enabling the scrolling.
<ScrollViewer ZoomMode="Enabled"
HorizontalScrollMode="Auto"
VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
>
...
</ScrollViewer>
I am a newbie to Windows Phone 8 app programming in C# and I am trying to create an array of textboxes. I have the array being created and being added as children of a Stack Panel, and I am trying to get it to display more than a few textboxes, and I read that it can be done if the CanContentScroll property is set to 'true' as it is set to 'false' by default. However, when I try to add it, it is not recognised by intellisense. Can you help me?
<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True" Margin="10,135,10,7" >
<StackPanel x:Name="TextBoxStack" HorizontalAlignment="Left" Height="419" Margin="0,166,0,0" VerticalAlignment="Top" Width="446"/>
</ScrollViewer>
I am using VS2013, and the System.Phone.Controls and System.Windows.Controls modules are included correctly.
Use a Grid and not a StackPanel. I forget the exact reason, but the StackPanel doesn't correctly report it size to the ScrollViewer container causing the ScrollViewer to not scroll correctly. Using a Grid will resolve this.
You shouldn't need to set "CanContentScroll". The ScrollViewer should display scroll bars if its child extends further than the ScrollViewer's bounds. Try:
Remove the fixed height of the child StackPanel. You don't want to restrict its height -- it should extend as far as its children, so that the ScrollViewer knows the correct scroll extent.
Make sure the ScrollViewer has a fixed or limited height -- ie, put it inside a fixed-size container like Grid, rather than an infinitely-extendable one like StackPanel. If it can extend infinitely, it will always be able to accommodate its child, and won't ever think it has to scroll.
Eg:
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel x:Name="TextBoxStack"
HorizontalAlignment="Left" VerticalAlignment="Top" Width="446"/>
</ScrollViewer>
</Grid>
I have a textbox which is contained in a scrollviewer as below:
<ScrollViewer x:Name="myScrollViewer" Height="200" Width="500" HorizontalAlignment="Left">
<TextBox x:Name="myTextBox" Width="500" TextWrapping="Wrap"/>
</ScrollViewer>
When I input a large number of data in the textbox, the scrollviewer will not scroll down automatically, so this lead I couldn't see what I'm inputing now in the textbox, I have to scroll down manully and see the content which I am inputting. I have two questions:
How to let the scrollbar automatically scroll down follow the line which I am writing now.
TextBox has a border, but if I scroll down, the top border will disappear, it looks like the text box is scroll up, how to make the textbox not changes, the 4 borders always appear and only the content wrapped?
Do you need to use a ScrollViewer, or can you use the TextBox's own scrolling behaviour?
This behaves as you would want in normal Silverlight apps (can't test it on a windows 8 app right atm)
E.G.
<TextBox
Height="200"
Width="500"
TextWrapping="Wrap"
AcceptsReturn="True"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"/>
(Note that you don't seem to be able to set the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties from a Style)
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"