I have a FlipView which shows the pages of a leaflet as the user swipes through it. I want the user to be able to zoom in a page.
What I found so far is that if I wrap my Image inside a ScrollViewer and set ZoomMode = Enabled, the user can zoom. The strange thing is that if I zoom in the right side of the page, it automatically goes back to the left side after I lift up my fingers from the screen. Any idea how to solve this issue?
XAML:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
Setting the FlipView's width and height:
flipView1.Width = Window.Current.Bounds.Width;
flipView1.Height = Window.Current.Bounds.Height;
Try something like this:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"
MaxWidth="{Binding ElementName=YourPage, Path=DataContext.Width}"
MaxHeight="{Binding ElementName=YourPage, Path=DataContext.Height}"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
There are 2 important changes here:
Set ScrollViewer's HorizontalScrollBarVisibility and VerticalScrollBarVisibility to Auto
Bind Image's MaxWidth and MaxHeight to Window.Current.Bounds.Width and Window.Current.Bounds.Height respectively exposed through Width and Height public properties inside a ViewModel that is a DataContext to that specific page. This is for scenarios where your FlipView is taking up the whole page. If you need the FlipView to be smaller on the page, then set the Width and Height properties in the ViewModel based on the size you expect/need/want.
EDIT:
More info in my blog post Why is my zoomable ScrollViewer snapping the image to the left?
Related
I have a stack panel and it has one grid and I'd like the grid to have same height as stack panel.
I tried playing with VerticalAlignment stretch or height 100% nothing works
I tried setting the values programatically OnNavigatedTo but it doesn't have the effect
Any suggestions to resolve this are welcome
Please find the code below
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" Orientation="Vertical" Name="ProgressOverlay">
<Grid Name="Overlaygrid"">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Foreground="Black" FontSize="25” T HorizontalAlignment="Center" Text="Loading"/>
</StackPanel>
</Grid>
</StackPanel>
A StackPanel takes by default the size needed by its content and shrinks to the size required, while a container control like Grid stretches to the full size available (e.g full page).
If you want to keep the outer StackPanel, you will have to set VerticalAlignment="Stretch" on the StackPanel, not on the Grid.
But since the Grid is the only single content item in your outer StackPanel, you can remove it and move the properties Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" to the Grid. Always try to keep your XAML structure as simple as possible.
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.
In my WP 8.1 app I have the MapControl:
<Maps:MapControl x:Name="mapControl" ZoomLevelChanged="mapControl_ZoomLevelChanged" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1">
<Maps:MapItemsControl x:Name="MapIcons" ItemsSource="{Binding}" >
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
</StackPanel>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>
On the map I got markers, and when I click one of them, "contentGrid" apears. The code for that behavior:
private void myStack_Tapped(object sender, TappedRoutedEventArgs e)
{
StackPanel s = sender as StackPanel;
Grid contentBox = s.FindName("contentGrid") as Grid;
contentBox.Visibility = Visibility.Visible;
}
I want to see "contentGrid" always above other markers, but some of them are above my "contentGrid". I tried to set Canvas.Zindex property in XAML in "contentGrid", but it's not working.
I attach screenshot to exemplify my problem.
The StackPanel stacks vertically (by default) or horizontally.
If you want children of the StackPanel in "different layers",
you 'd better replace the StackPanel of the DataTemplate with a Grid or Canvas
A simple solution is to
<DataTemplate>
<Grid Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
Writing the Image in the XAML before the Grid puts it under graphically.
Last, you can play with the ZIndex if you add other controls are added to the Grid/Canvas.
Otherwise I am not sure the ZIndex is really necessaray
EDIT
Canvas.ZIndex is an attached property of Canvas.
But surprisingly it works with the Grid !
The greater Zindex is, the closer the control to your eye (over the other controls)
Regards
I'm trying to scroll items in stackpanel added programmatically, but it's not working:
<ScrollViewer HorizontalScrollMode="Enabled" >
<StackPanel x:Name="options" Orientation="Horizontal" Width="760" HorizontalAlignment="Left" Margin="1,0,0,0">
</StackPanel>
</ScrollViewer>
is there any error?
You also need to specify the horizontal visibility of the ScrollViewer. Set it to any value other than Disabled (the default) and it will work:
<ScrollViewer HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">
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