draging images within the stackpanel in metro app

Question

draging images within the stackpanel in metro app

Answer 1

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

Answer 2

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

Answer 3

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