locked
How do you make a popup movable/draggable? xaml/c++

    Question

  • I've got a usercontrol inside a popup.  How do I make the popup movable or draggable?
    Friday, July 26, 2013 12:31 AM

Answers

  • See Gestures, manipulations, and interactions and Quickstart: Touch input for an overview.

    The Input: Manipulations and gestures (C++) sample (Windows 8) demonstrates the GestureRecognizer, but you will probably be better off using the higher level Xaml manipulations demonstrated in the linked docs.

    --Rob

    Friday, July 26, 2013 12:57 AM
    Owner
  • Here is a simple example for moving a rectangle (or any object that descends from UIElement).

    In the Xaml, you need to add a RenderTransform for the element with a TranslateTransform child.  You need to set the ManipulationMode to All and hook up an event handler for ManipulationDelta.

            <Rectangle Fill="Red" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
                       ManipulationMode="All" ManipulationDelta="Element_ManipulationDelta">
                <Rectangle.RenderTransform>
                    <TranslateTransform/>
                </Rectangle.RenderTransform>
            </Rectangle>

    The ManipulationDelta event handler is as follows;

    void HelpMoveObj::MainPage::Element_ManipulationDelta(Platform::Object^ sender, Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e)
    {
    	auto element = safe_cast<UIElement^>(sender);
    	auto XlateXform = safe_cast<TranslateTransform^>(element->RenderTransform);
    	XlateXform->X += e->Delta.Translation.X;
    	XlateXform->Y += e->Delta.Translation.Y;	
    }

    and with a .h addition

    	private:
    		void Element_ManipulationDelta(Platform::Object^ sender, Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e);

    • Marked as answer by RandyPete Sunday, July 28, 2013 2:20 AM
    Saturday, July 27, 2013 10:15 PM

All replies

  • See Gestures, manipulations, and interactions and Quickstart: Touch input for an overview.

    The Input: Manipulations and gestures (C++) sample (Windows 8) demonstrates the GestureRecognizer, but you will probably be better off using the higher level Xaml manipulations demonstrated in the linked docs.

    --Rob

    Friday, July 26, 2013 12:57 AM
    Owner
  • See Gestures, manipulations, and interactions and Quickstart: Touch input for an overview.

    The Input: Manipulations and gestures (C++) sample (Windows 8) demonstrates the GestureRecognizer, but you will probably be better off using the higher level Xaml manipulations demonstrated in the linked docs.

    --Rob


    Is there not a less complicated way?  There's no popup property that allow me to move it around?
    Friday, July 26, 2013 1:06 AM
  • There are no in-box properties for this. You could create an attached property to wrap the manipulation handling. I suspect there are existing third party behaviors you may be able to use. This is a pretty typical behavior scenario.

    --Rob

    Saturday, July 27, 2013 5:16 AM
    Owner
  • There are no in-box properties for this. You could create an attached property to wrap the manipulation handling. I suspect there are existing third party behaviors you may be able to use. This is a pretty typical behavior scenario.

    --Rob

    Can you please point me to the right direction? 

    It doesn't have to be a popup.  The goal is to make a calculator usercontrol movable.  Right now I have it sit in a corner.

    Saturday, July 27, 2013 4:19 PM
  • Here is a simple example for moving a rectangle (or any object that descends from UIElement).

    In the Xaml, you need to add a RenderTransform for the element with a TranslateTransform child.  You need to set the ManipulationMode to All and hook up an event handler for ManipulationDelta.

            <Rectangle Fill="Red" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
                       ManipulationMode="All" ManipulationDelta="Element_ManipulationDelta">
                <Rectangle.RenderTransform>
                    <TranslateTransform/>
                </Rectangle.RenderTransform>
            </Rectangle>

    The ManipulationDelta event handler is as follows;

    void HelpMoveObj::MainPage::Element_ManipulationDelta(Platform::Object^ sender, Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e)
    {
    	auto element = safe_cast<UIElement^>(sender);
    	auto XlateXform = safe_cast<TranslateTransform^>(element->RenderTransform);
    	XlateXform->X += e->Delta.Translation.X;
    	XlateXform->Y += e->Delta.Translation.Y;	
    }

    and with a .h addition

    	private:
    		void Element_ManipulationDelta(Platform::Object^ sender, Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e);

    • Marked as answer by RandyPete Sunday, July 28, 2013 2:20 AM
    Saturday, July 27, 2013 10:15 PM
  • Here is a simple example for moving a rectangle (or any object that descends from UIElement).

    In the Xaml, you need to add a RenderTransform for the element with a TranslateTransform child.  You need to set the ManipulationMode to All and hook up an event handler for ManipulationDelta.

            <Rectangle Fill="Red" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"
                       ManipulationMode="All" ManipulationDelta="Element_ManipulationDelta">
                <Rectangle.RenderTransform>
                    <TranslateTransform/>
                </Rectangle.RenderTransform>
            </Rectangle>

    The ManipulationDelta event handler is as follows;

    void HelpMoveObj::MainPage::Element_ManipulationDelta(Platform::Object^ sender, Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e)
    {
    	auto element = safe_cast<UIElement^>(sender);
    	auto XlateXform = safe_cast<TranslateTransform^>(element->RenderTransform);
    	XlateXform->X += e->Delta.Translation.X;
    	XlateXform->Y += e->Delta.Translation.Y;	
    }

    and with a .h addition

    	private:
    		void Element_ManipulationDelta(Platform::Object^ sender, Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e);

    works perfectly.  Thank you.


    Sunday, July 28, 2013 2:19 AM
  • I should add that you don't need to apply this code to every xaml page.  Just apply this code once to the usercontrol and the usercontrol is draggable whenever it is referenced.

    Sunday, July 28, 2013 3:58 PM
  • Can I please get this code for a C# project please?
    Wednesday, August 28, 2013 6:20 AM
  • C# sample code is in the docs I linked previously:  Quickstart: Touch input

    --Rob

    Wednesday, August 28, 2013 6:36 AM
    Owner
  • Thank you for pointing that out to me.

    Is there anyway to keep the usercontrol from flying off the screen?

    Thursday, August 29, 2013 5:30 AM