Answered by:
draging images within the stackpanel in metro app

Question
-
draging images within the stackpanel in metro appTuesday, August 7, 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 9, 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 9, 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