I am writing a silverlight application, where there is a requirement, that I need to draw rectangle over image and move it along with the mouse move. I can move the rectangle by holding left mouse click, but now I need to move without clicking or holding the mouse left click.
I have seen many examples but they all implements the moving shapes and rectangle on left mouse click, which definitely is not my requirement.
I tried many ways but couldn't get it right. Below is the code what I do currently. Any suggestions would be welcomed.
XAML
<Canvas x:Name="draw" Grid.Column="0" Background="Transparent"
Margin="0,0,0,150" Grid.RowSpan="2">
<Rectangle x:Name="SquareBlue" Width="100" Height="100" Canvas.Top="155" Canvas.Left="268" Fill="Transparent" Stroke="Black" StrokeThickness="2" />
</Canvas>
<Image x:Name="myImage" Height="100"/>
<TextBox x:Name="X" Margin="0,0,110,0"></TextBox>
<TextBox x:Name="Y" Margin="0,0,110,0"/>
<Image x:Name="pictureBox1" Height="100"/>
Code Behind
Boolean isMouseCaptured;
Double mouseX;
Double mouseY;
Int32 zIndex = 0;
private void Shape_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Shape s = sender as Shape;
isMouseCaptured = false;
s.ReleaseMouseCapture();
mouseY = -1;
mouseX = -1;
}
private void Shape_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Shape s = sender as Shape;
mouseY = e.GetPosition(null).Y;
mouseX = e.GetPosition(null).X;
isMouseCaptured = true;
s.CaptureMouse();
s.SetValue(Canvas.ZIndexProperty, zIndex);
zIndex++;
}
private void Shape_MouseMove(object sender, MouseEventArgs e)
{
if (isMouseCaptured)
{
Shape s = sender as Shape;
double deltaY = e.GetPosition(null).Y - mouseY;
double deltaX = e.GetPosition(null).X - mouseX;
double newTop = deltaY + (double)s.GetValue(Canvas.TopProperty);
double newLeft = deltaX + (double)s.GetValue(Canvas.LeftProperty);
s.SetValue(Canvas.TopProperty, newTop);
s.SetValue(Canvas.LeftProperty, newLeft);
mouseY = e.GetPosition(null).Y;
mouseX = e.GetPosition(null).X;
X.Text = mouseX.ToString();
Y.Text = mouseY.ToString();
}
You probably want to consider the shape captured whenever the Shape_MouseMove is fired.
And then, every mouse move on the canvas/window moves the shape to be centerd around the mouse cursor.
You then have to decide when to release it maybe:
by detecting when the mouse leaves the canvas/window.
using the buttons for releasing explicitly.
checking the time between mouseMove events. if 1 second passed, then be in a logical state where the shape is not and cannot be captured in mouseMove. only when mouse is out of the shape, return to normal state. so user will lose the move and has to cursor out and in again to capture again.
additionaly, when entering the state described in 3, launch a timer and then if after a second the cursor is on the shape, re-capture.
Related
Many Windows applications support two fingered touchpad gestures. You can scroll by moving two fingers horizontally or vertically, and you can zoom by changing the distance between the fingers.
I'm trying replicate this behaviour in a WinUI 3 canvas.
According to the Microsoft documentation "The touchpad does not raise manipulation events. Instead, pointer events will be raised for touchpad input."
Listening for the PointerWheelChanged event handler, I'm able to detect two finger scrolls with the following code
private void OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
var pointer = e.GetCurrentPoint(myCanvas);
var isHorizontalScroll = pointer.Properties.IsHorizontalMouseWheel;
var scrollDelta = pointer.Properties.MouseWheelDelta;
// Perform the scrolling
e.Handled = true;
}
But, I'm unable to get the fingers position so I can calculate the zoom delta. Is there some lower API I can use that will give me access to the individual fingers? Or some other way to capture the zoom gesture?
I have created a little sample for you, which handles zoom using the trackpad:
MainWindow.xaml:
<Canvas x:Name="myCanvas" PointerWheelChanged="Canvas_PointerWheelChanged" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
<Rectangle Width="40" Height="40" Fill="Red" Canvas.Left="0" Canvas.Top="0" Canvas.ZIndex="0" />
</Canvas>
MainWindow.xaml.cs:
private void Canvas_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
var ctrl = Microsoft.UI.Input.InputKeyboardSource.GetKeyStateForCurrentThread(Windows.System.VirtualKey.Control
if (ctrl.HasFlag(Windows.UI.Core.CoreVirtualKeyStates.Down))
{
var delta = e.GetCurrentPoint(myCanvas).Properties.MouseWheelDelta;
//Here you can handle your zooming
//My sample just resizes the rectangle
foreach (UIElement children in myCanvas.Children)
{
if (children is Rectangle rect)
{
double newSize = rect.Height + delta;
if (newSize < 0)
newSize = 0;
rect.Height = rect.Width = newSize;
}
}
}
}
The trick is, to check for the control-key press in the PointerWheelChanged-event, because the touchpad behaves the same like when you zoom using control + Mousewheel
I'd like to create a control in my WPF app that allows the user to drag a dot inside a box/circle. This will be used to drive the pan and tilt values for a camera.
I am not sure how to create a control like that. The picture below is an example of the type of control that I want to develop.
Here's a very quick solution to get you started.
For the XAML, I've used an Ellipse control for the "dot". The Ellipse is placed inside a Canvas control (which allows the dot to be moved around):-
<Grid Background="White"
MouseUp="ParentOnMouseUp">
<Canvas x:Name="canvas"
Background="Green"
Width="200"
Height="200"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MouseMove="CanvasOnMouseMove">
<!-- Implement your blue circle b/g as an Image control here ... />
<Ellipse x:Name="dot"
Width="20"
Height="20"
Fill="Blue"
Loaded="DotOnLoaded"
MouseDown="DotOnMouseDown"/>
</Canvas>
</Grid>
First I handle the Ellipse's MouseDown event:
private void DotOnMouseDown(object sender, MouseButtonEventArgs e)
{
_isDraggingDot = true;
}
All I do here is set a flag to indicate that I'm starting to drag the dot.
Next, I handle the Canvas MouseMove event, which is where I move the dot around. It includes logic to ensure the dot doesn't stray outside the canvas:
private void CanvasOnMouseMove(object sender, MouseEventArgs e)
{
if (_isDraggingDot)
{
var mousePos = e.GetPosition(canvas);
var x = mousePos.X;
if (x < 0)
{
x = 0;
}
if (x > canvas.Width)
{
x = canvas.Width;
}
var y = mousePos.Y;
if (y < 0)
{
y = 0;
}
if (y > canvas.Height)
{
y = canvas.Height;
}
dot.SetValue(Canvas.LeftProperty, x - (dot.Width / 2.0)); // offset ensures dot is centred on mouse pointer
dot.SetValue(Canvas.TopProperty, y - (dot.Height / 2.0));
}
}
This is also where you would calculate the dot's vertical and horizontal offset from centre, and use these values to update the pan and tilt.
Finally, I implement the MouseUp event on the outer control (the Grid in my example):
private void ParentOnMouseUp(object sender, MouseButtonEventArgs e)
{
_isDraggingDot = false;
CentreDot();
}
private void CentreDot()
{
dot.SetValue(Canvas.LeftProperty, (canvas.Width / 2.0) - (dot.Width / 2.0));
dot.SetValue(Canvas.TopProperty, (canvas.Height / 2.0) - (dot.Height / 2.0));
}
The reason for handling the event on the outer control is to ensure that the dot is returned to the centre if the user releases the mouse button outside the Canvas.
(Note that I also set a b/g colour on the Grid, otherwise it defaults to transparent and won't detect mouse events!)
Lastly I wire up the Ellipse's Loaded event to initially centre the dot when the UI loads:
private void DotOnLoaded(object sender, RoutedEventArgs e)
{
CentreDot();
}
As I mentioned, this is just a quick solution where the dot simply follows the mouse. One If you don't like this, you could calculate how far the mouse is (vertically and horizontally) from the canvas centre, then use a small percentage of these values to position the dot away from the centre, effectively requiring more mouse movement to move the dot, which might feel more "natural".
Another idea may be to "snap" the dot's position to the nearest of the four arrow buttons (N,S,E,W), or even include the points in between (NE,SE,SW,NW).
I am trying to implement a zoom-functionality for a canvas using the mouse wheel.
Currently I am just Zooming to the center position of the canvas using CenterX="0.5" and CenterY="0.5".
I would like to change the behavior so that the zooming happens at the mouse position and I would like to know if this is possible with a ScaleTransform.
Currently I use the following code:
<Canvas Width="500" Height="500">
<Canvas.LayoutTransform>
<ScaleTransform CenterX="0.5" CenterY="0.5"
ScaleX="{Binding Zoom}"
ScaleY="{Binding Zoom}" />
</Canvas.LayoutTransform>
</Canvas>
A very basic approach to zoom a Canvas (or any other UIElement) at a specific position would be to use a MatrixTransform for the RenderTransform property
<Canvas Width="500" Height="500" MouseWheel="Canvas_MouseWheel">
<Canvas.RenderTransform>
<MatrixTransform/>
</Canvas.RenderTransform>
</Canvas>
and update the Matrix property of the transform like in this MouseWheel handler:
private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
{
var element = (UIElement)sender;
var position = e.GetPosition(element);
var transform = (MatrixTransform)element.RenderTransform;
var matrix = transform.Matrix;
var scale = e.Delta >= 0 ? 1.1 : (1.0 / 1.1); // choose appropriate scaling factor
matrix.ScaleAtPrepend(scale, scale, position.X, position.Y);
transform.Matrix = matrix;
}
I spent the past two days agonizing over this issue and I figured it out. This will get you smooth zooming in toward the mouse and smooth zooming out. I'm posting my solution here for anyone who might search and stumble back here.
// Class constructor
public YourClass(Canvas theCanvas) //You may not need the Canvas as an argument depending on your scope
{
panTransform = new TranslateTransform();
zoomTransform = new ScaleTransform();
bothTransforms = new TransformGroup();
bothTransforms.Children.Add(panTransform);
bothTransforms.Children.Add(zoomTransform);
theCanvas.RenderTransform = bothTransforms;
//Handler
theCanvas.MouseWheel += wheelEvent;
//You also need your own handlers for panning, which I'm not showing here.
}
private void returnCalculatedScale()
{
double d;
//Do some math to get a new scale. I keep track of an integer, and run it through the formula y^(x/3) where X is the integer.
return d;
}
// Mouse wheel handler, where the magic happens
private void wheelEvent(object sender, MouseWheelEventArgs e)
{
Point position = e.GetPosition(mainCanvas);
zoomTransform.CenterX = position.X;
zoomTransform.CenterY = position.Y;
zoomTransform.ScaleX = returnCalculatedScale();
zoomTransform.ScaleY = returnCalculatedScale();
Point cursorpos = Mouse.GetPosition(mainCanvas); //This was the secret, as the mouse position gets out of whack when the transform occurs, but Mouse.GetPosition lets us get the point accurate to the transformed canvas.
double discrepancyX = cursorpos.X - position.X;
double discrepancyY = cursorpos.Y - position.Y;
//If your canvas is already panned an arbitrary amount, this aggregates the discrepancy to the TranslateTransform.
panTransform.X += discrepancyX;
panTransform.Y += discrepancyY;
I'm using the following WPF
<Button Style="{DynamicResource NoChromeButton}" x:Name="cmdImage" Grid.Row="1" Margin="10" MouseDoubleClick="cmdImage_MouseDoubleClick" MouseDown="imgMain_MouseDown_1" MouseMove="imgMain_MouseMove_1" MouseUp="imgMain_MouseUp_1">
<Grid x:Name="ImageGrid">
<Image x:Name="imgMain" Panel.ZIndex="0" />
<Button x:Name="rectBounds" Template="{StaticResource DesignerItemTemplate}" Visibility="Hidden" IsVisibleChanged="Button_IsVisibleChanged" Panel.ZIndex="1" />
</Grid>
</Button>
The weird part is that the MouseUp, MouseDown, and MouseMove events of the outermost button don't even trigger iff the ImageSource of the Image isn't null (an image is loaded).
I tried moving them to the Image control. They do trigger, but behave unexpectedly.
private void imgMain_MouseDown_1(object sender, MouseButtonEventArgs e)
{
startPoint = e.GetPosition(ImageGrid);
rect = new Rectangle
{
Margin =
new Thickness(e.GetPosition(ImageGrid).X, e.GetPosition(ImageGrid).Y,
ImageGrid.ActualWidth - e.GetPosition(ImageGrid).X,
ImageGrid.ActualHeight - e.GetPosition(ImageGrid).Y),
Stroke = Brushes.Black,
StrokeThickness = 1.0
};
ImageGrid.Children.Add(rect);
Panel.SetZIndex(rect, 2);
}
private void imgMain_MouseMove_1(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Released || rect == null)
return;
Point pos = e.GetPosition(ImageGrid);
double x = Math.Min(pos.X, startPoint.X);
double y = Math.Min(pos.Y, startPoint.Y);
double w = Math.Max(pos.X, startPoint.X) - x;
double h = Math.Max(pos.Y, startPoint.Y) - y;
rect.Margin = new Thickness(x, y, ImageGrid.ActualWidth - x - w, ImageGrid.ActualHeight - y - h);
}
private void imgMain_MouseUp_1(object sender, MouseButtonEventArgs e)
{
rect = null;
}
By all apparent rules, a draggable rectangle should appear, and disappear once you let go of the mouse button. It doesn't. What's funny is that when I change the visibility of rectBounds, a rectangle does appear.
There are a few things to fix here.
First, your XAML. A button inside another button? I can't imagine how that should feel. Then the ZIndex. It's redundant since Image and Button are in the same Grid cell and the Image is declared before the Button. And it's also not necessary to set in on the newly created Rectangle in imgMain_MouseDown_1.
The weird part is that the MouseUp, MouseDown, and MouseMove events of
the outermost button don't even trigger if the ImageSource of the
Image isn't null.
This is exactly what you would expect, because a mouse event is only generated on those areas of a control that are actually drawn, in other words where hit testing succeeds. When there is no actual content (no image in your example), hit testing fails. You might simply assign a transparent background to the Grid to ensure that hit testing always succeeds:
<Grid x:Name="ImageGrid" Background="Transparent">
<Image x:Name="imgMain" />
<Button x:Name="rectBounds" Template="{StaticResource DesignerItemTemplate}" Visibility="Hidden" IsVisibleChanged="Button_IsVisibleChanged" />
</Grid>
By all apparent rules, a draggable rectangle should appear, and
disappear once you let go of the mouse button.
No it shouldn't, unless you actually remove that Rectangle from the Grid. Setting rect = null doesn't do that.
private void imgMain_MouseUp_1(object sender, MouseButtonEventArgs e)
{
ImageGrid.Children.Remove(rect);
rect = null;
}
I am trying to make an image rotate to follow the mouse position just like the ship from asteroids but to be controled with the mouse position instead of the arrow keys... help would be apreciated!
First you need to know the position of your image. You can then find the cursor position by the MouseMove event. This event invokes every time your mouse moves. You can use the GetPosition method to find a Point to obtain your X and Y coordinates.
private void Window_MouseMove(object sender, MouseEventArgs e)
{
Point point = e.GetPosition(null);
}
Now that you've obtained the X and Y coordinate you can use Pythagorean Theorem to find the distance between your image and where your cursor is. Now to find the angle you can AngleOfImage = sin^-1(Y/total distance between your image and cursor) to find the angle.
If you want the image to move after it has already rendered you need to use the RenderTransform property. Since you need the image to rotate you can make use of the RotateTransform class to accomplish this. Since you have calculated the angle and set it equal to a property, AngleOfImage, you can bind that property to the Angle dependency property of RotateTransform So your xaml would look something like this.
<Image>
<Image.RenderTransform>
<RotateTransform Angle="{Binding AngleOfImage}"/>
</Image.RenderTransform>
</Image>
Actual working code for MouseMove event to calculate the angle
private void Window_MouseMove(object sender, MouseEventArgs e)
{
var somePoint = e.GetPosition(mainWindow);
X = somePoint.X;
Y = somePoint.Y;
var newX = Abs(X - RectangleOriginX);
var newY = Abs(Y - RectangleOriginY);
var powX = Pow(newX, 2);
var powY = Pow(newY, 2);
var distance = Sqrt(powX + powY);
var result = newX / distance;
Angle = Asin(result).ToDegrees();
}
Where ToDegrees() is just an extension method to convert the value to degrees. RectangleOriginX and RectangleOriginY are the points of my control I am moving which I got from this
private void mainWindow_Loaded(object sender, RoutedEventArgs e)
{
var origialPoint = rect.TransformToAncestor(mainWindow).Transform(new Point(0, 0));
RectangleOriginX = origialPoint.X;
RectangleOriginY = origialPoint.Y;
}
Also my working xaml
<Rectangle x:Name="rect" Width="100" Height="100" RenderTransformOrigin="0.5,0.5" Fill="Red">
<Rectangle.RenderTransform>
<RotateTransform Angle="{Binding Angle}"/>
</Rectangle.RenderTransform>
</Rectangle>
Sorry for my bad english
Try to use System.Windows.Forms.Timer, and in the Timer_tick event call some Move(MouseEventArgs e).
Something like this
private void Move(MouseEventArgs e)
{
if(mainwindow has focus)
{
your_image.Position = NextPosition(e);
}
}
instance of MouseEventArgs is field of your class, which changes in MouseMove event.
In NextPosition you can use any pathfind algorithm
If I can understand you right
you can make it by some maths
Get the center point first
Get the mouse position
Use Math.ASin() to get the angle
It will be like that Math.ASin(x / d);
x will be mouse location - image center location
d will be the distance between the center of the image and mouse location you can get it by Pythagorean theorem
then use a timer to make that happen.
I hope that my answer will help you.