Make Object Follow Mouse On MouseDown and "Stick" On MouseUp - wpf

I'm working with a project that is WPF and VB.net. I want to visually simulate "dragging" an object (though I do not want to use standard drag and drop for reason of purpose).
Basically, I have a label object that, on its MouseDown event, I want it to follow the mouse cursor inside a 640x480 solid-size grid (but not outside of it!). Mind you, this grid is centered inside a full-screen window. Again, the object should not follow the mouse outside of the grid (I'm guessing a "ClipToBounds = True" here)
Then, on the label's MouseUp event, I want it to either stay in its current position or return to its original position, as determined by the value of a boolean variable set by another object's MouseEnter property.
Note, if it would be easier to work with, I can change the grid to a canvas in a cinch. I'm guessing that would be desirable.
So, after that long-winded explanation, here is my question (two-fold):
How do I make the object (label) follow the mouse cursor inside the grid/canvas, but not outside of it? This needs to happen on the MouseDown event of the label.
How do I make the object "stick" in its current position? (From this, I can probably figure out how to make it return to its original position on my own. :D )
My upvote to whoever can help me accomplish this goal the most efficiently! Thank you all very much.

How about something like this :
XAML :
<Canvas x:Name="canv" ToolTip="tt one" Width="400" Height="400" Background="Blue">
<Rectangle x:Name="rec" Fill="Red" Height="50" Width="50" MouseDown="Rectangle_MouseDown" MouseMove="Rectangle_MouseMove" MouseUp="Rectangle_MouseUp" />
</Canvas>
CODE-BEHIND :
private bool isDragging;
private void Rectangle_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
rec.CaptureMouse();
isDragging = true;
}
private void Rectangle_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (isDragging)
{
Point canvPosToWindow = canv.TransformToAncestor(this).Transform(new Point(0, 0));
Rectangle r = sender as Rectangle;
var upperlimit = canvPosToWindow.Y + (r.Height / 2);
var lowerlimit = canvPosToWindow.Y + canv.ActualHeight - (r.Height / 2);
var leftlimit = canvPosToWindow.X + (r.Width / 2);
var rightlimit = canvPosToWindow.X + canv.ActualWidth - (r.Width / 2);
var absmouseXpos = e.GetPosition(this).X;
var absmouseYpos = e.GetPosition(this).Y;
if ((absmouseXpos > leftlimit && absmouseXpos < rightlimit)
&& (absmouseYpos > upperlimit && absmouseYpos < lowerlimit))
{
Canvas.SetLeft(r, e.GetPosition(canv).X - (r.Width / 2));
Canvas.SetTop(r, e.GetPosition(canv).Y - (r.Height / 2));
}
}
}
private void Rectangle_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
rec.ReleaseMouseCapture();
isDragging = false;
}
This code could be enhanced, but I think you got the idea ;)

Based on #Bruno's, this is my solution:
double maxX;
double maxY;
private void OnRectMouseDown(object sender, MouseButtonEventArgs e)
{
maxX = canv.ActualWidth - rect.Width;
maxY = canv.ActualHeight - rect.Height;
rect.CaptureMouse();
rect.MouseMove += OnRectMouseMove;
rect.MouseUp += OnRectMouseUp;
}
private void OnRectMouseMove(object sender, MouseEventArgs e)
{
var pos = e.GetPosition(canv);
var newX = pos.X - (rect.Width / 2);
var newY = pos.Y - (rect.Height / 2);
if (newX < 0) newX = 0;
if (newX > maxX) newX = maxX;
if (newY < 0) newY = 0;
if (newY > maxY) newY = maxY;
rect.SetValue(Canvas.LeftProperty, newX);
rect.SetValue(Canvas.TopProperty, newY);
xVal.Content = (newX / maxX).ToString("F3");
yVal.Content = (newY / maxY).ToString("F3");
}
private void OnRectMouseUp(object sender, MouseButtonEventArgs e)
{
rect.ReleaseMouseCapture();
rect.MouseMove -= OnRectMouseMove;
rect.MouseUp -= OnRectMouseUp;
}

try this:
private void Form1_MouseClick(object sender, MouseEventArgs e)
{
(name).Location = new Point(e.X,e.Y);
}
so that will make it so if you click the object will appear there

Related

WPF Blur effect causing high CPU even when collapsed

