We Keep Coding

How can I make images drag and drop-able to reorder them?

I'm building an application in which I'd like a user to be able to reorder pictures in a form in two columns. I've got a flowLayoutPanel of a set width, and pictures are added via the OpenFileDialog and scaled to half the width (minus an allowance for a scroll bar) of the flow layout panel.
This is where I'm stuck - I've tried adding the images as Labels, Buttons, and now PictureBoxes and I can't work out how to actually move them around. I gave up on labels because CanSelect is false - although I didn't know if that would have made a difference - and I moved on from buttons because I realised picture boxes existed. I'm open to switching out which controls I use but the images will always need to be in two columns.
Here's the code I currently have for the DragEnter and DragDrop events:
private void flowLayoutPanel_6_Cards_DragEnter(object sender, DragEventArgs e)
{
e.Effect = DragDropEffects.All;
}
private void flowLayoutPanel_6_Cards_DragDrop(object sender, DragEventArgs e)
{
MessageBox.Show("dropped");
}
How can I implement this? What controls should I use and what properties should I be looking at to make this possible?

So thanks to #TaW's comment I now know that you have to add a DoDragDrop call to the MouseDown event on whatever you're dragging. My now-working code is below (thanks mostly to this tutorial):
private void flowLayoutPanel_6_Cards_DragDrop(object sender, DragEventArgs e)
{
PictureBox picture = (PictureBox)e.Data.GetData(typeof(PictureBox));
FlowLayoutPanel _source = (FlowLayoutPanel)picture.Parent;
FlowLayoutPanel _destination = (FlowLayoutPanel)sender;
if (_source != _destination)
{
//where did you even get this from?
}
else
{
Point p = _destination.PointToClient(new Point(e.X, e.Y));
var item = _destination.GetChildAtPoint(p);
int index = _destination.Controls.GetChildIndex(item, false);
_destination.Controls.SetChildIndex(picture, index);
_destination.Invalidate();
}
}
private void flowLayoutPanel_6_Cards_DragEnter(object sender, DragEventArgs e)
{
e.Effect = DragDropEffects.All;
}
void p_MouseDown(object sender, MouseEventArgs e)
{
PictureBox p = (PictureBox)sender;
p.DoDragDrop(p, DragDropEffects.All);
}

Click and hold on textblock while dragging mouse to make value bigger/smaller

I want the same thing as in this Question:
Click and hold on button while dragging mouse to make value bigger/smaller
The only answer there was the Slider but that was not what the Question asker meant. And nor what i meant.
I know something like this is possible in iOs, but i want to use it in a windows app, but i cant seem to figure out how to do it.
I tried doing it with pointerpressed, pointerrelease and pointermoved. And it worked in a way but i stops working when you get out of the range from the textblock so it does only work when you drag on the textblock itself, and i want to do it so that you can drag over the whole screen if necessary.
this is what i have so far:
private void TextBlock_PointerPressed(object sender, PointerRoutedEventArgs e)
{
ystart = e.GetCurrentPoint(this).Position.Y;
clicked = true;
}
private void TextBlock_PointerReleased(object sender, PointerRoutedEventArgs e)
{
clicked = false;
}
private void TextBlock_PointerMoved(object sender, PointerRoutedEventArgs e)
{
if(clicked == true)
{
yend = e.GetCurrentPoint(this).Position.Y;
double difference;
int textgetal = Convert.ToInt32(Block.Text);
difference = ystart - yend;
textgetal = textgetal + (Convert.ToInt32(difference) / 10);
Block.Text = Convert.ToString(textgetal);
}
}
and like i said this works, but only inside the range of the textblock and not the whole screen like i want it.

Bing maps animation translation

I'm using bing maps with WinRT. I want to create a translation when pushpin_click event is fired, so that it translates the current tapped pushpin in the center of my map:
private void Pushpin_Click(object sender, TappedRoutedEventArgs e)
{
var TappedPin = (Pushpin)sender;
Location currentPinLocation = GetPushpinLocation(TappedPin);
Map.Center = currentPinLocation; //How can I make a translation animation?
}
Is there a way to realize that programmatically in c#?

You are very close. You just need to get the position of the pushpin using the MapLayer class and set the view of the map like this:
private void Pushpin_Click(object sender, TappedRoutedEventArgs e)
{
var TappedPin = sender as Pushpin;
Location currentPinLocation = MapLayer.GetPosition(TappedPin);
Map.SetView(currentPinLocation);
}

Moveable Custom Control

