Develop Reference

UWP Fit zoomable image in its container

To make an image zoomable I'm using wrapping the image control with a ScrollViewer like such:
<Page ...>
<ScrollViewer ZoomMode="Enabled" HorizontalScrollMode="Auto" VerticalScrollMode="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" />
</ScrollViewer>
</Page>
I want the image to be resized to fit inside the page in both horizontal and vertical directions, just like the Stretch="Uniform" behaviour of the Image control:
But instead it resizes the image to fit horizontally only, clipping the excess of the image on the vertical direction:
I got some head start from this website, so I changed the xaml to look like:
<Page x:Name="Page"
... />
<ScrollViewer ZoomMode="Enabled" HorizontalScrollMode="Auto" VerticalScrollMode="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" Width="{Binding ActualWidth, ElementName=Page}" Height="{Binding ActualHeight, ElementName=Page}" />
</ScrollViewer>
</Page>
While this works fine on the stretching side of things, the image then becomes aligned to the left of the screen, and weird things happen when you zoom in/out:
Playing with the Stretch properties of the image have no effect.
How do I then make the image zoomable while initially fitting the image inside its container, just like any photo viewer app would do?

This works:
<Page x:Name="Page" ...>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" MaxWidth="{Binding ActualWidth, ElementName=Page}" MaxHeight="{Binding ActualHeight, ElementName=Page}"/>
</ScrollViewer>
</Page>
...which is exactly what the article recommended to be done.

Pinch to Resize, Drag to Move the Image control - Implementation WP 8.1

My code for moving the image control is:
<Grid Name="grid" Width="400" Height="400" ManipulationMode="All"
ManipulationDelta="Grid_ManipulationDelta_1" Margin="0,58,0,182">
<Grid.RenderTransform>
<CompositeTransform x:Name="transform" />
</Grid.RenderTransform>
<Image x:Name="Image1" Source="Assets/SmallLogo.png" Stretch="None"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
Manipulation delta has code:
private void Grid_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.PointerDeviceType == PointerDeviceType.Touch)
{
this.transform.TranslateX += e.Delta.Translation.X;
this.transform.TranslateY += e.Delta.Translation.Y;
OutText.Text = sender.ToString();
}
else
{
e.Handled = true;
}
}
This works perfect when I move image wherever on my grid.
Now for resizing the image control I have different implementation,
<ScrollViewer x:Name="scrl2" SizeChanged="scrl_SizeChanged" ZoomMode="Enabled"
HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
MinZoomFactor="0.1" MaxZoomFactor="10" Margin="0" VerticalAlignment="Bottom">
<Image Source="Assets/SmallLogo.png" Stretch="None"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</ScrollViewer>
The scroll viewer can be resized here and image is child so it also can. And it changes size on runtime perfectly, but note that this is different code.
I want to implement both scenarios on image control, which seems logical, so I edit my xaml like this:
<Grid Name="grid" Width="400" Height="400" ManipulationMode="All"
ManipulationStarted="Grid_ManipulationStarted_1"
ManipulationCompleted="Grid_ManipulationCompleted_1"
ManipulationDelta="Grid_ManipulationDelta_1" Margin="0,58,0,182">
<Grid.RenderTransform>
<CompositeTransform x:Name="transform" />
</Grid.RenderTransform>
<ScrollViewer x:Name="scrl2" SizeChanged="scrl_SizeChanged"
ZoomMode="Enabled" HorizontalScrollMode="Enabled"
VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
MinZoomFactor="0.1" MaxZoomFactor="10" Margin="0" VerticalAlignment="Bottom">
<Image x:Name="Image1" Source="Assets/SmallLogo.png" Stretch="None"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</ScrollViewer>
</Grid>
The RenderTransform should take care of movement and ScrollViewer should do pinch thing. But that does not work. In separate code when image is in scroll viewer only - pinch to zoom works, when image is in grid - drag to move works.
In the above code where I put image in ScrollViewer and that ScrollViewer in grid, only pinch to zoom works, movement does not work. I tried to undo the Horizontal Vertical alignment settings (set them to something null) but that is not possible. The image resizes, but remains always in the position it is set in alignment settings.
What is wrong in this implementation?

How to increase ScrollViewer Speed programmatically

I need to increase my ScrollViwer speed through program.
<ScrollViewer x:Name="scrollTile" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden" PreviewMouseWheel="scrollTile_PreviewMouseWheel">
<StackPanel Canvas.Left="45" Canvas.Top="0" x:Name="MetroStackPanel" Orientation="Horizontal" Background="#00000000" ScrollViewer.HorizontalScrollBarVisibility="Hidden"/>
</ScrollViewer>
I didn't find any method to increase scrolling speed through c#. Can anyone help me with this?

Just put ScrollViewer
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel ... />
</ScrollViewer>

Cannot scroll content horizontal in windows store app

In my application, I have a StackPanel with the Orientation set to 'horizontal'. In my StackPanel there are 4 Images. When I try to scroll this content horizontally, it only scrolls a few pixels and I cannot see the whole content. When I change the Orientation of my StackPanel to vertical, I can scroll my whole content vertical. Why it isn't possible to scroll it hotizontally? Any ideas how I can solve this problem?
<Grid>
<ScrollViewer>
<StackPanel Orientation="Horizontal" >
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
<Canvas Margin="120,0,0,0"
Width="310"
Height="390">
<Image Width="310"
Height="390"
Source="ms-appx:///Assets/Image/background_teaser.png"/>
</Canvas>
</StackPanel>
</ScrollViewer>
</Grid

Horizontal scrolling is not enabled per default.
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">

I had some issues working with Stackpanels in a ScrollViewer. Try wrapping the Stackpanel in another Grid.
And as the others have pointed out, you need to set the HorizontalScrollMode on your ScrollViewer

Frame on a resizable Window should show Scrollbar

My app has a resizable WPF window with a frame which shows different WPF pages. Most of the time the pages are bigger than the frame and if this is the case, the frame should display scrollbar(s). Unfortunately, it never shows any scrollbar.
Here is my code:
<Grid>
<Frame Name="MainFrame"
NavigationUIVisibility="Hidden"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Grid>
Code behind:
MainFrame.Navigate(new Page1());
What did I do wrong?

Try wrapping your Frame in a ScrollViewer:
<Grid>
<ScrollViewer>
<Frame Name="MainFrame"
NavigationUIVisibility="Hidden"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
</Grid>

I had the same problem and I gave up and just set the Visibility to Visible. If it did not need the scrollbar then no real harm done.

Had the same problem, nothing worked. So I’ve used a workaround to solve it by adding scrollviewer to the target page
and setting page size to frame size
<Page x:Class="PageInFrame" Height="1050" Width="555" > …
<ScrollViewer x:Name="svScroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="LayoutRoot" Height="1050" Width="555">
…..
</Grid>
</ScrollViewer>
Set/Replace page Height and Width property to target/containing frame size (can be done runtime or design time)