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"
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 need to display a bigger image at original scale on a Windows Phone 8.1 App.
tried
ScrollViewer
and ViewBox.
None of them seems to work fine.
I want something like when an image is displayed in an html page, scrollable , movable, etc.
Any Idea whether it can be done without embedding a webbrowser ?
<Grid>
<ScrollViewer>
<Image Source="Assets/MyImage.png" Stretch="None" />
</ScrollViewer>
</Grid>
ScrollViewer is designed to handle content that is bigger than the surrounding container.You can scroll image by put image in grid try like this
<ScrollViewer>
<Grid>
<Image Source="Assets/MyImage.png" Stretch="None" />
</Grid>
</ScrollViewer>
In case if Grid is much smaller than the Scroll-viewer then try by giving height and width attribute to scroll viewer
I'm making a sort-of toolbar in WPF (StackPanel containing Buttons containing StackPanels containing Images and TextBlock...)
Here is the code for one button :
<Button x:Name="btnGraph" FontWeight="Normal" Background="{DynamicResource accentColor}" BorderBrush="{DynamicResource accentColor}">
<StackPanel>
<Image Source="Resources/diagnostic_chart1.png" Stretch="None"/>
<TextBlock HorizontalAlignment="Center" Text="Graph"/>
</StackPanel>
</Button>
As you can see, the image in the button is stretched, but the same image code outside the button (in the container StackPanel), it works correctly : image
I've tried a lot of things, but nothing worked.
Is there a way to make it works ?
EDIT: I also tried changing the DPI of images from 72 to 96, no effect.
The image doesn't look stretched to me; the size seems right. It actually looks like it's rendering across pixel boundaries, giving it a blurred appearance. Try setting UseLayoutRounding="True" on your root visual.
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.
I have simple canvas with items and i need to add for scroll view as parent for my canvas.
But i fased with problem that after set
canvas.RenderTransform=new ScaleTransform(){...}
Scroolbars not appears or working not correctly.
Will be glad for any information.
The render transform occurs much later in the UI rendering process. It ultimately performs a matrix transform on controls rendering. The scroll viewer will be completely unware of this transform, its scrollbars will be based on the un-transformed size of the original Canvas.
The silverlight toolkit contains a LayoutTransformer control. This control applies a transform to its content as part of the layout process and reports the post-transform size as its desired size.
Consider this:-
<ScrollViewer Width="200" Height="200" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<toolkit:LayoutTransformer>
<toolkit:LayoutTransformer.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</toolkit:LayoutTransformer.LayoutTransform>
<Canvas Width="150" Height="150" Background="Aquamarine">
<Rectangle Fill="Blue" Canvas.Top="10" Canvas.Left="10" Width="30" Height="30" />
</Canvas>
</toolkit:LayoutTransformer>
</ScrollViewer>
Whilst the Canvas has a size (150) smaller than the containing scroll viewer (200), it is scaled so that it would be larger (300). The LayoutTransformer reports its desired size as 300, the post-transform size of the canvas. Hence the ScrollViewer displays scroll bars to accomodate it. Without the benefit of the LayoutTransformer the ScrollViewer would only see the Canvas as having a size 150 despite any applied RenderTransform.