Free drag and drop in Windows 8 Metro Apps? - windows-8

Can I drag an item (image, rectangle or other shapes ...) and drop it freely somewhere on the screen? I know there is a way to drag and drop items from a GridView to another, but I would like to do it without restrictions (and without Directx).
And I also found only a quickguide for drag&drop, no useful examples, that's why I'm curious.

I had the same problem. After trying to work with Manipulation etc I just gave up and implemented a quick work around.
I just placed my item ( Circle in my case ) into a ListView and allowed the ListViewItems to be dragged. (CanDragItems). I also removed all the styles so it wouldn't look like a ListView.
This way I could drag my ListViewItem (which was just a circle) and drop it somewhere. You don't have to drop it into another ListView.
If you put these property
Drop="imgCart_Drop_1" AllowDrop="True"
on an image for example then you can capture the drop event.
I hope this helps

Related

Drag using Toolkit Gestures goes crazy on Landscape Orientation

In a WP8 app, I have a ListBox bound to an ItemsSource with a Grid as it's ItemsPanelTemplate. The layout of the Grid might be different each time (different number of rows/columns) based on user selection and I'm using a helper class in order to bind the ItemsPanelTemplate Grid's Row and Column Definitions to values read from a database.
The user can add item's to the app and assign each item to a Grid cell in the ListBox. Each item can "sit" in multiple Grids (a many-to-many relationship), which led me to use another binding helper class in order to set the bindings of Grid.Row and Grid.Column attached properties in the ListBox.ItemContainerStyle, bound to a property of the ItemsSource class.
Another requirement is to have the app in Portrait orientation when Rows.Count >= Columns.Count and in Landscape when the columns are more.
I'm also using the Toolkit Gestures for drag and drop operations.
The issue in question, is a drag issue on Landscape orientation. While everything works great on Portrait, while on Landscape orientation the ListBox goes crazy. The dragging happens to different cell's that those actually being dragged and some of them don't even raise the gesture events (DragStarted, DragDelta, DragCompleted).
I'm lost here, don't know what the issue might be, or how to solve this.
Need your lights please.
Here is a sample that illustrates the problem.
EDIT
Phew, it's a bug of the GestureListener on the toolkit. It does not respect the Landscape orientation and treats the UIElements as if they were rendered in Portrait.
Using the Manipulation Events instead, which work properly. Can I have my 50 bounty points back? :P
If it is not gesture listener but Manipulation Event you are looking at there is couple of good questions out there:
Drag and drop from list to canvas on windows phone with MVVM
Moving Object in ScrollViewer

Drag and Drop Items in desired position Listview WinRT

I am able to implement drag and drop from one ListView to the other ListView with the help from this blogpost
Windows 8 Drag Drop
I am also able to reoder items in the same ListView
CanReorderItems="True"
But I am not able to drop an item from one ListView control to the other ListView control in the desired location.
Is there any way to find out the position where the drop occurred so that I can insert at that location using Insert method.
http://www.codeproject.com/Articles/536519/Extending-GridView-with-Drag-and-Drop-for-Grouping
The GridViewEx control implements drag and drop for cases which are
not supported by the regular GridView control:
For items panels other than WrapGrid, StackPanel, and VirtualizingStackPanel.
When grouping is enabled.
It also allows adding new groups to the underlying data source if the
user drags some item to the left-most or right-most edges of the
control.
Thank you #Xyroid!! This is exactly what I was looking for
This should help:
XAML ListView and GridView reorder and drag and drop sample (Windows 8.1)
http://code.msdn.microsoft.com/windowsapps/XAML-ListView-and-GridView-6bd77f71

Adding drag and drop functionality to metro style app buttons with C# and XAML

I'm trying to implement a sort of drag functionality into my app. As a simplistic example imagine I have a 2x2 square of buttons, so four buttons total. Clicking a button will perform some other functionality however I want when they hold and drag one of these buttons for it to do something else (ideally if you drag one button and drop it while in the space of another button the two buttons will swap places, as long as I can get dragging and dropping working the swap should be easy).
I've done some research and followed a few tutorials but seemed to get errors at one step or another with all of those. It seems ListViews and GridViews have some drag and drop functionality in them already , but I had trouble properly arranging my buttons (there are many more than four and they are in very specific positions, like a diagram) inside these views, let alone getting drag and drop working with them.
How would I go about doing this? Ideally I could just tag these buttons as draggable, and then on a drag-drop event check for a drop position, then if the position is valid perform a swap method. I just can't seem to figure out how to make them draggable or how to have an event that checks a drop position.
Thanks.
Easy peasy, create a custom control that looks the way you want it to, set ManipulationMode to TranslateX|TranslateY, handle manipulation delta events to update positioning with something like a Canvas or TranslateTransform and when manipulation completes - either make it click or animate to the new position. From my experience - getting any other manipulations to work with a regular Button class just isn't working and since a button is a really simple control - it is easier to create your own than try to extend the existing one in such cases.