We have to show a legal pop-up in our WPF app. When the pop-up is shown, we use blur effect on the view below.
Recently we recognized that this is causing high GPU usage. Because of the spinner control in the background. The more active content, the more GPU usage.
We collapse this spinner when the pop-up is shown based on a property. But this doesn't help. Only when we set it to collapsed in MainWindow.xaml it works.
We tried multiple things e.g. BitmapCache and other techniques but with no success so far.
Here an example:
https://github.com/rmoergeli/BlurEffectTest.git
I investigated that the problem in demo code hides in your animation: it doesn't stop on changing it visibility from visible to collapsed.
So I found a solution to stop animation on being collapsed with the help of MSDN resource.
public partial class Spinner : UserControl
{
private Canvas _content;
private Storyboard _rotationStoryboard;
public Spinner()
{
// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());
DefineContent();
SizeChanged += Spinner_SizeChanged;
IsVisibleChanged += Spinner_IsVisibleChanged;
Loaded += Spinner_Loaded;
}
private void Spinner_Loaded(object sender, RoutedEventArgs e)
{
_rotationStoryboard.Begin(this, isControllable: true);
}
private void Spinner_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (e.NewValue is bool isVisible && isVisible)
_rotationStoryboard.Resume(this);
else
_rotationStoryboard.Pause(this);
}
private void DefineContent()
{
_content = new Canvas();
//set content render transform origin point to center
_content.RenderTransformOrigin = new Point(0.5 , 0.5);
_content.RenderTransform = new RotateTransform(angle: 0);
// Assign the canvas a name by
// registering it with the page, so that
// it can be targeted by storyboard
// animations.
RegisterName("animatableCanvas", _content);
Content = _content;
DefineAnimatableContent();
// Create an animation and a storyboard to animate the
// canvas.
DoubleAnimation doubleAnimation = new DoubleAnimation
{
To = 360,
Duration = new Duration(TimeSpan.FromSeconds(3)),
RepeatBehavior = RepeatBehavior.Forever
};
Storyboard.SetTargetName(doubleAnimation, "animatableCanvas");
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("RenderTransform.Angle"));
_rotationStoryboard = new Storyboard();
_rotationStoryboard.Children.Add(doubleAnimation);
}
private void DefineAnimatableContent() //renamed Refresh method
{
int n = Balls;
double size = BallSize;
_content.Children.Clear();
double x = ActualWidth / 2;
double y = ActualHeight / 2;
double r = Math.Min(x, y) - size / 2;
double doubleN = Convert.ToDouble(n);
for (int i = 1; i <= n; i++)
{
double doubleI = Convert.ToDouble(i);
double x1 = x + Math.Cos(doubleI / doubleN * 2d * Math.PI) * r - size / 2;
double y1 = y + Math.Sin(doubleI / doubleN * 2d * Math.PI) * r - size / 2;
var e = new Ellipse
{
Fill = BallBrush,
Opacity = doubleI / doubleN,
Height = size,
Width = size
};
Canvas.SetLeft(e, x1);
Canvas.SetTop(e, y1);
_content.Children.Add(e);
};
}
#region Event Handlers
private void Spinner_SizeChanged(object sender, SizeChangedEventArgs e)
{
//we dont need this anymore as we set content render transform origin point to content center
//Transform.CenterX = ActualWidth / 2;
//Transform.CenterY = ActualHeight / 2;
DefineAnimatableContent();
}
#endregion
//other logic
}
This code stops animation on changing Spiner control visibility. But sure you can pause and resume animation with any trigger you need.
N.B! Using this approach you define all the content (not only animarable parts) in code behind so you don't need Spinner.xaml resource anymore.

How can I draw lines in WPF inkCanvas with sequence of PNGs

