Develop Reference

Scrollviewer to Display a Bigger Image on Windows Phone

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

Windows Phone 8 ScrollViewer.CanContentScroll not recognized?

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>

Canvas improperly overlaying a TextBlock component inside a DockPanel

In the image here, each block with a number in it represents a laser. These blocks are laid out on a canvas inside a DockPanel. Also inside the DockPanel docked to the top is the red TextBlock that you can see is hiding behind the laser map canvas. Why is this happening? The TextBlock is docked to the top of the DockPanel and canvas has no dock setting, therefore it should fill the rest of space. Also of note: I had to put the DockPanel inside a ViewBox in order for the whole center screen space to scale properly on window resizes. Then I had to put that ViewBox inside a ScrollViewer to allow scroll bars to appear when needed.
Here is the XAML Code for the center screen (Note: Child of the Window is a DockPanel. Menu is docked to the top, left-hand button panel is docked to the left, right-hand button panel is docked to the right, the status bar is docked to the bottom and everything you see in the center screen is defined by the following XAML code)
<ScrollViewer
Name="centerScreenScrollViewer"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="{Binding IsScrollbarsVisible, Converter={StaticResource BoolToScrollbarVisConverter}, FallbackValue=Hidden}">
<Viewbox>
<DockPanel
LastChildFill="True">
<TextBlock
DockPanel.Dock="Top"
Name="tbkFullVisual"
Style="{StaticResource tbkStyleBlue}"
Foreground="Red"
IsEnabled="{Binding FullVisual}"
HorizontalAlignment="Center"
VerticalAlignment="Top"
FontSize="24">
*** This Print Requires Full Visual Inspection! ***
</TextBlock>
<Canvas x:Name="mapCanvas">
<ContentPresenter Content="{Binding MapCanvas}"/>
</Canvas>
</DockPanel>
</Viewbox>
</ScrollViewer>
Any help in solving this issue will be greatly appreciated.
Regards,
Kyle

This has to do with the way that a ViewBox works, in particular with the Canvas element. The ViewBox is used to resize child elements, as I'm sure you're aware. There are 2 issues with the Canvas element:
The default Height and Width are 0, which means that the TextBlock will get all the space.
The Canvas element lets you draw outside of its own boundaries, so even if your canvas is tiny or not even visible, you would be allowed to render your grid of numbers.
The quickest solution is to set VerticalAlignment on the ViewBox:
<Viewbox VerticalAlignment="Top">
...
</Viewbox>
You could set a Height on the Canvas, but I think this is less ideal because you don't want to change this dynamically with window resize.

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"