I'm trying to modify the default graph viewer of the Graph# library because its user interface is awful (just try dragging a node outside of the boundaries, you'll see!)
The basic setup is this: there is a GraphCanvas control (inherited from Panel) which has children of Vertex and Edge control types. What I want to achieve is:
GraphCanvas has scroll bars if the contents do not fit in the screen;
GraphCanvas can also be scrolled by "dragging" it (just click on an empty space and drag);
GraphCanvas can be zoomed in and out (via CTRL+mouse wheel);
Vertices can be dragged around. If a vertex is dragged outside the current boundaries of GraphCanvas, the boundaries are increased. The scroll bars should reflect this, however the current viewport should not scroll away while the vertex is being dragged . The same goes if dragging a vertex reduces the boundaries of GraphCanvas - it should stay the same size until the drag operation is finished and resize only then. Automatically scrolling the viewport during a drag operation is awfully confusing and easily introduces dragging errors. See the original implementation if you want to know what I mean.
Although I've got a fair bit of experience with .NET, I'm still a complete beginner in WPF. My current attempt is (in the measure/arrange layout phase) to give each vertext the XY coordinate it desires (even if negative) and implement zooming/scrolling by handling mouse events on the GraphCanvas and modifying the RenderTransform property. Dragging just changes the XY coordinates on the specific vertex (probably triggering the re-layout of the whole thing which would be nice to avoid too). Scrollbars are implemented by placing the GraphCanvas inside a ScrollViewer and implementing IScrollInfo on the GraphCanvas.
Unfortunately there seems to be a problem: I can get mouse events on the GraphCanvas itself only if it has a background at the point. That would be OK, I want a white background anyway, but in the negative coordinates of the GraphCanvas it does not draw the background - and thus does not respond to mouse events.
I'm also wondering if I'm doing the Right Thing by allowing all my child controls (vertices and edges) to go into negative coordinates. How would you implement this?
Added: To clarify about the background problem check out the following screenshot:
(source: valts.21.lv)
What you see here is a simple Windows Forms form with a WPF Host control on it. That has a ScrollViewer in it, and the ScrollViewer has the GraphCanvas in it. The GraphCanvas contains 4 vertices and 6 edges.
The GraphCanvas is stretched to fill the ScrollViewer. But since some of the vertices are at negative coordinates, it has a RenderTransform applied which simply shifts everything to the right (TranslateTransform). It also has a white background brush.
Note the gray area on the left. That's still a part of the GraphCanvas, but the background brush somehow doesn't exted there. Also, if I left-click there with my mouse (not on a node, but on the gray area), I do NOT get an event. If I left-click on the white area, I get all events just fine.
Call CaptureMouse on canvas.mouseDown and ReleaseMouseCapture on mouse up. Also, if you set your canvas background to transparent it will still be hit testable
You can attach a 'Draggable' behavior to each element.
Related
I am trying to construct some SVG shapes which should be resize-able along one or more edges.
The way I do this is by creating an additional shape on top of the shape which I want to be able to resize. I use this shape to indicate to the user that an edge can be clicked on and dragged. This shape tends to be a line that lights up once the user moves their mouse over it and I change it's position while resizing the main shape.
Using a combination of the mousedown, mousemove and mouseup events, I get the mouse's current position and adjust the shape accordingly.
All seems to work. However, what I can't seem to figure out is that should I move my mouse a little bit too quickly, while dragging the edge, it seems as though the mouse looses track of the event and the dragging of the edge fails. At this point I am have to find the edge again and restart the process.
Any idea how to either stop the mouse from losing the edge while dragging? Or perhaps slow down the event so as not to allow the mouse to jerk into any one direction too fast?
I have created a a sandbox here to demonstrate the issue.
I have a custom Panel implementation that renders objects relative to a physical space (think like a floor plan). The panel allows the following actions:
Zoom in/out
Pan up/down/left/right
and more that isn't relevant to this question
The panel lives in with several other elements on screen, and I need to make sure the custom panel's graphics don't spill over the navigation and other controls.
The problem is this:
If the panel is set to clip, it clips the children before arranging them.
Let's say I have a circle in the floor plan and the user zooms in enough to make the circle bigger than the parent control. The panel applies clipping to the circle as if it were placed dead center, then arranges the circle where it is supposed to be. The end result is that the circle no longer looks like a circle and I have gaps in the image.
I need the clipping to be applied after arranging the elements, or only applied to the overall image as compiled by the children. How can I do this?
It turns out I had the opposite problem of the question the OP had in his letter to Dr. WPF where ClipToBounds = "Maybe"
If I override the GetLayoutClip() method in my control and return null, I essentially turn off clipping for the element. However, since ClipToBounds is still true for my panel, the rendered item doesn't spill over the rest of the application.
In the base class for all items that will be added to my custom panel I have this:
protected override Geometry GetLayoutClip(Size layoutSlotSize)
{
return null;
}
In my case this is exactly what I want. I honestly want my layout clip to be based on the parent panel and not the child size (with no sense of location within the panel).
I am new to silver light and would like to understand a bit more from the pros. Let me tell you what I am trying to do. I am into photography and my goal is to create a web site that allows users to view their images and be able to rotate, zoom, crop, special effect etc. I have developed the web site that allows users to order pictures but now I want to start working on the actual picture/image manipulation. So for testing i put a canvas and a rectangle( with an image). Placed a slider and was able to link the slider to the rectangle. As i increase the slider the image gets larger. But I was kind of hoping as the image gets larger it does not surpass the boundries of the canvas. I assumed that is what it means by being a child of a canvas. Am i mistaken? If so how do you suggest me doing this? Remember I am very new to this and may be going about this very wrong.
Thanks!
Your are right. In Silverlight (like in WPF, WinForms etc.) gui-elements form a hierarchy of elements wherein controls can act either as parents or as children.
The reason why your rectangle surpasses the boundaries of it's container lies in the way controls are getting aligned. This depends on what kind of container you want to place your child into.
In a canvas for example you position the children with absolute measurements (left, top, height, width). In a self-organizing container like the StackPanel you choose an horizontal alignment (Left, HCenter, HStretch, Right) or a vertical alignment (Top, VCenter, VStretch, Bottom) which determines the childs behavior when you place it inside the parent. Furthermore you can specify the dimension of the child (Width, Height) and an optional margin which determines the gap between the Top, Right, Bottom and Left bound of your child to its enclosing parent.
But what ever container you choose it's inherent to it that you can let its children surpass its boundaries e.g. with a margin that is negative or greater than the container boundaries or simply by an child that is bigger in dimension that its container as you described the situation with your rectangle.
In your case I would consider working with the idea of clipping. Clipping simply means to
(1) define an geometrical area (in Silverlight and WPF it is a Path object) which lies over some graphical context (some section of your ui or your control etc).
(2) what lies inside the boundaries of this clipping area remains visible and everything else remains invisible.
So you can think of a clipping area as a window onto your screen which you use to look through.
When you are using Microsoft Blend this is easy to realize:
(1) Just use a geometrical shape like a Rectangle, a Circle or a custom Path.
(2) Place it somewhere upon your UI
(3) Right-click the shape, select "Path" and then "Make clipping Path"
(4) and voulà, you've just defined a clipping area which you can modify as you are used to modify controls.
Hope this gave you an idea how to deal with your problem.
cheers.
I have a WPF scrollViewer that I use for panning (MouseDown, MouseMove, MouseUp) and I would like to include an acceleration effect that incorporates inertia. So, if the mouse moves beyond a threshold speed and I release the mouse, it continues to pan but slows down as a function of the initial speed. Any ideas, thoughts or examples?
I've done basically this before and started by looking at ScrollViewer but in the end threw it away and used a Viewbox with a Canvas as the child for absolute positioning of content (I was supporting zoom aswel as scroll, it was basically DeepZoom without the scaled images for zooming so there was pixelation when zoomed right in). I wrote code for determining the gesture direction and the speed of the gesture from the mouse events and converted this to a scroll direction and speed and then animated the Canvas.Left and Canvas.Top properties of the scrollable content (which was in the Children collection of the Viewbox's child Canvas) with DoubleAnimation. It worked well, however there may be a better way...heres a thread suggesting hosting DeepZoom in WPF via a Frame control (although I wouldn't do it that way).
EDIT: Basically the ScrollViewer was just too restricting. Even if you get into the ControlTemplate and get references to the ScrollBars directly, it is the position of the Thumb of these scrollbars that you would need to animate and I'm pretty sure this is what I found I couldn't do (it was almost 3 years ago :)
I have a StackPanel inside of a ScrollViewer.
I have a slider that does a scale transform on the stackpanel to allow zoom-in and zoom-out functionality. The problem is that when I zoom in, the scrollviewer doesn't treat the content as being 'bigger'.
So, if I scroll in a little and scroll as far right as I can go - it stops me before I get to the end of the content. If I zoom back out to the untransformed level, I see that it's stopping exactly at that point. If I zoom in a lot, I can only see a small fraction of my total content when I scroll all the way over.
I can change the TransformOrigin to control which side loses the most content; but I figure there should be some way for the scrollviewer (or another control?) to take care of it for me.
Are you doing render transform, or layout transform? You should be doing the latter.