I was trying to make a method to draw some arrowheads from a PNG image with transparency.
While I moving mouse, the application will be plot that png along the path.
What is the way to make that?
Another form I was wondering is creating a polygnon shape. I was tryed draw the shape (triangle) when enter on mouse down event.
void MainWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
double posX = e.GetPosition(null).X;
double posY = e.GetPosition(null).Y;
double posX1 = posX - (posX / 4);
double posY1 = posY - (posY / 4);
double posX2 = posX + (posX / 4);
double posY2 = posY;
double posX3 = posX - (posX / 4);
double posY3 = posY + (posY - posY / 3);
Polygon p = new Polygon();
p.Stroke = Brushes.Black;
p.Fill = Brushes.LightBlue;
p.StrokeThickness = 1;
p.HorizontalAlignment = HorizontalAlignment.Left;
p.VerticalAlignment = VerticalAlignment.Center;
p.Points = new PointCollection() { new Point(posX1, posY1), new Point(posX2, posY2), new Point(posX3, posY3), new Point(posX1, posY1) };
MyCanvas.Children.Add(p);
}
But still can't click and draw a triangle correctly in mouse (x,y) position.
http://i.stack.imgur.com/bM2i4.png
Here is a quick example.
XAML
<Canvas x:Name='DrawingCanvas'
Margin='30'
Background='LightBlue'
MouseDown='Canvas_MouseDown'
MouseMove='Canvas_MouseMove'
MouseUp='Canvas_MouseUp'>
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource='Arrow.png' x:Name='ArrowBrush'/>
</Rectangle.Fill>
</Rectangle>
</Canvas>
CODE
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
private bool _isDrawing = false;
private Point _lastPosition;
const double MIN_MOVEMENT = 60;
private void Canvas_MouseDown(object sender, MouseButtonEventArgs e) {
_isDrawing = true;
_lastPosition = e.GetPosition(DrawingCanvas);
// add the first arrow
AddArrow(_lastPosition);
}
private void Canvas_MouseMove(object sender, MouseEventArgs e) {
if (!_isDrawing)
{
return;
}
var currentPosition = e.GetPosition(DrawingCanvas);
// draw a new image if mouse has traveled minimum distance
if (Math.Abs((currentPosition.X - _lastPosition.X)) > MIN_MOVEMENT ||
Math.Abs((currentPosition.Y - _lastPosition.Y)) > MIN_MOVEMENT)
{
AddArrow(currentPosition);
_lastPosition = e.GetPosition(DrawingCanvas);
}
}
private void AddArrow(Point currentPosition) {
var rect = new Rectangle();
rect.Width = 120;
rect.Height = 120;
rect.Fill = ArrowBrush;
Canvas.SetTop(rect, currentPosition.Y);
Canvas.SetLeft(rect, currentPosition.X);
DrawingCanvas.Children.Add(rect);
}
private void Canvas_MouseUp(object sender, MouseButtonEventArgs e) {
_isDrawing = true;
}
}
Screenshot

How to use the slider in WPF to Zoom in and out of an image?

I am trying to use slider to control the Zoom in and Zoom out of any image.
I have written a code:
private void image1_MouseMove(object sender, MouseEventArgs e)
{
if (!image1.IsMouseCaptured) return;
var tt = (TranslateTransform)((TransformGroup)
image1.RenderTransform).Children.First(tr => tr is TranslateTransform);
Vector v = start - e.GetPosition(border1);
tt.X = origin.X - v.X;
tt.Y = origin.Y - v.Y;
}
Here it is working fine. using mouse scroll. But I want to use the slider for the same functioning.
But unable to put the same behaviour like mouse scroll using slider.
I am very new to WPF and its control, so any help with details is highly appreciated.
How can i implement the same finctionality of Zoom in - out using the slider?
After a lot of research and coding I found that its a very simple application and very simple coding too, to Zoomin and Zoomout the image using a slider. what you need is to put a slider in the area of your choice. and put the following code.
private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
TransformGroup transformGroup = (TransformGroup)image1.RenderTransform;
ScaleTransform transform = (ScaleTransform)transformGroup.Children[0];
double zoom = e.NewValue;
transform.ScaleX = zoom;
transform.ScaleY = zoom;
}
Now I already have the code so that the image will Zoomin and Zoomin using the mousewheel.
private void image1_MouseWheel(object sender, MouseWheelEventArgs e)
{
TransformGroup transformGroup = (TransformGroup)image1.RenderTransform;
ScaleTransform transform = (ScaleTransform)transformGroup.Children[0];
double zoom = e.Delta > 0 ? .2 : -.2;
transform.ScaleX += zoom;
transform.ScaleY += zoom;
slider1.Value += zoom;
}
Now when you put
slider1.value += zoom;
Then changes in the mousewheel and in the changes in the slider change the zoom of the picture.
Remember the difference of implementation between mouse wheel and slider. In mouse wheel MouseWheelEventsArgs "e" and e.Delte value is positive and negative depends on the mousewheel up or mousewheel down. But in Slider RoutedPropertyChangesEventsArgs value is positive or negative according to the sldier up and down. You don't need to specify here. Just
zoom = e.NewValue;
I hope it will help.
You have to code a ScaleTransform in your code. This is a part of my code that do this, I don't put everything but it's a base for you.
For the slider, you have to bind the Zoom property to the Value of the Slider.
private double m_dCurZoom = 1.0;
private ScaleTransform m_transZoom;
public ScaleTransform TransZoom
{
get { return m_transZoom; }
}
private TranslateTransform m_transPan;
public double Zoom
{
get { return m_dCurZoom; }
set
{
double oldzoom = m_dCurZoom;
if (m_dCurZoom != value)
{
m_dCurZoom = value;
OnPropertyChanged("Zoom");
UpdateZoom(oldzoom);
}
}
}
public void UpdateZoom(double oldzoom)
{
// Are we visible?
if (m_root == null)
return;
// Get parent
FrameworkElement parent = GetRootParent();
if (parent == null)
return;
// Center point of the window
Point ptCenter = new Point(parent.RenderSize.Width / 2, parent.RenderSize.Height / 2);
// Translate into canvas coordinates
ptCenter = m_root.TranslatePoint(ptCenter, m_canvas);
// Update the zoom
m_transZoom.ScaleX = m_dCurZoom;
m_transZoom.ScaleY = m_dCurZoom;
m_transPan.X -= ptCenter.X * m_dCurZoom - ptCenter.X * oldzoom;
m_transPan.Y -= ptCenter.Y * m_dCurZoom - ptCenter.Y * oldzoom;
ResizeElementContents();
OnPropertyChanged("Zoom");
}