I have a custom control and I want the user to be able to drag it. So I put in the following code in the custom control:
void MoveableStackPanel_MouseMove(object sender, MouseEventArgs e)
{
if (IsMoving)
{
Point newLoc = e.GetPosition(null);
MainWindow.Instance.Title = newLoc.ToString(); // Debug
Margin = new Thickness(newLoc.X - 48, newLoc.Y - 48, 0, 0);
}
}
Note the "-48" in the code.
When the mouse is moved up or left then the mouse is not in the controls area anymore and thus does no longer trigger the MouseMove event. So I added the -48 twice to work around that. But when the user moves the mouse faster than the framework can update then the mouse will get outside the controls area and the control also won't move anymore.
I was thinking about assigning an IMovableInterface and keep lists of controls that are moving in the main form and such but that is all such a hassle and such... What is the proper solution?
P.S.: the controls are generated dynamically so I need the solution in C# code and not in XML.

Try using the CaptureMouse Method.
See if something like this works for you.:
void moveableStackPanel1_MouseUp(object sender, MouseButtonEventArgs e)
{
ReleaseMouseCapture();
}
void moveableStackPanel1_MouseDown(object sender, MouseButtonEventArgs e)
{
if (IsEnabled && IsVisible)
CaptureMouse();
}
void moveableStackPanel1_MouseMove(object sender, MouseEventArgs e)
{
if (IsMouseCaptured)
{
Point newLoc = e.GetPosition(null);
Margin = new Thickness(newLoc.X, newLoc.Y, 0, 0);
}
}

How do I associate a button with a control?

OR - How To Shave A Koala To Stop It Looking Squashed. (But I didn't think that would make a suitably techy title)
The Problem: You have three preview images derived from a main image. The preview images are resized for standardised picture spaces on a company website, the main image can be any size image from anywhere.
Example: The main image is a hi-res image of a koala bear measuring 2000x2250. Your previews want to render the koala at 200x200, 200x50 and 250x150.
Your utility program resizes and stretches the original image to the size of your three "actual size" previews but obviously each preview looks a bit squashy and you know everyone hates to see a squashed koala.
To resolve this you add a little cropping method to your program which shaves five pixels from the preview on the desired side. This means you should be able to resize your image and unsquash your koala by shaving off the unnecessary parts of the image.
You add four buttons to each preview image picture box and create four generic methods for sending the correct shaving instructions to the crop method. You want to associate each specific button with a specific picturebox on the form, but you want to send all the click events to four generic functions.
How do you tell the generic function which of the three preview picturebox images you want it to shave in an elegant and wonderful way?
Example Code:
//cropPict=method for cropping the picture in the relevant picturebox.
//CropSide=a little enum which tells the method which side to crop.
private void btnT_Click(object sender, EventArgs e)
{
cropPict(/*Reference to PictureBox Goes Here*/, CropSide.Top);
}
private void btnB_Click(object sender, EventArgs e)
{
cropPict(/*Reference to PictureBox Goes Here*/, CropSide.Bottom);
}
private void btnR_Click(object sender, EventArgs e)
{
cropPict(/*Reference to PictureBox Goes Here*/, CropSide.Right);
}
private void btnL_Click(object sender, EventArgs e)
{
cropPict(/*Reference to PictureBox Goes Here*/, CropSide.Left);
}
EDIT: As it happens, inspired by Hans below, rather than just stuffing the PictureBox into the tag. Which was a great idea I actually put a KeyValuePair into the tag for each button like so:
btnCCB.Tag = new KeyValuePair<CropSide,PictureBox>(CropSide.Bottom,pbxKoala);
btnCCL.Tag = new KeyValuePair<CropSide, PictureBox>(CropSide.Left, pbxKoala);
btnCCR.Tag = new KeyValuePair<CropSide, PictureBox>(CropSide.Right, pbxKoala);
btnCCT.Tag = new KeyValuePair<CropSide, PictureBox>(CropSide.Top, pbxKoala);
Then I could just wire all the buttons up to a single event handler like so:
private void btnC_Click(object sender, EventArgs e)
{
Button btnSend = (Button)sender;
KeyValuePair<CropSide, PictureBox> kvCrop = (KeyValuePair<CropSide, PictureBox>)btnSend.Tag;
cropPict(kvCrop.Value,kvCrop.Key);
}
Of course, there's still plenty more to do but that pretty much sorted out my problem. Thanks Hans!

Use the Button.Tag property to store a reference to its associated PictureBox. Cast sender to Button:
public Form1()
{
InitializeComponent();
button1.Tag = pictureBox1;
button1.Click += btnT_Click;
// etc..
}
private void btnT_Click(object sender, EventArgs e)
{
var btn = (Button)sender;
cropPict((PictureBox)btn.Tag, CropSide.Top);
}