I have such slider:
<Slider Minimum="0" Maximum="100"
TickFrequency="1"
IsMoveToPointEnabled="True"
IsSnapToTickEnabled="False"/>
I want to make next behavior:
when MouseDown occured at any point of slider, Thumb not only moves once to that point, but also following cursor until MouseUp occurs.
Sorry if it was asked already, i couldn't find that question.
This behavior will happen only when you drag the slider thumb itself, it is by design.
However, here's some code that will do it ;-)
Hook to the MouseMove event in XAML:
<Slider MouseMove="Slider_OnMouseMove" IsMoveToPointEnabled="True"/>
Then insert this code:
private void Slider_OnMouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
var slider = (Slider)sender;
Point position = e.GetPosition(slider);
double d = 1.0d / slider.ActualWidth * position.X;
var p = slider.Maximum * d;
slider.Value = p;
}
}
Note :
You might have to take margins and padding of your slider into account should they differ, I haven't.
This was done on an horizontal slider.
Minimum value of my slider was 0, make sure to adjust the calculation should your minimum be negative.
Finally, it does seem to work only when IsMoveToPointEnabled is set.
Aybe's solution works better in the thumb_MouseMove event.
void timelineThumb_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
var thumb = sender as Thumb;
Point pos = e.GetPosition(uiVideoPlayerTimelineSlider);
double d = 1.0d / uiVideoPlayerTimelineSlider.ActualWidth * pos.X;
uiVideoPlayerTimelineSlider.Value = uiVideoPlayerTimelineSlider.Maximum * d;
}
}
Related
I would like to write an application that will measure fragments of a specimen examined under a microscope. I thought that the best way would be to capture the image and draw on selected parts of the specimen then count the value of the drawn line in pixels (and later to convert this value into the appropriate unit).
Is there anything that helps solve such issue already implemented or any tool/package or something that allows such calculations?
I will also willingly learn about solutions in other programming languages if they allow to solve this problem in a easier way or just in some way.
This is a very basic example of measuring a segmented line drawn onto an image in winforms.
It uses a PictureBox to display the image, a Label to display the current result and for good measure I added two Buttons the clear all points and to undo/remove the last one.
I collect to pixel positions in a List<Point> :
List<Point> points = new List<Point>();
The two edit buttons are rather simple:
private void btn_Clear_Click(object sender, EventArgs e)
{
points.Clear();
pictureBox1.Invalidate();
show_Length();
}
private void btn_Undo_Click(object sender, EventArgs e)
{
if (points.Any())points.Remove(points.Last());
pictureBox1.Invalidate();
show_Length();
}
Note how I trigger the Paint event by invalidating the image whenever the points collection changes..
The rest of the code is also simple; I call a function to calculate and display the sum of all segment lengths. Note that I need at least two points before I can do that or display the first line..
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
points.Add(e.Location);
pictureBox1.Invalidate();
show_Length();
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
if (points.Count > 1) e.Graphics.DrawLines(Pens.Red, points.ToArray());
}
void show_Length()
{
lbl_len.Text = (pointsF.Count) + " point(s), no segments. " ;
if (!(points.Count > 1)) return;
double len = 0;
for (int i = 1; i < points.Count; i++)
{
len += Math.Sqrt((points[i-1].X - points[i].X) * (points[i-1].X - points[i].X)
+ (points[i-1].Y - points[i].Y) * (points[i-1].Y - points[i].Y));
}
lbl_len.Text = (points.Count-1) + " segments, " + (int) len + " pixels";
}
A few notes:
The image is displayed without any zooming. PictureBox has a SizeMode property to make zoomed display simple. In such a case I recommend to store not the direct pixel locations of the mouse but 'unzoomed' values and to use a 'rezoomed' list of values for the display. This way you can zoom in and out and still have the points stick to the right spots.
For this you ought to use a List<PointF> to keep precision.
When zooming e.g. by enlarging the PictureBox, maybe after nesting it in a Panel, make sure to either keep the aspect ratio equal to that of the Image or to do a full calculation to include the extra space left or top; in SizeMode.Normal the image will always sit flush TopLeft but in other modes it will not always do so.
For the calculation of actual i.e. physical distances simply divide by the actual dpi value.
Let's see what we have in action:
Update:
To get a chance to create cloers fits and better precision we obviously need to zoom in on the image.
Here are the necessary changes:
We add a list of 'floating points':
List<PointF> pointsF = new List<PointF>();
And use it to store the un-zoomed mouse positions in the mouse down:
pointsF.Add( scaled( e.Location, false));
We replace all other occurances of points with pointsF.
The Paint event always calculates the scaled points to the current zoom level:
if (pointsF.Count > 1)
{
points = pointsF.Select(x => Point.Round(scaled(x, true))).ToList();
e.Graphics.DrawLines(Pens.Red, points.ToArray());
}
And the function to do the scaling looks like this:
PointF scaled(PointF p, bool scaled)
{
float z = scaled ? 1f * zoom : 1f / zoom;
return new PointF(p.X * z, p.Y * z);
}
It uses a class level variable float zoom = 1f; which gets set along with the picturebox's Clientsize in the Scroll event of a trackbar:
private void trackBar1_Scroll(object sender, EventArgs e)
{
List<float> zooms = new List<float>()
{ 0.1f, 0.2f, 0.5f, 0.75f, 1f, 2, 3, 4, 6, 8, 10};
zoom = zooms[trackBar1.Value];
int w = (int)(pictureBox2.Image.Width * zoom);
int h = (int)(pictureBox2.Image.Height * zoom);
pictureBox2.ClientSize = new Size(w, h);
lbl_zoom.Text = "zoom: " + (zoom*100).ToString("0.0");
}
The picturebox is nested inside a Panel with AutoScroll on. Now we can zoom and scroll while adding segments:
I am having a problem with this code. When I start the program Ruler is in the center of the page. When I mousemove when MouseDown is true, the Rectangle (Ruler) is dragable as I want. However, this only works on the first drag. The next time I go to drag it the Ruler jumps back to it's original position, then when you mouse over it the distance from where it was to where it jumped back is calculated and it jumps off the screen as the mouseup event doesn't fire as the rectangle has moved. I basically want to be able to drag the object around the screen however many times I want, but the XStart and YStart need to take the new rendered values on each click.
I think the reason has to do with the e.GetPosition(this).X; as 'this' refers to the Grid that is the rulers parent.
Do I need to commit the RenderTransform to the program? or is there an error in my logic?
It would honestly make more sense if it didn't work at all, but to work perfectly once, then screw up makes no sense.
Here is the code:
private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
XStart = e.GetPosition(this).X;
YStart = e.GetPosition(this).Y;
Console.WriteLine("X: " + XStart + ", Y: " + YStart);
MouseDown = true;
}
private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
if(MouseDown)
{
X = e.GetPosition(this).X - XStart;
Y = e.GetPosition(this).Y - YStart;
Ruler.RenderTransform = new TranslateTransform(X, Y);
}
}
private void Ruler_MouseUp(object sender, MouseButtonEventArgs e)
{
MouseDown = false;
}
Looks like Mouse.GetPosition doesn't work when dragging like you would expect.
This example seems relevant, but he uses the DragOver event instead of MouseMove, so I'm not entirely sure if it's the same situation.
I am having difficulties to understand why I can change the brush color but can't change the brush radius in a SurfaceInkCanvas.
Here is what I do:
Double newSize = Math.Round(BrushRadiusSlider.Value,0);
drawingAttributes = new System.Windows.Ink.DrawingAttributes();
// Works :
drawingAttributes.Color = Colors.Yellow;
// Does not work :
drawingAttributes.Width = newSize;
drawingAttributes.Height = newSize;
canvas.DefaultDrawingAttributes = drawingAttributes;
For information, BrushRadiusSlider is a slider in the XAML and gives values between 1 and 100.
See here:
SurfaceInkCanvas.DefaultDrawingAttributes Property
You probably forgot to set the UsesTouchShape to false
The issue is I think that the brush is not updating when the slider's value is changed. Your code above takes the value of the slider at one moment in time, and sets the width and height to that, but it is not linked to the slider.
To get it to update when the slider changes you would need to handle the SliderValueChanged event and reset the drawingAttributes then.
XAML:
<Slider x:Name="BrushRadiusSlider" Minimum="1" Maximum="100" Value="1" ValueChanged="SliderValueChanged"/>
Code:
private void SliderValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (canvas != null)
{
var drawingAttributes = canvas.DefaultDrawingAttributes;
Double newSize = Math.Round(BrushRadiusSlider.Value, 0);
drawingAttributes.Width = newSize;
drawingAttributes.Height = newSize;
}
}
I have a rectangle and on my MouseMove event I want to transform the rectangle whenever the rectangle's width has changed.
I have code sorta like this:
private Rectangle _rectangle;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_rectangle = GetTemplatedChild("PART_RangeRectangle") as Rectangle;
if(_rectangle != null)
{
_rectangle.MouseMove += new MouseEventHandler(_rectangle_MouseMove);
}
}
private void _rectangle_MouseMove(object sender, MouseEventArgs e)
{
if(e.LeftButton == MouseButtonState.Pressed && _rectangle != null)
{
_rectangle.Width += 50;
_rectangle.RenderTransform = new TranslateTransform(-10, 0);
}
}
My Xaml looks sorta like this:
<Grid>
<Canvas>
<Rectangle Name="PART_RangeRectangle" StrokeThickness="5"
RenderTransformOrigin="0.5, 0.5" />
<Canvas>
</Grid>
When I first trigger the MouseMove event the translation occurs as expected. But this only occurs once. I am getting into that block of code and the width of the rectangle is updating fine, but I've yet to figure out why the transform is not updating.
You're replacing the old transform with an identical transform. You need to modify the existing transform and use += like you do with Width.
Example:
if (_rectangle.RenderTransform is TranslateTransform)
{
(_rectangle.RenderTransform as TranslateTransform).X -= 10;
}
else _rectangle.RenderTransform = new TranslateTransform(-10, 0);
You're not changing your transform. Assigning a RenderTransform does not move the rectangle, it sets an offset. You're not changing that offset after your first assignment.
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.