Strange act of canvas when Scale/ Zoom in Silverlight

I'm working on Zooming with Silverlight 5,
My Idea is to zoom according to mouse position on the Canvas, and the ability to Drag that Canvas,
The problem I have is when scale is less than 1, about 0.6 or 0.5, point to the corner of the canvas and wheel up, the canvas will change its position or "jump", any help please?
these two photos describe the status before Then after:
I have the following XAML:
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer x:Name="sv" Margin="0,0,0,76" ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="#FFE3E7F1">
<Canvas x:Name="grd" Height="394" Width="630">
<Canvas x:Name="cvs" Background="White" MouseWheel="cvs_MouseWheel" MouseLeftButtonDown="cvs_MouseLeftButtonDown" MouseLeftButtonUp="cvs_MouseLeftButtonUp" MouseMove="cvs_MouseMove" Height="391" Canvas.Left="2" Canvas.Top="1" Width="625">
<Canvas.Effect>
<DropShadowEffect ShadowDepth="0"/>
</Canvas.Effect>
<Rectangle Height="70" Canvas.Left="155" Canvas.Top="58" Width="79" Fill="#FFFFBFBF"/>
<Rectangle Height="70" Canvas.Left="544" Canvas.Top="126" Width="79" Fill="#FF8B92FF"/>
</Canvas>
</Canvas>
</ScrollViewer>
</Grid>
and here's the C#:
public partial class MainPage : UserControl
{
CompositeTransform canvasTransform = new CompositeTransform();
bool canDragCanvas;
double mouseRelatedPositionX = 0;
double mouseRelatedPositionY = 0;
public MainPage()
{
// Required to initialize variables
InitializeComponent();
}
private void cvs_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
{
var scaleFactor = 0.2*(e.Delta < 0?-1:1);
var centerX = e.GetPosition(cvs).X;
var centerY = e.GetPosition(cvs).Y;
if (centerX > cvs.ActualWidth * canvasTransform.ScaleX || centerX < 0 || centerY > cvs.ActualHeight * canvasTransform.ScaleY || centerY < 0)
{
centerX = cvs.ActualWidth/2;
centerY = cvs.ActualHeight/2;
}
canvasTransform.CenterX = centerX;
canvasTransform.CenterY = centerY;
canvasTransform.ScaleX += scaleFactor;
canvasTransform.ScaleY += scaleFactor;
cvs.RenderTransform = canvasTransform;
}
private void cvs_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
canDragCanvas = true;
mouseRelatedPositionX = e.GetPosition(cvs).X;
mouseRelatedPositionY = e.GetPosition(cvs).Y;
}
private void cvs_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
canDragCanvas = false;
}
private void cvs_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if(!canDragCanvas) return;
var leftValueToAdd = e.GetPosition(cvs).X - mouseRelatedPositionX;
var topValueToAdd = e.GetPosition(cvs).Y - mouseRelatedPositionY;
UpdateCanvasPosition(leftValueToAdd*canvasTransform.ScaleX, topValueToAdd*canvasTransform.ScaleX);
}
void UpdateCanvasPosition(double leftValueToAdd,double topValueToAdd)
{
var leftOffset = canvasTransform.CenterX - canvasTransform.CenterX * canvasTransform.ScaleX;
var rightOffset = (cvs.ActualWidth - canvasTransform.CenterX) - (cvs.ActualWidth - canvasTransform.CenterX) * canvasTransform.ScaleX;
var topOffset = canvasTransform.CenterY - canvasTransform.CenterY * canvasTransform.ScaleY;
var bottomOffset = (cvs.ActualHeight - canvasTransform.CenterY) - (cvs.ActualHeight - canvasTransform.CenterY) * canvasTransform.ScaleY;
var canvasLeftInBorders = Canvas.GetLeft(cvs)+ leftValueToAdd + leftOffset > 0;
var canvasRightInBorders = Canvas.GetLeft(cvs) + cvs.ActualWidth * canvasTransform.ScaleX + leftValueToAdd + leftOffset < grd.ActualWidth;
var canvasTopInBorders = Canvas.GetTop(cvs) + topValueToAdd + topOffset > 0;
var canvasBottomInBorders = Canvas.GetTop(cvs) + cvs.ActualHeight * canvasTransform.ScaleY + topValueToAdd + topOffset < grd.ActualHeight;
if (leftValueToAdd > 0)
{
if (canvasLeftInBorders)
leftValueToAdd = 0;
}
else if (leftValueToAdd < 0)
if (canvasRightInBorders)
leftValueToAdd = 0;
if (topValueToAdd > 0)
{
if (canvasTopInBorders)
topValueToAdd = 0;
}
else if (topValueToAdd < 0)
if (canvasBottomInBorders)
topValueToAdd = 0;
Canvas.SetLeft(cvs, Canvas.GetLeft(cvs) + leftValueToAdd);
Canvas.SetTop(cvs,Canvas.GetTop(cvs)+topValueToAdd);
}
}
Basically you are attaching mouse events to the surface that is zooming and the mouse coordinates get altered too. Silverlight is designed to still be interactive when you rotate, zoom and tilt.
You want to put a transparent layer over the top, that is not zoomed, and attached your mouse methods that that layer.
If you leave that layer turned on you will have to calculate collisions, but you can make it so that the layer only appears on mouse down and goes away on mouse up.

