×

Discussion Board

Results 1 to 11 of 11
  1. #1
    Registered User
    Join Date
    Dec 2013
    Posts
    6

    Exclamation Enable zoom and drag&drop in a scrollviewer

    Hej all,

    I have asked this question many places with no help.

    I have tried to solve the problem going around it many ways.

    I can implement what my title says, by using a scrollviewer and viewbox. The problem for me to be able to catch the pinch motion and use it with the viewbox I have to "turn off" the scrollviewer, by setting the manipulationMode= control. this unfortunately influences the zoom, and the possibility of moving an object around inside the scrollviewer, very badly. Such that is laggy and slow responsive. This must be because of the manipulationMode that I change from system to control and back.
    Because If I remove the scrollviewer and only use a viewbox and my drag&drop of element it is quick and high responsiveness.

    I even tried using direct3D to enable use of doublebuffer. But still the scrollviewer has negative effects for my purposes.

    I could easily supply code, but to not influence people with my apparently embarrassing bad ideas.


    I wanted to know if people could share links or ideas of how to solve this issue. I basically want to be able to scroll around and zoom, without laggy behavior, then the drag&drop feature should be easy to implement.

    Does anyone have an idea to how it is solved by programmers in the app store`?

  2. #2
    Nokia Developer Moderator
    Join Date
    Feb 2011
    Location
    Portugal
    Posts
    960

    Re: Enable zoom and drag&drop in a scrollviewer

    Not sure if I understood your problem completely. When it comes to drag and drop we have an article on our wiki that has a good sample on this:

    http://developer.nokia.com/Community..._Windows_Phone

    Just not sure if it would help you in this particular case.

    I also saw this article about a drag&drop implementation to re-order items on screen:

    http://www.scottlogic.com/blog/2012/...-ordering.html

    Does any of this helps?

  3. #3
    Registered User
    Join Date
    Dec 2013
    Posts
    6

    Re: Enable zoom and drag&drop in a scrollviewer

    Hey thank you for your answer.

    Maybe my question was a bit confusing.

    The problem for me is not to make the drag&drop work. The problem is making it smooth in a scrollviewer. I cannot seem to get it to work. So unfortunately your links do not help me. But thank you for your reply!

  4. #4
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    568

    Re: Enable zoom and drag&drop in a scrollviewer

    Are you simply trying to make an image based control that allows panning and zooming?

  5. #5
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    118

    Re: Enable zoom and drag&drop in a scrollviewer

    I used a ScrollViewer and a ViewportControl to do easy scrolling of a non-zoomed image (UniformToFit - so there's more image in the vertical direction when landscape) and still allow me to zoom further in.

    UI:
    <Scrollviewer> then <ViewportControl> then <Canvas> then <Image> (or image class in my case)


    The basics are this:
    1. While the image you have is "unzoomed", the scrollviewer has full control and the ViewportControl does nothing.
    2. When you start to pinch, lock the scrollviewer by disabling the verticalscrollbar AND setting the viewport.height = scrollviewer.height. This neutralizes the scollviewer.
    3. You can do a temporary zoom using the Image ScaleTransform.
    4. On pinch finished, resize your actual image so that it takes up real space inside the ViewportControl. Now your viewportControl will let you pan all over the zoomed image with nice bounce-back.
    5. When you zoom back out again, re-enable the scrollviewer. (Set the height to the screen height and turn on the scrollbar.)

    FYI, I completely forget why there is a canvas in there, but I feel like it is important. See below:

    While the sample below does not do what you want to do, I based my code on the MediaViewer inside this sample and modified it:
    http://code.msdn.microsoft.com/wpapp...iew/SourceCode

  6. #6
    Registered User
    Join Date
    Dec 2013
    Posts
    6

    Re: Enable zoom and drag&drop in a scrollviewer

    I tried implementing the viewport, but I can't assign the height of the Viewport. I tried doing it through the scrollviewer and by finding the viewport, but it gives me an error, any suggestions on how to get the viewport and assign its height? And when you say resize the image so it takes up reals space in the viewport, what do you exactly mean?

  7. #7
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    118

    Re: Enable zoom and drag&drop in a scrollviewer

    Are you using the ViewportControl? (in the System.Windows.Controls.Primitives namespace?) I'm not sure what you mean by not being able to find the viewport.

    This is from my code:

    Code:
    private void LockScrollViewer(bool LockIt)
            {
                if (LockIt)
                {
                    _viewport.Height = _scrollViewer.Height;
                    _scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled;
                }
                else
                {
                    _scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
                    _viewport.Height = Double.NaN;
                }
            }
    When you use a ScaleTransform on your image, it does not affect the layout. So if your image was originally 300x300 and you scale it to 600x600, your viewportControl is still going to think it is 300x300. So, use the ScaleTransform only for the pinch action. When you let go (manipulationCompleted), remove the scaletransform and resize your actual image using width/height. That way, you'll be able to use the panning feature of the ViewportControl.

    But, seriously, take a look at that sample solution I linked. It's a little bit complex, but if you study the VirtualizedItem class, it's got almost everything in there. The XAML layouts for all the controls are in Themes/generic.xaml.

  8. #8
    Registered User
    Join Date
    Dec 2013
    Posts
    6

    Re: Enable zoom and drag&drop in a scrollviewer

    Quote Originally Posted by leemcpherson View Post
    Are you using the ViewportControl? (in the System.Windows.Controls.Primitives namespace?) I'm not sure what you mean by not being able to find the viewport.

    But, seriously, take a look at that sample solution I linked. It's a little bit complex, but if you study the VirtualizedItem class, it's got almost everything in there. The XAML layouts for all the controls are in Themes/generic.xaml.
    apparently yes it is very complex. And seems to be to complex for me to understand, I have been trying this for several weeks on and off with going through the code. But cannot seem to get it to work on my app unfortunately

  9. #9
    Registered User
    Join Date
    Dec 2013
    Posts
    6

    Re: Enable zoom and drag&drop in a scrollviewer

    Hey Lee,cpherson,

    I do not know if you had experience with the sample, I have had some breakthrough but am struggling with the _rootFrameworkElement what is that in the solution=?

  10. #10
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    118

    Re: Enable zoom and drag&drop in a scrollviewer

    In the code, they dump the root control of the datatemplate into the _rootFrameworkElement, so it is just a plain Grid for the VirtualizedItem.

    Here's the relevant portion of the xaml from generic.xaml

    Code:
    <Setter Property="ItemTemplate">
          <Setter.Value>
            <DataTemplate>
              <Grid>
                            <ScrollViewer x:Name="scrollViewer" ManipulationMode="Control" >
                <ViewportControl x:Name="Viewport">
                  <Canvas x:Name="Canvas">
                    <local:ThumbnailedImageViewer 
                      x:Name="ZoomableContent"
                      CacheMode="BitmapCache"
                      RenderTransformOrigin="0,0">
                      <local:ThumbnailedImageViewer.RenderTransform>
                        <ScaleTransform x:Name="ZoomableContentTransform"/>
                      </local:ThumbnailedImageViewer.RenderTransform>
                    </local:ThumbnailedImageViewer>
                  </Canvas>
                </ViewportControl>
                            </ScrollViewer>
                        </Grid>
            </DataTemplate>
          </Setter.Value>
        </Setter>

  11. #11
    Registered User
    Join Date
    Dec 2013
    Posts
    6

    Re: Enable zoom and drag&drop in a scrollviewer

    I appreciate your help extremely. I found taht snippet and have been working and playing around with it for several weeks. It seems like I have now gotten it to work, to also zoom content, that is not pictures. However the center that is chosen by the code does not give the center for me. I think I have to play around some more

    But thank you so much for your time and help!!!

Similar Threads

  1. 5530 XM Drag&Drop
    By microsoft2 in forum Symbian User Interface
    Replies: 0
    Last Post: 2009-09-10, 14:45
  2. Drag & Drop image supported?
    By Danneman in forum Symbian
    Replies: 4
    Last Post: 2009-04-21, 16:49
  3. drag and drop IDE
    By mayankkedia in forum Symbian
    Replies: 1
    Last Post: 2004-10-09, 19:42

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×