2D Scatter plot with arrows instead of "dots" - c#

I want to make a 2D scatter plot with following requirements;
The "dots" should not be dots but instead arrows pointing either upwards or downwards depending on the data it represents.
It should be possible to specify what values to show on the axis.
The user should be able to zoom and pan on the graph.
I want to be able to specify what color each arrow should have.
The arrows should be clickable (i.e. I need some way to register a click event and decide which arrow was clicked).
I have tried to accomplish this using ZedGraph but I find it hard to get how I want, especially with the first requirement.
Is there a free charting library that would allow me to do this relatively easy in WinForms? Or, any general tips on how to accomplish the first requirement using ZedGraph?

In the Zedgraph samples there is an example of adding text labels to the data points using TextObjects. You can find this demo sample here.
Based on this example, you should be able to create the up and down arrows in required positions, using ArrowObjects instead of TextObjects.

I have now learned that all requirements can be accomplished using ZedGraph.
The "dots" should not be dots but instead arrows pointing either upwards or downwards depending on the data it represents.
The cleanest solution is to use LineItem and do custom symbol type just like in this post Customize symbol type of a ZedGraph LineItem .
It should be possible to specify what values to show on the axis.
An easy solution to this is to use TextLabels and manually place them where you want them.
The user should be able to zoom and pan on the graph.
Functionality built into ZedGraph.
I want to be able to specify what color each arrow should have.
One can create multiple LineItems for each color, this requires that the line itself is not visible though.
The arrows should be clickable (i.e. I need some way to register a click event and decide which arrow was clicked).
Easily made using the Click event and FindNearestPoint method.

Related

LiveCharts Mark closest point to mouse