How to allow users to draw freeform rectangles in Silverlight 3.0 App

The functionality: Users can draw rectangles on a defined area of the screen, by clicking the left mouse button and dragging to create the desired sized rectangle. A similar example would be re-sizing a rectangle in BLEND. I am also open to options where the rectangle already exists, and users can resize using a drag/resize handle.
Ideas on how this might be accomplished?
Drawing rectangles on to a canvas can be done fairly easily:-
<Canvas x:Name="draw" Background="Transparent" MouseLeftButtonDown="draw_MouseLeftButtonDown" />
then:-
Point origPoint;
Rectangle rect;
void draw_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
rect = new Rectangle();
origPoint = e.GetPosition(draw);
Canvas.SetLeft(rect, origPoint.X);
Canvas.SetTop(rect, origPoint.Y);
rect.Stroke = new SolidColorBrush(Colors.Black);
rect.StrokeThickness = 2;
draw.Children.Add(rect);
draw.MouseMove += draw_MouseMove;
draw.MouseLeftButtonUp += draw_MouseLeftButtonUp;
}
void draw_MouseMove(object sender, MouseEventArgs e)
{
if (rect != null)
{
Point curPoint = e.GetPosition(draw);
if (curPoint.X > origPoint.X)
{
rect.Width = curPoint.X - origPoint.X;
}
else if (curPoint.X < origPoint.X)
{
Canvas.SetLeft(rect, curPoint.X);
rect.Width = origPoint.X - curPoint.X;
}
if (curPoint.Y > origPoint.Y)
{
rect.Height = curPoint.Y - origPoint.Y;
}
else if (curPoint.Y < origPoint.Y)
{
Canvas.SetTop(rect, curPoint.Y);
rect.Height = origPoint.Y - curPoint.Y;
}
}
}
void draw_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (rect != null)
{
draw.MouseMove -= draw_MouseMove;
draw.MouseLeftButtonUp -= draw_MouseLeftButtonUp;
rect = null;
}
}
Whether this can actually full fill your requirements I'm not sure. It would really depend on what you might have underneath the canvas and what you wanted to do with the rectangles once drawn.

Resources