locked
draging images within the stackpanel in metro app

    Question

  • draging images within the stackpanel in metro app
    Tuesday, August 07, 2012 7:52 AM

Answers

  • Hello,

     

    First, the dragging control should be in a canvas, we can put this canvas into a stackpanle, we can use a rectangle with imageBursh, so that we can drag a image. The XAML like this

     
    <StackPanel x:Name="farthPanel" Height="351" Canvas.Left="584" Canvas.Top="282" Width="400">
                <Canvas Height="400" Width="400" Background="#FFEA3232">
                    <Rectangle Canvas.Left="10" Canvas.Top="10" x:Name="xrec" HorizontalAlignment="Left" Height="100"  Stroke="Black" VerticalAlignment="Top" Width="100" AllowDrop="True" PointerPressed="Rectangle_PointerPressed_1" PointerMoved="xrec_PointerMoved" PointerReleased="xrec_PointerReleased">
                        <Rectangle.Fill>
                            <ImageBrush ImageSource="Assets/Logo.png"/>
                        </Rectangle.Fill>
                    </Rectangle>
    
                </Canvas>
            </StackPanel>

    In the moved event, we should make the rectangle position in this canvas, also we need to know if customer press the point with moving.

     
    		// ManiPage.xaml.h
    		Windows::Foundation::Point oldpos;
    		bool pressed;
    
    
    // MainPage.xaml.cpp
    void dragingimage::MainPage::Rectangle_PointerPressed_1(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    {
    	pressed=true;
    }
    
    
    void dragingimage::MainPage::xrec_PointerMoved(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    {
    	if(!pressed)
    	return;
    	Point p = e->GetCurrentPoint((Rectangle^)sender)->Position;
    	if(oldpos.X==0.0&&oldpos.Y==0.0)
    	{
    		oldpos= e->GetCurrentPoint((Rectangle^)sender)->Position;
    	}
    	
    	// get the stack panle position
    	GeneralTransform^ transform=this->farthPanel->TransformToVisual(nullptr);
    	Point pos=transform->TransformPoint(Point(0,0));
    
    	//fixed in a small rectangle
    	double newposx=Canvas::GetLeft(this->xrec) +p.X-oldpos.X;
    	if(newposx<0)
    		Canvas::SetLeft(this->xrec, 0);
    	else if(newposx>pos.X-xrec->Width)
    		Canvas::SetLeft(this->xrec, this->farthPanel->Width-xrec->Width);
    	else
    		Canvas::SetLeft(this->xrec, newposx);
    		
    	double newposy=Canvas::GetTop(this->xrec) +p.Y-oldpos.Y;
    
    	if(newposy<0)
    		Canvas::SetTop(this->xrec, 0);
    	else if(newposy>pos.Y-xrec->Height)
    		Canvas::SetTop(this->xrec, this->farthPanel->Height-xrec->Height);
    	else
    		Canvas::SetTop(this->xrec, newposy);
    
    }
    
    
    void dragingimage::MainPage::xrec_PointerReleased(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    {
    	pressed=false;
    }
    

    Best regards,

    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Jesse Jiang Thursday, August 16, 2012 3:13 AM
    Thursday, August 09, 2012 10:32 AM
  • How about this

    Point p = e->GetCurrentPoint((FrameworkElement^)sender)->Position;

    I tested them on RTM and work fine.

    Best regards,

    Jesse



    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Proposed as answer by Jesse Jiang Monday, August 13, 2012 8:32 AM
    • Marked as answer by Jesse Jiang Thursday, August 16, 2012 3:13 AM
    Friday, August 10, 2012 7:55 AM

All replies

  • Hello,

     

    First, the dragging control should be in a canvas, we can put this canvas into a stackpanle, we can use a rectangle with imageBursh, so that we can drag a image. The XAML like this

     
    <StackPanel x:Name="farthPanel" Height="351" Canvas.Left="584" Canvas.Top="282" Width="400">
                <Canvas Height="400" Width="400" Background="#FFEA3232">
                    <Rectangle Canvas.Left="10" Canvas.Top="10" x:Name="xrec" HorizontalAlignment="Left" Height="100"  Stroke="Black" VerticalAlignment="Top" Width="100" AllowDrop="True" PointerPressed="Rectangle_PointerPressed_1" PointerMoved="xrec_PointerMoved" PointerReleased="xrec_PointerReleased">
                        <Rectangle.Fill>
                            <ImageBrush ImageSource="Assets/Logo.png"/>
                        </Rectangle.Fill>
                    </Rectangle>
    
                </Canvas>
            </StackPanel>

    In the moved event, we should make the rectangle position in this canvas, also we need to know if customer press the point with moving.

     
    		// ManiPage.xaml.h
    		Windows::Foundation::Point oldpos;
    		bool pressed;
    
    
    // MainPage.xaml.cpp
    void dragingimage::MainPage::Rectangle_PointerPressed_1(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    {
    	pressed=true;
    }
    
    
    void dragingimage::MainPage::xrec_PointerMoved(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    {
    	if(!pressed)
    	return;
    	Point p = e->GetCurrentPoint((Rectangle^)sender)->Position;
    	if(oldpos.X==0.0&&oldpos.Y==0.0)
    	{
    		oldpos= e->GetCurrentPoint((Rectangle^)sender)->Position;
    	}
    	
    	// get the stack panle position
    	GeneralTransform^ transform=this->farthPanel->TransformToVisual(nullptr);
    	Point pos=transform->TransformPoint(Point(0,0));
    
    	//fixed in a small rectangle
    	double newposx=Canvas::GetLeft(this->xrec) +p.X-oldpos.X;
    	if(newposx<0)
    		Canvas::SetLeft(this->xrec, 0);
    	else if(newposx>pos.X-xrec->Width)
    		Canvas::SetLeft(this->xrec, this->farthPanel->Width-xrec->Width);
    	else
    		Canvas::SetLeft(this->xrec, newposx);
    		
    	double newposy=Canvas::GetTop(this->xrec) +p.Y-oldpos.Y;
    
    	if(newposy<0)
    		Canvas::SetTop(this->xrec, 0);
    	else if(newposy>pos.Y-xrec->Height)
    		Canvas::SetTop(this->xrec, this->farthPanel->Height-xrec->Height);
    	else
    		Canvas::SetTop(this->xrec, newposy);
    
    }
    
    
    void dragingimage::MainPage::xrec_PointerReleased(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    {
    	pressed=false;
    }
    

    Best regards,

    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Jesse Jiang Thursday, August 16, 2012 3:13 AM
    Thursday, August 09, 2012 10:32 AM
  • hi,

    there is an error in the below code which I can't remov.Please help me..

    Point p = e->GetCurrentPoint((Rectangle^)sender)->Position;

    Regards,

    Sarath s

    Friday, August 10, 2012 3:56 AM
  • How about this

    Point p = e->GetCurrentPoint((FrameworkElement^)sender)->Position;

    I tested them on RTM and work fine.

    Best regards,

    Jesse



    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Proposed as answer by Jesse Jiang Monday, August 13, 2012 8:32 AM
    • Marked as answer by Jesse Jiang Thursday, August 16, 2012 3:13 AM
    Friday, August 10, 2012 7:55 AM