locked
How to allow zoom and slide on the same element ?

    Question

  • Hi !

    I create an Apps to display a comics book. I have a slideshow page with a Image object with zoom enabled. Bu I don't known how to slide on this element in the same time. If I use the manipulation events, when I want zoom, the apps detect a slide in same time !

    In the Picture Apps by default in Windows Phone 8.1, the slide works only if the picture isn't zoomed but I don't find how to detect it.

    Wednesday, June 18, 2014 6:43 AM

Answers

All replies

  • Handle the manipulation events and in ManipulationDelta you can choose how you want to manage the manipulations. For your example, you can decide that if you receive a scale manipulation you'll ignore any associated translation. If you get only the translate then apply it.

    If by slide you mean to flip a Fairview then you can check that the translates sufficiently horizontal and then bump the FlipView's SelectedIndex up or down based on the slide direction.

    Wednesday, June 18, 2014 7:14 AM
    Moderator
  • Hi,
    There is a very helpful post about your problem in this link. Check it will help you a lot.

    Regards,


    Ibraheem Osama Mohamed | My Blog | @IbraheemOM | My Website

    (If my reply answers your question, please propose it as an answer)

    • Marked as answer by Aarklendoia Tuesday, June 24, 2014 4:53 PM
    Monday, June 23, 2014 8:12 PM
  • Thanks, this link is very interesting.

    I'll try to modify my app to use the FlipView, it's a good idea. I hope it's ok to load a collection of 1600 items in a FlipView!

    Tuesday, June 24, 2014 6:06 AM
  • A little problem with the zoom : When I want to see the right side of the image, it automatically returns to the left as if the action taken into account was the slide and not the navigation in the image.

    This is the same problem as before!

    I must detect if the picture is zoomed and disable the slide during it...

    Wednesday, July 2, 2014 5:40 AM
  • I modified the XAML and it works but I have another problem. When I rotate the phone, the Image doesn't adapted to the width of the screen.

            <FlipView x:Name="FlipViewStrips"
                      Grid.Row="0" 
                      ItemsSource="{Binding StripsCollection}" 
                      SelectedItem="{Binding Strip, Mode=TwoWay}"
                      SelectionChanged="FlipViewStrips_SelectionChanged">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="LayoutHeader">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Margin="10,0,0,0" Grid.Row="0" Grid.Column="0" Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}"/>
                            <TextBlock Margin="10,0,0,0" Grid.Row="1" Grid.Column="0" Text="{Binding SectionTitle}" Foreground="{StaticResource PhoneAccentBrush}" Style="{StaticResource BaseTextBlockStyle}"/>
                            <TextBlock Margin="10,0,0,0" Grid.Row="2" Grid.Column="0" Text="{Binding FormatedNumber}" Style="{StaticResource SubheaderTextBlockStyle}" FontSize="15"/>
                            <StackPanel Height="40" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Bottom" Orientation="Horizontal">
                                <Image Source="/Assets/Content/bookmark.png" Visibility="{Binding IsBookmarked, Converter={StaticResource BooleanToVisibilityConverter}}" Stretch="UniformToFill"/>
                            </StackPanel>
                            <Grid Grid.Row="4" Grid.ColumnSpan="2" Canvas.ZIndex="0">
                                <StackPanel VerticalAlignment="Center">
                                    <ProgressBar Height="10" IsIndeterminate="True" VerticalAlignment="Top" Margin="10,0"/>
                                    <TextBlock x:Uid="TextBlockLoading" Text="loading" VerticalAlignment="Top" TextAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" />
                                </StackPanel>
                            </Grid>
                            <Grid Grid.Row="4" Grid.ColumnSpan="2" Canvas.ZIndex="1">
                                <ScrollViewer Background="Aqua" 
                                    ZoomMode="Enabled"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    HorizontalScrollBarVisibility="Auto"
                                    VerticalScrollBarVisibility="Auto"
                                    MinZoomFactor="1">
                                    <Image Source="{Binding ImagePath}" Width="{Binding ActualWidth, ElementName=page, Mode=OneWay}"/>
                                </ScrollViewer>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
    I tried to force the width in the Page_SizeChanged event :

            private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                for (Int32 i = 0; i < FlipViewStrips.Items.Count; i++)
                {
                    var flipViewItem = FlipViewStrips.ContainerFromIndex(i);
                    var scrollViewItem = FindFirstElementInVisualTree<ScrollViewer>(flipViewItem);
                    if (scrollViewItem is ScrollViewer)
                    {
                        ScrollViewer scrollViewer = (ScrollViewer)scrollViewItem;
                        scrollViewer.Width = page.ActualWidth;
                        scrollViewer.ChangeView(0, 0, 1.0f);
                    }
                    var imageItem = FindFirstElementInVisualTree<Image>(flipViewItem);
                    if (imageItem is Image)
                    {
                        Image image = (Image)imageItem;
                        image.MinWidth = page.ActualWidth;
                        image.MaxWidth = page.ActualWidth;
                        image.Width = page.ActualWidth;
                    }
                }
            }

    An idea ?




    • Marked as answer by Aarklendoia Wednesday, July 2, 2014 3:45 PM
    • Unmarked as answer by Aarklendoia Wednesday, July 2, 2014 3:45 PM
    • Edited by Aarklendoia Wednesday, July 2, 2014 3:50 PM
    Wednesday, July 2, 2014 3:42 PM
  • I understood the problem. The zoom factor must be reset (not to 1.0f) but if I compute it, it's false. The factor is too low.

    The e.NewSize.Width send by Page_SizeChanged isn't the real size of the screen (it's the virtual value, 872 for a Full HD screen and not 1080). I don't undertand how to compute the correct zoom factor...

    Friday, July 4, 2014 3:53 PM
  • I continued to investigate the problem.

    The behavior is as follows:

    If the HorizontalScrollBar is disabled, the Image keep the width of the ScrollViewer but you can't move into the Image after zooming. It's the scrollViewer and not the Image who move and automatically return to SnapPoint. If the HorizontalScrollBar is hidden or visible, you can move the Image but the width isn't adapted to the ScrollViewer on rotation of the screen.

    I tried to disable the scrollbar when the zoom is equal to 1.0f et hidden it when the zoom is different of 1.0f. But the changing of the state isn't applied at runtime and the Apps freeze after a few seconds...

    Someone have another idea ?

    Monday, July 7, 2014 6:56 AM