Why does not the MouseLeftButtonUp on my Canvas fire in my WPF app?
Here is the XAML:
<Grid Height="300" Width="400">
<Canvas Name="canvas" MouseMove="canvas_MouseMove" MouseLeftButtonUp="canvas_MouseLeftButtonUp" Background="LightGray"/>
</Grid>
And the code:
private bool hasClicked = false;
public Window1()
{
InitializeComponent();
}
private void canvas_MouseMove(object sender, MouseEventArgs e)
{
if (!this.hasClicked)
{
this.Cursor = Cursors.None;
this.canvas.Children.Clear();
this.insertRectangle(false);
}
}
private void insertRectangle(bool filled)
{
Rectangle rect = createRect(filled);
Point pos = Mouse.GetPosition(this.canvas);
Canvas.SetLeft(rect, pos.X);
Canvas.SetTop(rect, pos.Y);
this.canvas.Children.Add(rect);
}
private Rectangle createRect(bool fill)
{
Rectangle rect = new Rectangle();
rect.Height = 50;
rect.Width = 120;
if (fill)
{
rect.Fill = new SolidColorBrush(Colors.Green);
}
else
{
rect.Stroke = new SolidColorBrush(Colors.Green);
}
return rect;
}
private void canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
this.hasClicked = true;
this.insertRectangle(true);
this.Cursor = Cursors.Arrow;
}
Edit: I have tried adding a background colour to the canvas, but still the event is not fired. It seems like the MouseMove somehow overrides the MouseLeftButtonUp.
Edit2: If I remove the MouseMove event, mouseLeftButtonUp will fire.
Edit3: Bigger code example.
In the insertRectangle method, if I use
Canvas.SetTop(rect, 50);
instead of
Canvas.SetTop(rect, pos.Y);
the events fires just fine.
If you don't set a Background on the canvas, it doesn't seem to pay attention to your mouse events.
Try:
<Grid>
<Canvas Name="canvas"
MouseMove="canvas_MouseMove"
MouseLeftButtonUp="canvas_MouseLeftButtonUp"
Background="White" />
</Grid>
By not clearing the canvas, but instead moving the preview rectangle in the mouseMove method solved the problem.
Related
i write a little application in C# with wpf. My goal is to draw a circle in a picture. As long as the mouse button is pressed, the circle should be movable and only after the user has released the mouse button the circle should be finally drawn. For drawing the ellipse i use DrawEllipse.
grf.DrawEllipse(
myPen,
(float)xOriginal - 25,
(float)yOriginal - 25,
radius,
radius
);
After the mouse is released, the circle should be drawn. Then I would like to pick up the coordinates and save.
My idea is to use MouseDown, MouseMove and MouseUp. MouseDown registers the click. With MouseMove, the circles should be redrawn each time and with MouseUp, the circle should be finally drawn.
My problem is that with MouseMove the circle is drawn again and again and not deleted. In addition, it is incredibly delayed. Is there a better solution
Here is my quick and dirty code snippet:
bool registerClick = false;
private void Image_imageBox_MouseregisterClick(object sender, MouseButtonEventArgs e)
{
registerClick = true;
}
private void Image_imageBox_MouseMove(object sender, MouseEventArgs e)
{
if (registerClick)
{
Pen myPen = new Pen(Color.FromArgb(255, 0, 0, 0), 10);
int radius = 50;
Bitmap b1 = _detektion.BildOriginal.Bitmap;
using (Graphics grf = Graphics.FromImage(b1))
{
// zeichne denkreis ein
grf.DrawEllipse(
myPen,
((float)e.GetPosition(imageBox_Image).X - 25,
(float)e.GetPosition(imageBox_Image).X - 25,
radius,
radius
);
}
imageBox_Image.Source = DGX_Body.Utility.Images.ConvertBitmapToBitmapImage(b1);
}
}
private void Image_imageBox_MouseUp(object sender, MouseButtonEventArgs e)
{
Console.WriteLine("Up!");
registerClick = false;
}
Can you help me please.
Thank you
Here is a very basic example of Ellipses in a Canvas with mouse input.
XAML:
<Grid>
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Canvas Background="Transparent"
MouseLeftButtonDown="CanvasMouseLeftButtonDown"
MouseLeftButtonUp="CanvasMouseLeftButtonUp"
MouseMove="CanvasMouseMove"/>
</Grid>
Code behind with event handlers:
private Ellipse currentEllipse;
private void CanvasMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var canvas = (Canvas)sender;
var pos = e.GetPosition(canvas);
canvas.CaptureMouse();
currentEllipse = new Ellipse
{
Width = 50,
Height = 50,
Margin = new Thickness(-25, -25, 0, 0),
Stroke = Brushes.White,
StrokeThickness = 3
};
Canvas.SetLeft(currentEllipse, pos.X);
Canvas.SetTop(currentEllipse, pos.Y);
canvas.Children.Add(currentEllipse);
}
private void CanvasMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
var canvas = (Canvas)sender;
canvas.ReleaseMouseCapture();
currentEllipse = null;
}
private void CanvasMouseMove(object sender, MouseEventArgs e)
{
if (currentEllipse != null)
{
var canvas = (Canvas)sender;
var pos = e.GetPosition(canvas);
Canvas.SetLeft(currentEllipse, pos.X);
Canvas.SetTop(currentEllipse, pos.Y);
}
}
With this small change you may also pick existing Ellipses:
private void CanvasMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var canvas = (Canvas)sender;
var pos = e.GetPosition(canvas);
canvas.CaptureMouse();
currentEllipse = e.OriginalSource as Ellipse;
if (currentEllipse == null)
{
currentEllipse = new Ellipse
{
Width = 50,
Height = 50,
Margin = new Thickness(-25, -25, 0, 0),
Fill = Brushes.Transparent,
Stroke = Brushes.White,
StrokeThickness = 3
};
canvas.Children.Add(currentEllipse);
}
Canvas.SetLeft(currentEllipse, pos.X);
Canvas.SetTop(currentEllipse, pos.Y);
}
I am very new to C# and WPF and would to create a WPF application that draws shapes with a button. The shapes then need to be able to move around the canvas. When I create a shape in the XAML it moves. However I cannot get the one created by the button to move. Could anyone please assist? Below are the XAML and code that i am using.
XAML:
<Window x:Class="All_test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Canvas x:Name="canvas" >
<Button Content="Button" Canvas.Left="250" Canvas.Top="260" Width="75" Click="Button_Click_1" />
<Rectangle x:Name="rect"
Height="100" Width ="100" Fill="red"
MouseLeftButtonDown="rect_MouseLeftButtonDown"
MouseLeftButtonUp="rect_MouseLeftButtonUp"
MouseMove="rect_MouseMove"
Canvas.Left="342" Canvas.Top="110" />
</Canvas>
This is the code I am using to move the red square drawn in XAML. How can I do the same for the green one created by the button?
public partial class MainWindow : Window
{
private bool _isRectDragInProg;
public MainWindow()
{
InitializeComponent();
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
Rectangle rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Green);
rect.Stroke = new SolidColorBrush(Colors.Black);
rect.Height = 100;
rect.Width = 100;
rect.StrokeThickness = 4;
canvas.Children.Add(rect);
InitializeComponent();
}
private void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_isRectDragInProg = true;
rect.CaptureMouse();
}
private void rect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_isRectDragInProg = false;
rect.ReleaseMouseCapture();
}
private void rect_MouseMove(object sender, MouseEventArgs e)
{
if (!_isRectDragInProg) return;
// get the position of the mouse relative to the Canvas
var mousePos = e.GetPosition(canvas);
// center the rect on the mouse
double left = mousePos.X - (rect.ActualWidth / 2);
double top = mousePos.Y - (rect.ActualHeight / 2);
Canvas.SetLeft(rect, left);
Canvas.SetTop(rect, top);
}
You should bind the mouse events for this Rectangle:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
Rectangle rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Green);
rect.Stroke = new SolidColorBrush(Colors.Black);
rect.Height = 100;
rect.Width = 100;
rect.StrokeThickness = 4;
// here
rect.MouseLeftButtonDown += rect_MouseLeftButtonDown;
rect.MouseLeftButtonUp += rect_MouseLeftButtonUp;
rect.MouseMove += rect_MouseMove;
canvas.Children.Add(rect);
// InitializeComponent(); <--- lose the InitializeComponent here, that's should only be called ones.. (in the constructor)
}
Recommendations:
Use the sender parameter to get the current Rectangle.
You can lose the _isRectDragInProg boolean... use the IsMouseCaptured property instead.
For example:
private void rect_MouseMove(object sender, MouseEventArgs e)
{
var rect = (Rectangle)sender;
if (!rect.IsMouseCaptured) return;
// get the position of the mouse relative to the Canvas
var mousePos = e.GetPosition(canvas);
// center the rect on the mouse
double left = mousePos.X - (rect.ActualWidth / 2);
double top = mousePos.Y - (rect.ActualHeight / 2);
Canvas.SetLeft(rect, left);
Canvas.SetTop(rect, top);
}
I have a canvas which has a zooming function. There are a lot of elements inside of it so, for selection I was going to use a selection box which I create dynamically when selection box is clicked. On clicking the button, I add the rectangle to the canvas and again, on clicking the button, I remove it.
I have the following xaml code:
<Viewbox x:Name="vbCanvas">
<Grid x:Name="theGrid"
MouseDown="Grid_MouseDown"
MouseUp="Grid_MouseUp"
MouseMove="Grid_MouseMove"
Background="Transparent">
<Canvas Name="canvasWaSNA" Margin="0,10,10,10" Height="720" Width="1280">
</Canvas>
</Grid>
</Viewbox>
mouse events of theGrid draws the rectangle on runtime on the canvas. The codes for those events are:
bool mouseDown = false;
Point mouseDownPos;
Point mouseUpPos;
private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
{
mouseDown = true;
mouseDownPos = e.GetPosition(theGrid);
theGrid.CaptureMouse();
// Initial placement of the drag selection box.
Canvas.SetLeft(sBox, mouseDownPos.X);
Canvas.SetTop(sBox, mouseDownPos.Y);
sBox.Width = 0;
sBox.Height = 0;
// Make the drag selection box visible.
sBox.Visibility = Visibility.Visible;
}
}
private void Grid_MouseUp(object sender, MouseButtonEventArgs e)
{
// Release the mouse capture and stop tracking it.
mouseDown = false;
mouseUpPos = e.GetPosition(theGrid);
theGrid.ReleaseMouseCapture();
// Show the drag selection box.
sBox.Visibility = Visibility.Visible;
MessageBox.Show(mouseDownPos.ToString() + " " + mouseUpPos.ToString());
}
private void Grid_MouseMove(object sender, MouseEventArgs e)
{
if (mouseDown)
{
// When the mouse is held down, reposition the drag selection box.
Point mousePos = e.GetPosition(theGrid);
if (mouseDownPos.X < mousePos.X)
{
Canvas.SetLeft(sBox, mouseDownPos.X);
sBox.Width = mousePos.X - mouseDownPos.X;
}
else
{
Canvas.SetLeft(sBox, mousePos.X);
sBox.Width = mouseDownPos.X - mousePos.X;
}
if (mouseDownPos.Y < mousePos.Y)
{
Canvas.SetTop(sBox, mouseDownPos.Y);
sBox.Height = mousePos.Y - mouseDownPos.Y;
}
else
{
Canvas.SetTop(sBox, mousePos.Y);
sBox.Height = mouseDownPos.Y - mousePos.Y;
}
}
}
To create a Rectangle at runtime, I have to click a button. The event of that button is as follows:
private void select_Click_1(object sender, RoutedEventArgs e)
{
if (!canvasWaSNA.Children.Contains(sBox))
{
sBox.Name = "selectionBox";
sBox.StrokeThickness = 1.5 / zoomfactor;
sBox.StrokeDashArray = new DoubleCollection { 1, 2 };
sBox.Visibility = System.Windows.Visibility.Collapsed;
sBox.Stroke = Brushes.Gray;
canvasWaSNA.Children.Add(sBox);
}
else
{
sBox.Visibility = System.Windows.Visibility.Collapsed;
canvasWaSNA.Children.Remove(sBox);
}
}
I am using the following code to zoom into the canvas:
double zoomfactor = 1.0;
void window_MouseWheel(object sender, MouseWheelEventArgs e)
{
Point p = e.MouseDevice.GetPosition(canvasWaSNA); //gets the location of the canvas at which the mouse is pointed
Matrix m = canvasWaSNA.RenderTransform.Value;
if (e.Delta > 0)
{ //the amount of wheel of mouse changed. e.Delta holds int value.. +ve for uproll and -ve for downroll
m.ScaleAtPrepend(1.1, 1.1, p.X, p.Y);
zoomfactor *= 1.1;
}
else
{
m.ScaleAtPrepend(1 / 1.1, 1 / 1.1, p.X, p.Y);
zoomfactor /= 1.1;
}
canvasWaSNA.RenderTransform = new MatrixTransform(m);
}
When my canvas is on original size, The rectangle is drawn perfectly but as I zoom in or zoom out, rectangle is drawn abnormally. It starts to draw from other points. What might be the problem? Please help
Well, I wasnot supposed to capture the mouse position with respect to theGrid, as I had to create the rectangle with respect to canvas. So, I have to get the position as e.GetPosition(canvasWaSNA) and the intended result was shown. It captured the mouse position on the canvas. Now, the rectangle is drawn perfectly even when zoomed in or zoomed out.
Also, I improved the StrokeThickness of the rectangle drawn by referencing it with the zoomfactor of the canvas.
private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
{mouseDown = true;
mouseDownPos = e.GetPosition(canvasWaSNA);
theGrid.CaptureMouse();
sBox.StrokeThickness = 1.5 / zoomfactor;
// Initial placement of the drag selection box.
Canvas.SetLeft(sBox, mouseDownPos.X);
Canvas.SetTop(sBox, mouseDownPos.Y);
sBox.Width = 0;
sBox.Height = 0;
// Make the drag selection box visible.
sBox.Visibility = Visibility.Visible;
}
I am trying to capture a signature in windows phone 7.1.
I can draw on the screen yet I can not limit the drawing area to the InkPresenter control except by adding some handling in the mousemove event.
How can I limit the drawing area using XAML or is this not possible?
XAML Code
<InkPresenter Name="inkTest" Background="White" MinHeight="180" MinWidth="250" />
Code Behind
private Stroke _currentStroke;
private void inkTest_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_currentStroke = null;
}
private void inkTest_MouseMove(object sender, MouseEventArgs e)
{
if (_currentStroke == null) return;
//HACK: want to set this in XAML
var position = e.GetPosition(inkTest);
if (position.X <= inkTest.ActualWidth &&
position.Y <= inkTest.ActualHeight)
_currentStroke.StylusPoints.Add(GetStylusPoint(position));
}
private void inkTest_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
inkTest.CaptureMouse();
_currentStroke = new Stroke();
_currentStroke.StylusPoints.Add(GetStylusPoint(e.GetPosition(inkTest)));
_currentStroke.DrawingAttributes.Color = Colors.Blue;
inkTest.Strokes.Add(_currentStroke);
}
private StylusPoint GetStylusPoint(Point position)
{
return new StylusPoint(position.X, position.Y);
}
Untested, but try clipping:
<InkPresenter Name="inkTest" Background="White" MinHeight="180" MinWidth="250">
<InkPresenter.Clip>
<RectangleGeometry Rect="0,0,180,250"/>
</InkPresenter.Clip>
</InkPresenter>
Change the boundaries of the RectangleGeometry to what you want (or change the RectangleGeometry element itself if you need a different shape).
I have a custom WPF control which consist of single TextBox
<UserControl HorizontalAlignment="Left" x:Class="WPFDiagramDesignerControl.Components.UcWBSBlock"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="100" Width="100" IsEnabled="True">
<Grid >
<TextBox x:Name="txtBox" IsEnabled="True" Background="AntiqueWhite" Margin="10,10,10,10" TextWrapping="Wrap"> </TextBox>
</Grid>
</UserControl>
The control is placed on Canvas called MyDesigner.
I want to move my control on canvas only if I click on textbox and move mouse. I don't want to move control when I click on margin between borders of control and textbox.
I started writting a code and it looks like that
public partial class UcWBSBlock : UserControl
{
bool textChanged = false;
bool isClicked = false;
Point startPoint;
DesignerItem parentItem;
DesignerCanvas parentCanvas;
public UcWBSBlock()
{
InitializeComponent();
txtBox.MouseDoubleClick+=new MouseButtonEventHandler(txtBox_MouseDoubleClick);
txtBox.MouseMove+=new MouseEventHandler(txtBox_MouseMove);
txtBox.PreviewMouseDown+=new MouseButtonEventHandler(txtBox_PreviewMouseDown);
txtBox.PreviewMouseUp+=new MouseButtonEventHandler(txtBox_PreviewMouseUp);
txtBox.Cursor = Cursors.SizeAll;
}
private void txtBox_MouseMove(object sender, RoutedEventArgs e)
{
if (isClicked)
{
Point mousePos = Mouse.GetPosition(parentCanvas);
parentItem = this.Parent as DesignerItem;
parentCanvas = parentItem.Parent as DesignerCanvas;
Point relativePosition = Mouse.GetPosition(parentCanvas);
DesignerCanvas.SetLeft(parentItem,DesignerCanvas.GetLeft(parentItem) - (startPoint.X - mousePos.X));
DesignerCanvas.SetTop(parentItem, DesignerCanvas.GetTop(parentItem) - (startPoint.Y - mousePos.Y));
}
}
private void txtBox_PreviewMouseDown(object sender, RoutedEventArgs e)
{
if (!isClicked)
{
isClicked = true;
parentItem = this.Parent as DesignerItem;
parentCanvas = parentItem.Parent as DesignerCanvas;
startPoint = Mouse.GetPosition(parentCanvas);
}
}
private void txtBox_PreviewMouseUp(object sender, RoutedEventArgs e)
{
isClicked = false;
}
}
}
However my control doesn't move :( What did I do wrong ?? It's hard to debug this :)
you are setting the left/top of the parent item, not your control:
DesignerCanvas.SetLeft(parentItem,DesignerCanvas.GetLeft(parentItem) - (startPoint.X - mousePos.X));
DesignerCanvas.SetTop(parentItem, DesignerCanvas.GetTop(parentItem) - (startPoint.Y - mousePos.Y));
should (probably) be like this:
DesignerCanvas.SetLeft(this,DesignerCanvas.GetLeft(this) - (startPoint.X - mousePos.X));
DesignerCanvas.SetTop(this, DesignerCanvas.GetTop(this) - (startPoint.Y - mousePos.Y));