SL 4: ScrollViewer - RequestBringIntoView

How can I find the component in a ScrollViewer that handles the RequestBringIntoView event?
It isn't exposed on the two ScrollBar parts (not directly, anyway).
Thanks for any pointers...
UPDATE: Related: Can I get the ScrollContentPresenter part of the ScrollViewer? How?
Thanks --
Bigger picture:
We have a large Canvas contained in a ScrollViewer. At runtime, an arbitrary number of UserControls (I'll call them 'Blobs') are added to the canvas from the db. Their position and content come from the db. A user can 'select' a blob by clicking on it, and its appearance changes to indicate it is selected.
If the user uses a scrollbar to move the selected blob out of view, then clicks on another blob, the Canvas is scrolled so the previously-out-of-view blob is in view again. I assume this is due to some object raising the RequestBringIntoView, and the ScrollViewer is handling it.
Hope this makes sense...
Yet more info:
Added a handler (sb_ValueChanged) to the Scrollviewer's scrollbar ValueChanged event. Here's the stack from the mouse click that precipitates the scrolling:
OurControl.sb_ValueChanged() System.Windows.dll!System.Windows.Controls.Primitives.RangeBase.OnValueChanged() System.Windows.dll!System.Windows.Controls.Primitives.ScrollBar.OnValueChanged() System.Windows.dll!System.Windows.Controls.Primitives.RangeBase.OnValuePropertyChanged()
System.Windows.dll!System.Windows.DependencyObject.RaisePropertyChangeNotifications()
System.Windows.dll!System.Windows.DependencyObject.UpdateEffectiveValue()
System.Windows.dll!System.Windows.DependencyObject.SetValueInternal()
System.Windows.dll!System.Windows.DependencyObject.SetValue()
System.Windows.dll!System.Windows.Controls.ScrollViewer.InvalidateScrollInfo() System.Windows.dll!System.Windows.Controls.ScrollContentPresenter.VerifyScrollData()
System.Windows.dll!System.Windows.Controls.ScrollContentPresenter.ArrangeOverride()
System.Windows.dll!System.Windows.FrameworkElement.ArrangeOverride()
If only I could find out what the FrameworkElement that starts the mischief actually is...
Sorry... it doesn't seems to exist like it does in WPF. Check this link for a handy solution.
Update: Ok... for this you might need to walk the visual tree and some sort of recursive search need to be done. However, assuming you are using the default template for the scrollviewer as seen here, you can directly ask for the ScrollContentPresenter with something like this:
var BorderChild = VisualTreeHelper.GetChild(MyScrollViewer, 0);
var GridChild = VisualTreeHelper.GetChild(BorderChild, 0);
var ScrollContentPresenterChild = VisualTreeHelper.GetChild(GridChild, 0);

can we place a picture in a picture box in differrent place?

i am using vb.net
i just wanna ask if we can place a picture in a picture box in different places...
for example, we place a picture in the center of a picture box then we place another picture on the left side of the picture box. is it possible??
and also can we use one picture box that can contain more pictures or images on it???
to make it clear, it is a drag and drop senario, first you have to drag a picture from a toolbar for example, then you are to drop it on the picutre box, the problem is, we have to drop more than one picture in the picturebox, so is it really possible?
To my knowledge, this is not possible with the standard .NET picturebox control.
You could, however, create a custom control that would encompass this functionality.
I'm thinking it wouldn't be too complicated to do.
But probably the best way to handle it would be to create your picture box controls programmatically.
EDIT: Found something that might be useful for you, on CodeProject. Its a extended picturebox control, that seems to have multiple pictures in it.
Extended Picturebox
You will need to build all this functionality from scratch no matter which control you're using. You can use Picturebox, Button, Panel and so on, and they'll all provide the same fundemental for building the required functionality. I would suggest that you used a panel/canvas though. And as Jon suggested, subclassing a panel to create a custom control would properably be the best idea.
Inside this custom control, you will need to keep track of which images that have been dragged into the control, which images is affected by several mouse actions such as click, hover and release, and you will need to draw the pictures manually.