I've got two background pictures, one is blurry, the other one is the same picture, but more colorful.
The default background image is the blurry one.
When I move the cursor, I'd like to change the background image from the blurry to the colorful one,
but only in a circle around the cursor,
and when I move the cursor forward, the changed background stays where the circle around the cursor went earlier.
(like when you scratch a lottery ticket with a coin)
I think I have to handle the MouseMove event, and use the MouseEventArgs cursor position,
but I cannot go through, and I really need help!
Thanks in advance!
You might want to try following this path:
Add a Canvas to your page, with the same size as both of your images
Create a clipping path in the shape of an ellipse (<Ellipse ...>) and position it outside of your image, in the canvas
Put the "blurry image" on your canvas first (below), and then the "sharp image", filling the whole canvas.
Let the ellipse be the clipping mask of your "sharp image" (using Image.Clip or YourUIElement.Clip (reference on MSDN)
Move your ellipse with the mouse cursor. The code might look like this (note: I didn't test the code):
-
imageCanvas.MouseMove += imageCanvas_MouseMove;
private void imageCanvas_MouseMove(object sender, MouseEventArgs e)
{
Point mousePosition = e.GetPosition();
Canvas.SetTop(myEllipse, mousePosition.Y - myEllipse.ActualHeight / 2);
Canvas.SetLeft(myEllipse, mousePosition.X - myEllipse.ActualWidth / 2);
}
If this works, you can increment your visual design adding animations on MouseEnter/MouseLeave, etc.
Related
I'm using the following controls in WPF (XAML) code to create a canvas:
<ScrollViewer x:Name="CanvasScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Background="Beige" >
<Canvas x:Name="canvas" Height="10000" Width="10000" MouseWheel="CanvasMouseWheel" >
<Canvas.RenderTransform>
<MatrixTransform/>
</Canvas.RenderTransform>
</Canvas>
In essence, this includes a canvas (which is larger than my screen resolution) and a scrollviewer, to make sure that I can navigate around the whole canvas.
Now, I want to zoom in / out at the current mouse cursor position of the canvas if I keep CTRL pressed and use the mousewheel. It works quite well using an approach similar to the one listed here.
My C# code looks like this:
private void CanvasMouseWheel(object sender, MouseWheelEventArgs e)
{
if (Keyboard.Modifiers != ModifierKeys.Control)
return;
var sentCanvas = sender as UIElement;
var position = e.GetPosition(sentCanvas);
var transform = canvas.RenderTransform as MatrixTransform;
var matrix = transform.Matrix;
var scale = e.Delta >= 0 ? 1.2 : (1.0 / 1.2);
matrix.ScaleAtPrepend(scale, scale, position.X, position.Y);
transform.Matrix = matrix;
e.handled = true;
}
This works quite nicely with one exception: If I scroll in / out, the position of the scroll bars of the scroll viewers and the actual position of the canvas are no longer synchronized. Meaning: The canvas zooms in or out, but the scroll viewer does not adjusts its scroll bar positions which ultimately means that you cannot properly scroll the canvas anymore.
Naturally (as I use the canvas to draw large diagrams which require a lot of navigation), I want to be able zoom out quite a lot from time to time, so that the whole canvas fills only part of the field of view of the scroll viewer. The attached screen shot shows that situation for clarification where I zoomed out a lot.
I tried several other approaches like first moving the scroll viewer to the mouse position and then applying the "scale(...)" operation (without "AtPrepend"), but to no avail. Performing the scale operation directly on the scrollviewer obviously doesn't work, either. Probably, the solution is trivial, but I can't see the forest for the trees...
Any help would be deeply appreciated!
Thanks to BionicCode for the hint. The following entry answers my question and works perfectly:
WPF Canvas zoom and children position
I am trying to implement a "stamping" feature. I am selecting an image from a list, and using it to stamp on the clicked position on my canvas.
I have read several solutions on how to change the cursor, but they involved simply changing the ico texture.
I want to be able to preview in real time what I will be stamping. So if I change the rotation of the stamp, the cursor needs to rotate appropriately, if I scale the stamp the cursor needs to be scaled, and if I switch the stamp the cursor needs to switch.
I tried adding an image to an observablecollection, and binding it to the canvas. Then I tried updating the position, image, scale inside the MouseMove event of the canvas, but it doesnt work.
Here is the MouseMove function:
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
if (currentTool == "staticBrush" && lvDataBinding.SelectedIndex != -1)
{
canvasImages[0].Name = srcImages[lvDataBinding.SelectedIndex].Name;
canvasImages[0].BmpImage = new BitmapImage(new Uri(canvasImages[0].Name, UriKind.Relative));
scale(canvasImages[0]);
canvasImages[0].OffsetX = e.GetPosition(canvasDataBinding).X;
canvasImages[0].OffsetY = e.GetPosition(canvasDataBinding).Y;
}
}
You have two main options... you can either follow a fairly complex tutorial such as WPF Tutorial - How To Use Custom Cursors on TechPro, which should enable you to create a Cursor from just about any WPF UIElement, or you can simply hide the Cursor by setting Cursor = Cursors.None and replacing it with your own Image... of course, with this method, you'd also be responsible for moving the Image wherever the mouse cursor moves.
I have a lot of images placed on a canvas (~150 pages converted PDF).
I would like to be able to move around from one region to another of this canvas by animating the movement (zoom and pan).
My animation keys are in a listbox. I have a "play" button to play all.
When I click an animation key, my "camera" automatically moves to the defined location.
It's a kind of "Prezi wall".
This is only half or three quarters of an answer really, but hopefully you can fill in the gaps. You could try using the VisualBrush Class. First you set up the visual that the VisualBrush will paint using your full Canvas:
VisualBrush visualBrush = new VisualBrush();
visualBrush.Visual = yourCanvasElement;
You then paint with the Brush onto, let's say, a Rectangle element:
Rectangle rectangle = new Rectangle();
...
rectangle.Fill = visualBrush;
You can then use the VisualBrush.Viewbox property to move the content about. Now I think that there is some way of zooming in and out, but I can't remember at the moment.
Alternatively, you could use the ViewBox class. You can get your zooming effect by changing the size of the content and the ViewBox and get your panning effect by using a ScrollViewer. There's a post on StackOverflow that demonstrates this, so please take a look at the Zooming To Mouse Point With ScrollView and ViewBox in Wpf post for more help with this method.
I have a project in WPF 4 and vb.net 2010.
I have a canvas inside a window. The window is full screen, but the canvas is set to a solid 640x480 in the center of the window. I need to get the mouse position inside of the canvas, but NOT inside of the window. How do I do this?
Doesn't this work?
Point p = Mouse.GetPosition(canvas);
The position of the mouse pointer is
calculated relative to the specified
element with the upper-left corner of
element being the point of origin,
Hi the important thing is the
NOT on the Window
the canvas is part of the window as well.
one example:
the Window.AllowsTransparency state is on true
the Window.Background is #00000000 (completely transparent)
the Window.Style is None
the Window.State is Maximized and
there are NO controls or elements on the window!
...
so if you start the application you will see Nothing
now tell me how to get the mouseposition on the screen in pixel
!Warning!
if you juse Mouse.GetPosition(this); it will return x0 y0 every time
so I solved the Problem by using System.Windows.Forms.Control.MousePosition it's a bit a mix of wpf and Windows.Forms but I've given up xD.
Sorry for yelling :/
To make it easy for me I made a Extension:
<DebuggerHidden> _
<System.Runtime.CompilerServices.Extension> _
Public Function toWfpPoint(p As System.Drawing.Point) As Point
Return new Point(p.X, p.Y)
End Function
Now I just can juse it like this:
Dim MousPos As Point = System.Windows.Forms.Control.MousePosition.toWfpPoint
I have a WPF window with expandable panel (via Expander). The panel is on the left side of the window, and when expanded the window grows to fit the content.
By default, windows are anchored to the top-left, so my window grows to the right. I'd like the window to grow to the left.
I tried to do the following in the Window.SizeChanged event:
private void onWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
Left -= (e.NewSize.Width - e.PreviousSize.Width)
}
and it works, but the growth is jerky, and I'd like to find a smoother solution.
I managed to overcome this using a simple solution: Hide & Show.
Here's the code:
protected override void OnRenderSizeChanged(SizeChangeInfo sizeInfo)
{
if (!sizeInfo.WidthChanged)
{
base.OnRenderSizeChanged(sizeInfo);
return;
}
Hide();
base.OnRenderSizeChanged(sizeInfo);
Left -= (sizeInfo.NewSize.Width - sizeInfo.PreviousSize.Width);
Show();
}
I replaced the event handler for Window.SizeChanged with this override of FrameworkElement.OnRenderSizeChanged.
I haven't tried to make a Window grow to the left like what you're requesting, but if all else fails, I would consider templating a button to look like the expander button. Then instead of trying to make your Window grow to the left, make a new Window grow to the left of your primary Window using Transforms.
UPDATE
Well, the poor rendering performance could be video card related, layout (overly complex) related, or both. I've got an idea that might do the trick for you. Jeff Prosise blogged about a magnifying glass in Silverlight that uses a WriteableBitmap to achieve the desired effect. I thought, "why not use a WriteableBitmap to create a screenshot of your layout to the right of the Expander, and cover up the other elements with it?". I think that if you do this and hide the underlying elements (so they don't get adjusted), rendering performance will be much improved.
I got Jeff's code to work in WPF with little modification.
http://www.wintellect.com/CS/blogs/jprosise/archive/2009/10/29/more-fun-with-silverlight-3-s-writeablebitmap.aspx
Solution 1
Try to use Window property: SizeToContent="width" this will scale your window to the size of your content and you can scale your content using animation and easing, this will make scaling of the window nice and smooth.
Solution 2
You could create a window which is bigger than it's content and make your background transparent. You still have to add background to some element.
Here is an example of how it may look like:
You may put your expander in a grid (where the column size can change) and then set the ExpandDirection property of your expander to left ?