I have a WPF application where I used DevExpress charts to display some data. I want to get rid of them and use LiveCharts, but I want to display a circle in the chart point closest to the mouse cursor when it is inside the chart. I have tried sections and I can show lines that cross in the point, but I can't mark that point as it automatically does when you hover over it. Is there a way to do this without changing the source code?
I think you can get your answer from this example.
By calculating the closest point to your mouse (like in the example, you can then change the style of your chart point. In the example, the x-axis lable at the specific point gets highlighted.

Is there a graph component that lets me specify x- and y-axis to be positioned in an other grid?

I am working on a projekt to display data in form of a graph. In order for me to do what i want to do i need a graph or chart component that lets me move the x- and y-axis to different grids.
To clarify:
My graph should consist of 3 different parts.
1: The actual graph that displays the line.
2: The y-axis.
3: The x-axis.
I want to put the graph (1) in one grid, the y-axis (2) inside an other grid and the x-axis (3) inside a third grid.
I have looked at WPF-Toolkit and Data Driven Documents (D3) but I can not figure out a way to split these 3 parts in the way that I have described here.
Is it possible to use WPF-Toolkit or D3 to achieve this or is there an other component that lets me do this?
The component does not need to be free but I should be able to modify it like this.
You can use the Syncfusion components for WPF, they have a very good Chart component

WPF layout for complex card game

As my first WPF project, I am attempting to build an application to play a card game similar to Magic the Gathering. It is not clear to me how to lay out the main play area. You can see some examples that are similar to what I am attempting by looking at example 1 or example 2. The chat/info areas on the right would be separate user controls.
The cards must maintain their aspect ratios, and each play area would start with 10 columns and two rows of cards. As more cards are played, the number of columns and/or rows may change. Each player area may have a different number of columns and/or rows. Cards may overlap, and may be placed sideways (tapped). Cards in all areas should be the same size (although they may be cropped in some areas). Cards do not need to lie exactly on the grid (they do not necessarily snap-to-grid).
When the user hovers the mouse over a card, it should expand to a significantly larger size using an animation. A card in one player area may overflow into the other player's area when expanded (but only as long as the mouse hovers).
Given these requirements, I am tempted to use one large user control derived from Canvas with image objects for each card (along with other shapes to delineate the areas). This implies that I will be doing a lot of work during the OnRenderSizeChanged event to position the child items within the canvas (manual layout).
Using a grid does not seem feasible to me, due to the free-form placement and overlap.
Decomposing the play area into smaller user controls would leverage the WPF layout capabilities, but it seems like decomposition would prevent the cards from expanding into adjacent user controls during the mouse-over, so that doesn't seem feasible either.
Is there a better alternative to one large canvas-based control? It seems wrong to be doing manual layout in WPF, but I cannot see an alternative.
This sounds like a great scenario for Composite Application ala Prism. It provides solid framework for implementing regions, modules, sending message between modules etc... From looking at your screen captures, developing a shell with different regions and dropping modules into them would probably greatly benefit your layout. As for the cards themselves, perhaps they could be modules as well?
Check out:
http://msdn.microsoft.com/en-us/library/ff649780.aspx
Particualy good examples come with the download package including a stock market like application and event aggregator example.
You said:
Decomposing the play area into smaller user controls would leverage the WPF layout capabilities, but it seems like decomposition would prevent the cards from expanding into adjacent user controls during the mouse-over, so that doesn't seem feasible either.
But this is not correct. Decomposition is absolutely the right approach to take, and this would not prevent the cards from expanding into adjacent user controls. The reason being that you can use a RenderTransform rather than a LayoutTransform. See this example, by Charles Petzold, or this article, to visualize the difference. Because a RenderTransform is applied after the layout has already occurred, your cards would be able to expand outside their bounds.
Given that decomposition is the right approach, I would arrange your various card collections into a Grid, with each collection being an ItemsControl. The ItemsControl should bind its ItemsSource property to some collection, and then you can provide a custom ItemTemplate that would display the image and any other information. I would be hesitant to use a Canvas, as this would restrict you to hard-coding the positions for the cards (which is a very WinForms-like solution for a problem that can be far more elegantly solved). Take advantage of WPF's fantastic layout engine and use nested grids and items controls to create a dynamic layout. This will ensure that your game board looks good at any resolution and when stretched to various sizes.
I recommend you take a look at this guys project . In java I know but if I was to go the route of building a card game. That would be what I would go off of.
A lot of canvases inside of a grid could help you here, the canvas will allow the content to render outside of its bounds, as long as you turn ClipToBounds to false, and you will be given much more control over exact placement of the cards than with other schemes. You will also get the powerful functionality of a grid control, allowing you to add and remove columns and rows as needed (though you will also have to dynamically add and remove canvasses, though this isn't too difficult.
If you're worried about the contents of your "Card" moving around when the box is rescaled, surround it in a viewbox. It will manage all your scaling for you, and ensures your card uses as much real estate as it can get. Alternatively you could use a RenderTransform, but a lot of these might slow your program down (Experts: does the viewbox operate using RenderTransforms? If so this point is moot)
To ensure the cards maintain their aspect ratios make sure each Image's Stretch attribute is set to "Uniform", making them all keep the same size could be done by designating a master card, and binding heights and widths of all subsequent cards to this original card, though that is a little messy and doesn't allow the cards to expand. Another solution is to set a single size for each card manually, animating this when you want to expand or shrink.

What would you suggest for building such a control in WPF?

I need to build a WPF control that looks somehow similar to this:
alt text http://img251.imageshack.us/img251/6857/circle.png
Where each color should be clickable and resizable (or selectable).
This control will be used to set modes on the hours of a day.
I've thought about making 24 buttons that would be arranged in a circle:
alt text http://img684.imageshack.us/img684/2184/buttonsk.png
Another idea was to draw a complete circle and calculate user mouse click's position for the selection and draw several circles to represent the data.
Any other/better ideas on how to build this?
(please excuse my poor drawing).
I think you would get odd edge-effects with multiple overlapping or touching controls. So I would make a single custom control to do this. It would convert the mouse position on button down to a slice, and then do the appropriate action.
With a single control, you could also come up with a rational way of dealing with keyboard input and for showing selection and allowing for multi-select behavior.
It sounds like you want a customized ListBox (multiple items that are selectable/clickable). For the layout you would want to use some type of RadialPanel as the ItemsPanel. You probably also need to change the ItemContainerStyle to make your ListBoxItems look like what you have above, probably with some triggers to change colors based on selection state. Depending on what behavior you need from your items you may need to create custom ListBox/ListBoxItem derived custom controls but in a lot of cases the built-in behavior will get you a long way. To reuse it as a single unit you could wrap up the ListBox with its 24 hour items and customized templates in a UserControl and expose the selection data in whatever form you need as a Dependency Property (like an IEnumerable of the data items representing the selected hours).
Does that help you get started?

c#: Choosing or modifying a control to create draggable graphics on a canvas

I'm attempting to write a small app that will do something similar to what is shown here:
http://www.soccertutor.com/tour/MASTER_SKIN_team.swf
However I've not used WPF/Win Forms very much at all and can't seem to find a control that will be most applicable to the situation. I want to have some sort of grid for the pitch so I can have players, cones, other items snap to certain parts of the grid and I would like the players to be draggable onto the various grid squares.
Thanks very much, I look forward to hearing your recommendations/suggestions!
You don't use controls for something like this. You use objects in your code that represent a visible item on the screen. Periodically you render an update to the screen. You draw the background, then each object. You add mouse hit testing to make the scene interactive to the user. The main game loop calculates new object positions, implements object collision detection and game rules.

Categories

Resources