Inside my page, I have a frame that loads another page. I am using this to detect if they want to move the frame around the screen:
private void Frame_MouseMove(object sender, MouseEventArgs e)
{
if (Mouse.LeftButton == MouseButtonState.Pressed)
{
}
}
How do I move the frame itself though? I have been trying to look for it and I cant seem to find the variables that control its position.
Try positioning using the frame's margin:
AppFrame.Margin = new Thickness(Mouse.X, Mouse.Y, 0, 0);
Alternatively, some frames are able to be moved with their Left and Top variables.
frame.Left = Mouse.X; // or whatever
frame.Top = Mouse.Y; // or whatever
In order to move it proportionally to the mouse, record the mouse and frame's original positions when the mouse was first dragged, and referenced them when positioned:
frame.Left = originalFrameX + (Mouse.X - originalMouseX);
frame.Top = originalFrameY + (Mouse.Y - originalMouseY);
Related
Im creating Path objects with curvy edges on a Canvas. I want to be able to rotate them and move them around the canvas. But when i try to apply several transform to and object it only visually displays the last one. I assume its because the transforms are applied to the coordinates of the Path object and are only displayed but not saved afterwards.
So if i would run something like:
my_canvas.Children[0].RenderTransform = new TranslateTransform(0, 100);
my_canvas.Children[0].RenderTransform = new TranslateTransform(0, 150);
it would move my Path 150 pixels down.
Is there a way i can save the transform progress of RenderTransform or do i have to recreate my Path with different parameters/write a method to displace the pixels manually?
Edit
Another example:
my_canvas.Children[0].MouseDown += (object sender, MouseButtonEventArgs e) =>
{
if (e.LeftButton == MouseButtonState.Pressed)
{
MouseDownLocation = e.GetPosition(my_canvas);
}
};
my_canvas.Children[0].MouseMove += (object sender, MouseEventArgs e) =>
{
if (e.LeftButton == MouseButtonState.Pressed)
{
my_canvas.Children[0].RenderTransform = new TranslateTransform(-(MouseDownLocation.X - e.GetPosition(my_canvas).X), -(MouseDownLocation.Y - e.GetPosition(my_canvas).Y));
}
};
This code allows me to move my element and it works fine: i can pick it up, visually move it, and let it go. But only once. If try to do it again it tries to do the transformation based on the elements' previous position. And as I am typing this i realize that i can probably solve this by keeping track of the offsets the transformations are causing.
Just add the next translation to the X and Y values of the existing RenderTransform:
my_canvas.Children[0].RenderTransform = new TranslateTransform(0, 100);
((TranslateTransform)my_canvas.Children[0].RenderTransform).Y += 150;
Or use Canvas.Left and Canvas.Top instead of a TranslateTransform:
UIElement element = my_canvas.Children[0];
Canvas.SetTop(element, 100);
Canvas.SetTop(element, Canvas.GetTop(element) + 150);
I am using a pictureBox to move 2 linear stages; when the mouseDown event triggers, the pictureBox coordinates are remapped to match the maximum travel length of the axis, and then sent to them to perform the movement.
To improve this feature i have added a tiny dot on this image to track the current position of the mouse during the mouseDown event.
the dot must update its positition everytime the mouse moves; in order to do so i have used gfx.Clear(Color.White); to delete the previous and draw the new one.
Problem is that to understand the correct positioning of the axis the pictureBox should show a photo of the axis; but calling the gfx.Clear(Color) clears the image and leaves me with a white background.
is there a way to update the dot position without calling the gfx.Clear (in order to keep the image?)
if (e.Button.Equals(MouseButtons.Left))
{
{
this.gridImage.Refresh();
convertedX = (e.X * 100) / gridImage.Size.Width;
convertedY = (e.Y * 100) / gridImage.Size.Height;
using (Graphics gfx = Graphics.FromImage(this.gridImage.Image))
{
circle_bounds.X = e.X;
circle_bounds.Y = e.Y;
gfx.Clear(Color.White);
gfx.DrawEllipse(Pens.Red, this.circle_bounds);
}
Console.WriteLine("(X,Y): " + convertedX.ToString() + " " + convertedY.ToString());
Thread.Sleep(20);
//moveAbs(port1, "1", convertedX.ToString());
//moveAbs(port2, "1", convertedY.ToString());
initialXText.Text = convertedX.ToString();
initialYText.Text = convertedY.ToString();
}
}
What i would do is using the PictureBox.Paint event to draw the point that must follow the mouse move. First I declare a Pointto store the mouse position any time it moves:
Point mousePosition;
Then, in the PictureBox.MouseMove event handler, I would store this location and invalidate the PictureBox:
private void gridImage_MouseMove(object sender, MouseEventArgs e)
{
mousePosition = e.Location;
pictureBox1.Invalidate();
}
Finally, in the PictureBox.Paint i just draw a circle using the mouse position:
private void gridImage_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawEllipse(Pens.Red, new Rectangle(mousePosition, new Size(5,5)));
}
Hope this leads you in the right direction
I am making a windows form animation where a animation of a character is walking left and then walk right once he reached the end of the windows form.
and i have to put a play/pause button for the animation to stop and continue where he left off
I have 16 frames each of the character walking right and left
I would like to ask how to put a boundary on the picturebox and how to get the picturebox to change to the walking right animation once it reach the left edge of the windows form and change the walking left animation once it reach the right edge of the windows form
public partial class Form1 : Form
{
//Declare a new integer for frame and set it to 1
int frame = 1;
public Form1()
{
InitializeComponent();
timer1.Enabled = true;
}
private void timer1_Tick(object sender, EventArgs e)
{
//Increase the frame per tick
frame++;
//Loop : If the frame exceeds 16, set the frame back to 1
if (frame > 16)
{
frame = 1;
}
//REtrieve the image fromfile base on the value of the ineger "frame"
pictureBox1.Image = Image.FromFile(Application.StartupPath +
"\\left" + frame + ".png");
int x = pictureBox1.Location.X;
int y = pictureBox1.Location.Y;
x -= 5;
//else if (e.KeyCode == Keys.Left) x -= 1;
pictureBox1.Location = new Point(x, y);
}
PictureBox has a border property. Check if it works for you.
You can check if PictureBox Left matches Forms Left that would mean it needs to move right and change the image on this condition.
You will need 2 different images 1 directed to left and 1 directed to right...
create an extra variable stating direction
then you can turn the image direction if the folowing criteria is met
if direction = right and picture.location >= (how far you want it to go probably border)
thendirection = leftchange to the left directed image change your movement variable to negative
if direction = left and picture.location <= 0
then direction = rightchange to the rightdirected image change your movement variable to positive
To detect when the control has reached the boundaries, you may check if the Location.X property + Width is equal to or greater than the PictureBox container (in this case, Form)'s width.
if(pictureBox1.Location.X + pictureBox1.Width >= pictureBox1.parent.Width)
{
direction = "left";//reached the end so go left
Of course you can easily test if we're at the starting position by checking if pictureBox1.Location.X == 0
I created (using c#) a grid with border & the parent layout is another grid. When I try to rezise dynamically, it doesn't give the expected behaviour.
I keep the start position (left-top) of border (with grid) fixed & only the right-bottom point is dragged to resize. In the Mouse move event, the width & height are changed depending on the current position.
1) But it always change the start point (left-top) when changing the width & height ?
2) When border get resized the child (grid) doesn't change its dimensions accordingly ? I cann't find any stretching method. But if border is moved, then the child grid moves with it.
Point offsetParent;
.....
private void MouseMoveEvent(object sender, MouseEventArgs e)
{
if (bIsMouseDown)
{
ResizeControl(e);
offsetParent = e.GetPosition(parentGrid); //reset offset to current
}
}
private void ResizeControl(MouseEventArgs e)
{
// get current point
Point CurPosParent = e.GetPosition(parentGrid);
// current & new position difference
Point diff = new Point(CurPosParent.X - offsetParent.X, CurPosParent.Y - offsetParent.Y);
// keep start point (left-top position) of border fixed
// adjust only width & height of border
border1.Width += diff.X; //changes start point (left-top position) ????
border1.Height += diff.Y;
}
Found out my mistake from this link Object Positioning and Layout
Now I use a Canvas as the parent. Width & height of border & grid can be changed without changing the start point.
Point offsetParent;
.....
private void MouseMoveEvent(object sender, MouseEventArgs e)
{
if (bIsMouseDown)
{
ResizeControl(e);
offsetParent = e.GetPosition(parentCanvas); //reset offset to current
}
}
private void ResizeControl(MouseEventArgs e)
{
// get current point
Point CurPosParent = e.GetPosition(parentCanvas);
// current & new position difference
Point diff = new Point(CurPosParent.X - offsetParent.X, CurPosParent.Y - offsetParent.Y);
// keep start point (left-top position) of border fixed
// adjust only width & height of border
border1.Width += diff.X;
border1.Height += diff.Y;
grid1.Width += diff.X;
grid1.Height += diff.Y;
}
I have to create a graphic interface for a c# winform project. There is a background image and a set of small transparent pictures. The user must be able to put those little images over the backgroud, select them and move them freely (I have also to calculate distance between them but this is another step!).
I know I can do somthing like this:
Flicker free drawing using GDI+ and C#
I also found this:
http://cs-sdl.sourceforge.net/
My question is: is there a better or simplest solution to achieve this?
update
Now images are rectangular. There are no problems if images overlaps!
If small images are a problem I can switch with simple circles (DrawEllipse). The important point is that user can always click on and move them.
I have searched for a solution on how to remove flickering from pictureboxs, without finding something satisfying ... i ended up using some 2DVector from the XNA framework and spirits. it worked fine :)
http://www.xnadevelopment.com/ gives a good explanation for how to use it, it is explained in a game context.
The Windows Presentation Fo
Foundation (WPF) may be a better solution for this. It is more graphically inclined than GDI+, and is also much faster, as its powered by DirectX.
If you don't want flickr your best option is DirectX/XNA/OpenGL. Try to find a 2d framework with sprites for your application.
If you would use WPF then you should use a Canvas as your container control. To the images you have to add these event handlers in you code behind file:
private bool IsDragging = false;
private System.Windows.Point LastPosition;
private void MyImage_MouseDown(object sender, MouseButtonEventArgs e)
{
// Get the right MyImage
Image MyImage = sender as Image;
// Capture the mouse
if (!MyImage.IsMouseCaptured)
{
MyImage.CaptureMouse();
}
// Turn the drag mode on
IsDragging = true;
// Set the current mouse position to the last position before the mouse was moved
LastPosition = e.GetPosition(SelectionCanvas);
// Set this event to handled
e.Handled = true;
}
private void MyImage_MouseUp(object sender, MouseButtonEventArgs e)
{
// Get the right MyImage
Image MyImage = sender as Image;
// Release the mouse
if (MyImage.IsMouseCaptured)
{
MyImage.ReleaseMouseCapture();
}
// Turn the drag mode off
IsDragging = false;
// Set this event to handled
e.Handled = true;
}
private void MyImage_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
// Get the right MyImage
Image MyImage = sender as Image;
// Move the MyImage only when the drag move mode is on
if (IsDragging)
{
// Calculate the offset of the mouse movement
double xOffset = LastPosition.X - e.GetPosition(SelectionCanvas).X;
double yOffset = LastPosition.Y - e.GetPosition(SelectionCanvas).Y;
// Move the MyImage
Canvas.SetLeft(MyImage, (Canvas.GetLeft(MyImage) - xOffset >= 0.0) && (Canvas.GetLeft(MyImage) + MyImage.Width - xOffset <= SelectionCanvas.ActualWidth) ? Canvas.GetLeft(MyImage) - xOffset : Canvas.GetLeft(MyImage));
Canvas.SetTop(MyImage, (Canvas.GetTop(MyImage) - yOffset >= 0.0) && (Canvas.GetTop(MyImage) + MyImage.Height - yOffset <= SelectionCanvas.ActualHeight) ? Canvas.GetTop(MyImage) - yOffset : Canvas.GetTop(MyImage));
// Set the current mouse position as the last position for next mouse movement
LastPosition = e.GetPosition(SelectionCanvas);
}
}
I hope that helps, David.