在ViewportControl WP8中移动对象

Question

I'm using the ViewportControl to scroll around and zoom in and out of my Map. In this map I've got a green ellipse which I wish to move around. Previously I used a ScrollViewer where I set the manipulationMode of the ScrollViewer to control, and thus making it capable of moving my ellipse around. However I can't find a similar way for the ViewportControl. So is there a way to move my ellipse around?

The code I've got so far is:

The xaml part where I have my ViewportControl around my map

   <ViewportControl x:Name="ViewPortTestTest" Bounds="0,0,1271,1381.5" Height="480" Width="800" Canvas.ZIndex="1" Grid.Row="1">
        <ViewportControl.RenderTransform>
            <CompositeTransform x:Name="myTransformTest"/>
        </ViewportControl.RenderTransform>

        <View:Map x:Name="ZoomableContent" >
            <View:Map.RenderTransform>
                <CompositeTransform x:Name="myTransform" />
                <!-- ScaleX="{Binding Map.imageScale}" ScaleY="{Binding Map.imageScale}"/>-->
            </View:Map.RenderTransform>
        </View:Map>
    </ViewportControl>

It is in the map where I add the ellipse. The viewModel where I manipulate my ellipse

public void ManStart(ManipulationStartedEventArgs e)
    {

        e.Handled = true;

        ViewportControl VP = FindParentOfType<ViewportControl>(ChampViewModelSel);


       }
    }

    public void ManDelta(ManipulationDeltaEventArgs e)
    {
        e.Handled = true;


        Point fingerPosition = e.DeltaManipulation.Translation;

        Temp.x = fingerPosition.X;
        Temp.y = fingerPosition.Y;

        }
    }

Where Temp.x and Temp.y is the new position of the ellipse.

Answer 1

I think you could try to use TouchPanel from XNA and Touch.FrameReported event for this purpose. Probably Map and VieportControl handle the manipulation event so it won't fire with your code.

In my proposal Touch_FrameReported will be fired every time you touch the screen, so we have to check only for situations we need - here comes IsGestureAvailable and TouchAction . Simple code can look like this:

public MainPage()
{
    InitializeComponent();
    TouchPanel.EnabledGestures = GestureType.FreeDrag;
    Touch.FrameReported += Touch_FrameReported;
}

private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
    if (TouchPanel.IsGestureAvailable) // check only dragging 
    {
       // get point relative to Viewport
       TouchPoint mainTouch = e.GetPrimaryTouchPoint(ViewPortTestTest);
       // check if drag has completed (key up)
       if (mainTouch.Action == TouchAction.Up)
       {
          Temp.x = mainTouch.Position.X;
          Temp.y = mainTouch.Position.Y;
       }
    }
}

You can read more about Gestures here at MSDN and on this blog .

You can also check other GestureTypes and for example check if TouchAction.Down and user clicked on your Ellipse.

These methods give you many possibilities to read TouchPoints and their Actions so maybe it will help.

---

It took me a while to find a way how to disable Vieport. I've found a little 'hack' for that, it will be easier if your VieportControl was only horizontal or vertical (there is a lock property, but doesn't work for both). Here is this little 'hack' which should disable both horizontal and vertical scrolling:

Rect originalBounds = new Rect();
private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
    TouchPoint myTouchPoint = e.GetPrimaryTouchPoint(ViewPortTestTest);
   // disable scrolling
   if (myTouchPoint.Action == TouchAction.Down) // here probably some other statement like if user hit ellipse
   {
       originalBounds = ViewPortTestTest.Bounds;
       ViewPortTestTest.Bounds = ViewPortTestTest.Viewport; // set current view as Bounds
   }

    // more logic

   // enable once again
   if (myTouchPoint.Action == TouchAction.Up)
        ViewPortTestTest.Bounds = originalBounds;
}

When I want to disable scrolling - I set bounds of the VieportControl to the current view (and I remember original ones). When I want to enable scrolling - I bring back original bounds.

As I've tested it - it is working - of course it needs a little more logic in locking if statement, so that it won't lock every time you touch the screen.